遵循教程后，Jquery DataTables 不显示答案

【问题标题】：Jquery DataTables does not show up after following tutorial遵循教程后，Jquery DataTables 不显示
【发布时间】：2012-06-28 23:22:39
【问题描述】：

问题暂时解决。

我通过删除随页面滚动的粘性标题删除我的 javascript 部分来修复它。当代码在 application.html.erb 中时，我真的不知道为什么我的 javascript 很糟糕

当我的 application.html.erb 如下所示时，我的数据表将起作用：

<!DOCTYPE html>
<html>

    <head>
        <title>Dummyapp1</title>
          <%= stylesheet_link_tag "application" %>
          <%= javascript_include_tag "application", "contractens" %>
          <%= csrf_meta_tags %>

    <div>

    </head>

<body>
==rest of script==

当我的 application.html.erb 看起来像这样时它不起作用：

<!DOCTYPE html>
<html>

    <head>
        <title>Dummyapp1</title>
          <%= stylesheet_link_tag "application" %>
          <%= javascript_include_tag "application", "contractens" %>
          <%= csrf_meta_tags %>

    <div>

</div>

    <!-- If you have jQuery directly, then skip next line -->
    <script src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">
    // If you have jQuery directly, then skip next line
    google.load("jquery", "1");

    function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;
      if (window_top > div_top)
        $('#sticky').addClass('stick')
      else
        $('#sticky').removeClass('stick');
      }
    // If you have jQuery directly, use the following line, instead
    // $(function() {
    // If you have jQuery via Google AJAX Libraries
    google.setOnLoadCallback(function() {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
      });
    </script>

    </head>

<body>

我遵循这个Railscasts Rails 中的数据表教程。我在我的另一个应用程序中有这个。在那里它工作正常。我和其他应用做了同样的事情，但它显示的是文本而不是实际的表格。

这是我对桌子的看法：

    <h1>Listing contracten</h1>

    <table id="contractens" class="display">
      <thead>
          <tr>
            <th>Naam</th>
            <th>Omschrijving</th>
            <th>Datumingang</th>
            <th>Contractduur</th>
            <th>Opzegtermijn</th>
            <th>Betalingstermijn</th>
          </tr>
      </thead>
    <tbody>
      <%= @contractens.each do |contracten| %>
      <tr>
        <td><%= contracten.naam %></td>
        <td><%= contracten.omschrijving %></td>
        <td><%= contracten.datumingang %></td>
        <td><%= contracten.contractduur %></td>
        <td><%= contracten.opzegtermijn %></td>
        <td><%= contracten.betalingstermijn %></td>
      </tr>
    <% end %>
    </tbody>
    </table>

<%= link_to "Nieuw", new_contracten_path %>

我的javascript文件填写正确。

这是问题的截图：

希望你能帮助我:)

编辑：它应该看起来像这样，没有 css：

使用 css 应该是这样的：

这是我的contractens.js.coffee：

jQuery ->
        $('#contractens').dataTable
          sPaginationType: "full_numbers"
          bJQueryUI: true

这是我的 application.js：

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require_tree .

这是我的 application.css：

/*
*= require_self
*= require dataTables/jquery.dataTables
*= require_tree .
*/

编辑 2：

当我有一个 javascript 函数可以在单击复选框时隐藏 div。当我有

jQuery ->
        $('#contractens').dataTable

在我的contractens.js.coffee 中它确实有效，但是当我有时：

jQuery ->
        $('#contractens').dataTable
        sPaginationType: "full_numbers"
        bJQueryUI: true

它也不起作用。所以我猜有些东西阻止了jquery。

【问题讨论】：

你打电话给$('#contractens').dataTable()了吗？
是的，我在我的 contractens.js.coffee 文件中做了

标签： jquery ruby-on-rails ruby-on-rails-3 datatables

【解决方案1】：

改变

<%= @contractens.each do |contracten| %>

为

<% @contractens.each do |contracten| %>

<%= %> 标签集在您想要输出时使用。

【讨论】：

奇怪但文字现在不见了，我还是看不到桌子
为什么奇怪？您在使用时打印了 contractens 实例变量。
不，我的意思是奇怪，我编辑后表格仍然没有显示
当我在 de contractens.js.coffee 文件中有 jquery 命令时，我还期望我的 application.js 中的其他 javascript 代码无法正常工作，我认为它以某种方式相互阻塞。
请更好地解释您的问题，如有必要，请编辑您的问题。

【解决方案2】：

我也有同样的问题，我改变了这个：在我的 application.js 中：

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require_tree .

到

//= require jquery
//= require_tree .
//= require jquery_ujs
//= require dataTables/jquery.dataTables

现在可以使用了。

【讨论】：

@KeesSonnema 是的 :) 它仅适用于可能遇到此类问题的人。
在我的情况下，它是一个错误的 js 文件。但无论如何它还是有帮助的 :) 谢谢你的提及。