Question

更新：我与FixedHeader的作者交谈，似乎它对我不起作用。我认为问题是我的表位于选项卡内部，这导致了一些问题（请参阅我的其他更新中的屏幕截图），他说当前版本的FixedHeader没有解决这些问题。我已经尝试了一些固定表头的其他插件和方法，他们都给了我类似的问题。我怀疑是因为我的桌子在一个标签内。如果有人有任何简单的解决方案，请告诉我。否则，不要担心。我有很多其他的东西要为这个网站工作，固定的表格标题似乎占用了太多时间。

我正在尝试将FixedHeader用于my website。

我已下载FixedHeader.js并将其放入vendor/assets/javascripts。我在//= require FixedHeader中有application.js。

在colleges.html.erb中，我为我的两个表中的每个表设置了一个table-fixed-header类，并且<%= javascript_include_tag :application %>。在colleges.js中，我有var oTable = $('.table-fixed-header').dataTable(); new FixedHeader( oTable );。

在开发环境中，当我去检查元素＆gt;资源（在chrome中），FixedHeader.js加载，但colleges.js存在2个问题：它说......

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错误，但是固定的标题并没有真正起作用（标题在我的网页顶部开始时不应该，它的大小不正确等等。）。

更新：使用更新后的版本（https://github.com/DataTables/FixedHeader/blob/master/js/FixedHeader.js）会在您点击表格链接之前获取标题显示在页面顶部（它不应该出现，它不应该在非常顶级）。此外，它的大小不正确，并且没有排序功能。请参阅以下链接：
- http://awesomescreenshot.com/00d1pe963a
- http://awesomescreenshot.com/09e1pe9581
- http://awesomescreenshot.com/0d21pe9a2b

Answer 1

你可以尝试将javascript包含在页面底部，就在结束时 “”

将正常的铁轨留在顶部
在页面底部添加FixedHeader包含：<script src="/assets/FixedHeader.js" type="text/javascript"></script>

Answer 2

即使你做了更正，我也可以在js参考文献中看到重复。以下是您网页上的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>

请从您的观看中删除重复的引用。愿这可以解决你所面临的问题。

Answer 3

根据建议here：

尝试添加Ajax调用以自动更新表格。

使用FixedHeader时出现问题

3 个答案: