以下教程后，Jquery DataTables不会显示

问题描述：

我通过删除我的javascript部分修复了与页面滚动粘滞标题的问题。我真的不知道为什么我的JavaScript是蹩脚时的代码是在application.html.erb

当我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教程在轨数据表。我在我的其他应用程序中有这个。它工作正常。我做了与其他应用程序相同的东西，但它显示的是文本而不是实际的表格。

Here's我的表视图：

<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文件也已经正确的。问题的

这里'山截图：

issue

希望你能帮助我:)

编辑：它应该是这样的，没有CSS：

enter image description here

它应该看起来像这样用css：

enter image description here

这是我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时点击复选框。当我在contractens.js.coffee有

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

它的工作，但是当我有：

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

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

你叫'$（'＃contractens'）。dataTable（）'？ – Daniel

是的，我在我的contractens.js.coffee文件中做过 –

答

变化

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

为

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

当你想输出的<%= %>标签组使用。

奇怪但文字现在不见了，我还是看不到表 –

为什么奇怪？在使用时，您正在打印contractens实例变量。 –

不，我的意思是奇怪的是，表格仍然没有显示后，我编辑它 –

答

我也有同样的问题，我改变了这一个：在我的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 Yup :)它只适用于那些可能有此类问题的人。 –

在我的情况下，这是一个bug的js文件。但无论如何它都有帮助:)感谢提及。 –

以下教程后，Jquery DataTables不会显示

相关推荐