FixedHeader 的问题答案

【问题标题】：Trouble with FixedHeaderFixedHeader 的问题
【发布时间】：2017-03-09 06:25:41
【问题描述】：

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

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

我下载了FixedHeader.js，放到vendor/assets/javascripts。我在application.js 中有//= require FixedHeader。

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

在开发环境中，当我去检查元素 > 资源（在 chrome 中）时，FixedHeader.js 会加载，但 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 错误，但是固定的标头并没有很好地工作（标头从我的网页顶部开始，但它不应该，它的大小不正确ETC。）。

更新：使用更新版本 (https://github.com/DataTables/FixedHeader/blob/master/js/FixedHeader.js) 在您单击表格链接之前，页眉会出现在页面顶部（它不应该出现，也不应该出现在最顶部)。此外，它的大小不正确，并且没有排序功能。请参阅以下链接：
- http://awesomescreenshot.com/00d1pe963a
- http://awesomescreenshot.com/09e1pe9581
- http://awesomescreenshot.com/0d21pe9a2b

【问题讨论】：

不确定这是否相关或只是一个单独的问题，但不知何故，我主页上的 javascript 搞砸了。您应该单击“查看详细信息”按钮以获取详细信息，但这些按钮的所有内容总是被显示。
$(document).ready( function () { new FixedHeader( $('.table-fixed-header').get(0) ); } ); 这是来自固定标头示例datatables.net/release-datatables/extras/FixedHeader/… 代码说2. HTML table node - when using FixedHeader without DataTables 所以它可能只适用于表。
@j03w 我刚刚尝试过，但没有成功。现在，当我转到 Inspect Element > Resources 时，FixedHeader.js 中出现 2 个错误，colleges.js 中没有。 s.bUseAbsPos = (jQuery.browser.msie && Uncaught TypeError: Cannot read property 'msie' of undefined (repeated 2 times) (jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0" )); },
显然jQuery.browser 已被弃用。看这里jquery.com/upgrade-guide/1.9/#jquery-browser-removed你可以修改FixedHeader的源代码或者使用这个stackoverflow.com/a/15540975/832759另外，请自己研究。阅读文档。试试谷歌。不要只是在 SO 上抛出任何错误。
@j03w 查看我的问题的编辑。我试着弄乱了，但看起来插件不起作用。而且我确实尝试自己进行研究，但我是一个没有经验的程序员，不知道该怎么做。我用谷歌搜索了很多，也尝试了其他插件。随着我学到更多，我检查了我学到的东西（我以前不知道重新启动 Web 服务器或检查检查元素 > 资源），但我真的不能做更多的事情。

标签： javascript jquery ruby-on-rails fixed-header-tables

【解决方案1】：

您可以尝试将 javascript 包含在页面底部，就在关闭的下方 ""

将普通的导轨放在顶部
在页面底部添加 FixedHeader 包含：<script src="/assets/FixedHeader.js" type="text/javascript"></script>

【讨论】：

试过了，并没有改变任何东西。众所周知，FixedHeader.js 无论如何都在加载。

【解决方案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>

请从您的视图中删除重复的引用。愿这能解决您面临的问题。

【讨论】：

我从所有视图中删除了<%= javascript_include_tag :application %>（但将其留在了布局中），但我仍然遇到同样的问题。

【解决方案3】：

如建议here:

尝试添加 Ajax 调用以自动更新您的表格！

【讨论】：