javascript - FixedHeader 的问题

Question

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

我正在尝试将FixedHeader用于我的网站。

我下载了 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 );。

在开发环境中，当我检查元素 > 资源（在 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

score 1 · Accepted Answer

即使在您进行了更正之后，我也可以在 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>

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

1

正如这里所建议的：

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

于 2013-09-16T09:42:56.577 回答

javascript - FixedHeader 的问题

3 回答 3

Related

Reference