Question

现在问题已解决。

我通过删除我的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>

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

以下是我对该表的看法：

    <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。当我有

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

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

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

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

Answer 1

更改

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

的

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

当您想要输出时，会使用<%= %>标记集。

Answer 2

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

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

TO

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

它现在有效。

下面的教程后，Jquery DataTables不会显示

2 个答案: