dataTables columnFilter 无法输入数据进行列过滤

Question

页面显示带有列名的脚，但没有用于输入列过滤器值的位置。 我查看了数据表网站上的示例以及堆栈溢出网站中的其他示例，发现不知道如何修复它。 任何帮助或建议如何解决此问题将不胜感激。 谢谢。

<% provide(:title, 'TBMs Daily Progress') %>

<% if signed_in? %>

    <h3>TBMs Max Station by day - Today's date: <%=@current_date%></h3>

  <% if @current_date != @tbms_progress_W.daily_date %>
      <h6 class="error-message">
          <%= "Today's location for TBM W is not loaded" %>
          <%= " Last TBM W recorded date was: " %>
          <%=@tbms_progress_W.daily_date %>
      </h6>
  <% end %>

  <% if @current_date != @tbms_progress_E.daily_date %>
      <h6 class="error-message">
          <%= "Today's location for TBM E is not loaded" %>
          <%= " Last TBM E recorded date was: " %>
          <%=@tbms_progress_E.daily_date %>
      </h6>
  <% end %>

    <p>
        <% if current_user.admin? %>
            <%= link_to "Add new location", new_tbms_progress_path, class: "btn btn-sm btn-danger" %>
        <% end %>
        <%= link_to "List view", tbms_progresses_path, class: "btn btn-sm btn-primary" %>
    </p>

    <table id="progresstable" class="display table-bordered table-condensed table-responsive table-hover">
        <thead style="background-color: #bbbbbb;">
            <tr>
                <th>Daily Date</th>
                <th>TBM ID</th>
                <th>Max Station</th>
                <th>TBM Status</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody>
            <% @tbms_progresses.each do |tbms_progress| %>
                <tr>
                    <td><%= tbms_progress.daily_date %></td>
                    <td><%= tbms_progress.tbm_id %></td>
                    <td><%= number_with_precision tbms_progress.max_station, precision: 2 %>
                    <td><%= tbms_progress.tbm_status %></td>
                    <td><%= link_to tbms_progress.id, tbms_progress %></td>
                </tr>
            <% end %>
        </tbody>
        <tfoot>
            <tr>
                <th>Daily Date</th>
                <th>TBM ID</th>
                <th>Max Station</th>
                <th>TBM Status</th>
                <th>ID</th>
            </tr>
        </tfoot>
    </table>
    <hr/>
    <h6>Legend: W aka TBM1 or 26900, E aka TBM2 or 27000</h6>

<% else %>
    <%= render 'instruments/unsigned' %>
<% end %>

<script>
  $(document).ready
  (function() 
      {
        $('#progresstable').dataTable
        (
            {
                /*sPaginationType: "full_numbers",*/
                bJQueryUI: true,
                aaSorting: [ [0,"desc"], [1, "desc"] ],
                bDeferRender: true,
                bStateSave: true
            }
        ).columnFilter
        (
            {aoColumns: 
                [
                    { type: "text" },
                    { type: "text" },
                    { type: "text" },
                    { type: "text" },
                    { type: "text" }
                ]
            }
        );
      }
    );
</script>

Answer 1

抱歉，不知道有这样的插件存在。

我已经检查过了，它工作得非常好。 Look for yourself

我唯一能想到的是，在加载 jquery 和数据表代码之后，但在开始初始化之前，您没有包含来自 here 的插件代码。

  <script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery@*"></script>
  <link data-require="datatables@*" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" />
  <script data-require="datatables@*" data-semver="1.9.4" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
  <script src="colfilter.js"></script>
  <script src="script.js"></script>

Answer 2

我通过迁移到数据表 1.10.2 解决了这个问题，不再使用表的引导布局，而是在包含表的每个页面上运行来自 //cdn.datatables.net 的数据表脚本。