logo标签列表

固定表头出现问题

javascriptjqueryruby-on-railsfixed-header-tables
5
更新：我与FixedHeader的作者交谈，似乎它对我没有用。我认为问题在于我的表格在选项卡中，这导致了一些问题（请参见我其他更新中的截图），他说当前版本的FixedHeader没有解决这些问题。我尝试了一些其他固定表头的插件和方法，它们都给我带来了类似的问题。我怀疑是因为我的表格在选项卡内。如果有人有任何简单的解决方案，请告诉我。否则，不用担心。我还有很多其他工作要做，而固定表头似乎花费了太多时间。
我正在尝试在我的网站上使用FixedHeader。
我下载了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错误了，但是固定的标题并没有真正起作用（标题从网页顶部开始，大小不正确等）。

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

不确定这是否相关或只是一个单独的问题，但我的主页上的JavaScript出了些问题。你应该点击“查看详情”按钮以获取详细信息，但所有这些按钮的内容都一直显示出来。 - Adam Zerner
$(document).ready( function () { new FixedHeader( $('.table-fixed-header').get(0) ); } );这段代码来自于固定表头示例 http://datatables.net/release-datatables/extras/FixedHeader/html_table.html代码中提到“2. HTML table node - when using FixedHeader without DataTables”，因此它可能只适用于表格。 - j03w
@j03w 我刚试了一下，但没有成功。现在当我进入检查元素>资源时，在FixedHeader.js中出现了2个错误，而在colleges.js中没有出现任何错误。s.bUseAbsPos = (jQuery.browser.msie && Uncaught TypeError: Cannot read property 'msie' of undefined (重复2次) (jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0")); }, - Adam Zerner
@j03w看一下我对问题的编辑。我尝试过调整，但插件似乎不起作用。我确实会自己进行研究，但我是一名经验不足的程序员，不知道该怎么做。我确实在谷歌上搜索了很多，并尝试了其他插件。随着我的学习，我会检查所学的东西（我以前不知道要重新启动Web服务器或检查检查元素>资源），但我不能做更多的事情。 - Adam Zerner
你介意为我们创建一个JSFiddle吗？也许从那里帮助你会更容易。http://jsfiddle.net/ - j03w
显示剩余8条评论
3个回答
1
即使您进行了更正，我仍然可以看到JavaScript引用中的重复。以下是从您的网页提取的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 %>（但在布局中保留了它），但仍然遇到相同的问题。 - Adam Zerner
1

你可以尝试将JavaScript包含在页面底部，紧接着闭合标签

  • 保留顶部的常规Rails内容
  • 在页面底部添加FixedHeader包含： <script src="/assets/FixedHeader.js" type="text/javascript"></script>
尝试过了，但它并没有改变任何东西。已知 FixedHeader.js 仍在加载。 - Adam Zerner
1

如此建议这里:

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接