javascript - FixedHeader のトラブル

Question

更新: FixedHeader の作成者と話をしましたが、うまくいかないようです。問題は、私のテーブルがタブ内にあり、それがいくつかの問題を引き起こしていることだと思います (私の他の更新のスクリーンショットを参照)。固定テーブルヘッダー用の他のプラグインとメソッドをいくつか試しましたが、それらはすべて同様の問題を引き起こしています。テーブルがタブ内にあるためだと思います。どなたか簡単な解決策があれば教えてください。それ以外の場合は、心配しないでください。この Web サイトのために他にもやるべきことがたくさんありますが、固定テーブルヘッダーに時間がかかりすぎているようです。

Web サイトに FixedHeaderを使用しようとしています。

FixedHeader.jsをダウンロードしてに入れましたvendor/assets/javascripts。//= require FixedHeader入っていapplication.jsます。

で、2 つのテーブルのそれぞれにのcolleges.html.erbクラスを設定し、. で、私は持っています。table-fixed-header<%= javascript_include_tag :application %>colleges.jsvar oTable = $('.table-fixed-header').dataTable(); new FixedHeader( oTable );

開発環境で、要素 > リソース (クロム) を検査すると、FixedHeader.jsロードされますが、2 つの問題がありcolleges.jsます。

var oTable = $('.table-fixed-header').dataTable();  
Uncaught TypeError: Object [object Object] has no method 'dataTable' (repeated 2 times)
new FixedHeader( oTable );

これを機能させるにはどうすればよいですか？（現在はまったく機能していません。）

編集：私は少しいじっただけで、成功しませんでした。$.browserの代わりに試してみjQuery.browserましたが、同じ「msie」エラーが発生しました。次に、そのコードを完全に削除しようとしましたが、javascript エラーはありませんでしたが、修正されたヘッダーは実際にはうまく機能しませんでした (ヘッダーが Web ページの上部から始まって、適切なサイズになっていませんでした)。等。）。

更新: 更新されたバージョン ( https://github.com/DataTables/FixedHeader/blob/master/js/FixedHeader.js ) を使用すると、テーブルのリンクをクリックする前にページの上部にヘッダーが表示されます (そうすべきです)。まだ表示されておらず、一番上にあるはずはありません)。また、サイズが適切に設定されておらず、並べ替え機能もありません。次のリンクを参照してください:
- http://awesomescreenshot.com/00d1pe963a
- http://awesomescreenshot.com/09e1pe9581
- http://awesomescreenshot.com/0d21pe9a2b

score 1 · Accepted Answer

ここで提案されているように：

Ajax 呼び出しを追加して、テーブルを自動的に更新してみてください。

score 1 · Accepted Answer

JavaScript インクルードをページの一番下、最後の "" のすぐ下に配置してみてください。

通常のレールのものを一番上に残します
ページの下部に FixedHeader インクルードを追加します。<script src="/assets/FixedHeader.js" type="text/javascript"></script>

score 1 · Accepted Answer

修正後も、js 参照に重複が見られました。以下は、Web ページから抽出された HTML ソースです。

<!DOCTYPE html>
<html>
<head>
  <title>Colleges</title>
  <link href="https://carousel_photos.s3.amazonaws.com/assets/application-ef423e68595cb2b66d22d6028d65f673.css" media="all" rel="stylesheet" type="text/css" />
  <script src="https://carousel_photos.s3.amazonaws.com/assets/application-3a98859cd4322442bddf86e94e81f7d6.js" type="text/javascript"></script>
  <link href="https://carousel_photos.s3.amazonaws.com/assets/favicon-443a473c98a5e6627afeec49679d7e7c.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="shortcut icon" href="/favicon.ico" />
  <meta content="authenticity_token" name="csrf-param" />
<meta content="ZoOECcFHyrwgJo8DeOd42DDA86gRx6NBbctJlH9XjGc=" name="csrf-token" />
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-42526156-1', 'collegeanswerz.com');
    ga('send', 'pageview');
  </script>
</head>
<body>
    <header>        
        <p id="sign_in">
            <a href="/mentor">be a mentor</a><br />
            <a href="/find-a-mentor">find a mentor</a><br /><br /><br />
        </p>

        <div class="idea_bar">
          <div class="left_idea_bar">
            <form accept-charset="UTF-8" action="/application_controller/email" id="idea_bar_form" method="post"> 
                <div style="margin:0;padding:0;display:inline"> 
                    <input type="hidden" name="utf8" value="✓"> 
                    <input type="hidden" name="authenticity_token" value="LxYk26gr0kt4jHn9lhSgwdywC8lotwEAqT3od0rsRiA="> 
                </div> 
                <p>Ideas, comments, questions, suggestions? Help us help you!</p> 
                <div class="Left"> 
                    <textarea cols="60" id="message" name="message" rows="4"></textarea> 
                    <button id="submit" type="submit" form="idea_bar_form"><span id="big_submit">Send</span> <span id="small_submit"><br> 
                    • one click<br> 
                    • anonymous</span></button> 
                    </div> 
                <div class="Left"> 
                    <label for="email" style="display:inline">• include your email if you want a response:</label>
                    <input type="text" id="email" name="email" size="36"> 
                    <br> 
                </div> 
            </form>
          </div>
        </div>

        <nav id="main_nav">
            <hr />
            <ul> 
                <li id="logo"><a href="/"><img alt="CollegeANSWERZ" height="50" src="https://carousel_photos.s3.amazonaws.com/assets/favicon-7bc10d21b6efa5ccbd8ba1c3bb40689a.png" width="50" /></a></li> 
                <li><a href="/colleges">Colleges</a></li> 
                <li> | </li> 
                <li><a href="/about-college">About College</a></li> 
                <li> | </li> 
                <li><a href="/essays">Essays</a></li> 
                </ul> 
                <form accept-charset="UTF-8" action="/search" class="form_search ui-autocomplete" id="search_text" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>                   <div id="search"> <input class="input-medium search-query ui-autocomplete" id="search_field" name="search" placeholder="enter college" type="search" /> </div>
</form>         <hr />
        </nav>
    </header>

    <div class="container">
        <link href="https://carousel_photos.s3.amazonaws.com/assets/colleges-ae0a0221043603109dfe50ccaa4b7ded.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://carousel_photos.s3.amazonaws.com/assets/application-3a98859cd4322442bddf86e94e81f7d6.js" type="text/javascript"></script>

<div id="colleges_css">

<h1>Colleges</h1>

ビューから重複した参照を削除してください。それがあなたが直面している問題を解決しますように。

javascript - FixedHeader のトラブル

3 に答える 3

Related

Reference