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

我通過從//cdn.datatables.net移動到數據表1.10.2，不再使用的自舉佈局表和我跑的數據表中的腳本包含表中的每個頁面上解決了這個。

Answer 2

對不起，不知道這樣的插件存在。

我已經檢查過它，它的效果非常好。 Look for yourself

我唯一能想象IST你jQuery和數據表的代碼加載後沒有從here包括plugincode，但在開始初始化之前。

<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>