TableFilter插件與空數據

Question

我正在使用「jquery.tablesorter.widgets.js」表過濾器工作正常，但我不得不顯示「沒有數據發現」，當記錄不可用基於搜索條件。

這是我的代碼。

HTML代碼：

  <tr> 
       <td class="filter-false" width="3%" style="background: #5e5c5c; color: #fff; vertical-align: middle; font-size: 12px; font-weight: bold"></td> 
       <th class="txt1" style="text-decoration: underline; cursor: pointer">Domain</th> 
       <th style="text-decoration: underline; cursor: pointer">Registrant Name</th> 
       <th class="filter-select" data-placeholder="Select" style="text-decoration: underline; cursor: pointer">Account Id</th> 
       <th style="text-decoration: underline; cursor: pointer">Expiry Date</th> 
       <th style="text-decoration: underline; cursor: pointer">Renewal Date</th> 
       <th style="text-decoration: underline; cursor: pointer">Email ID</th> 
       <th class="filter-false" style="text-decoration: underline; cursor: pointer">Status</th> 
      </tr> 

JavaScript代碼：

   $(document).ready(function() { 

    $("#yui").tablesorter({ 

     // headers: { 0: { sorter: false }, 1: { sorter: false }, 2: { sorter: false }, 3: { sorter: false }, 4: { sorter: false }, 5: { sorter: false } }, 
     widthFixed: false, 

     // initialize zebra striping and filter widgets 
     widgets: ["zebra", "filter"], 

     // headers: { 5: { sorter: false, filter: false } }, 

     widgetOptions: { 

      // extra css class applied to the table row containing the filters & the inputs within that row 
      filter_cssFilter: '', 

      // visible; default is false 
      filter_childRows: false, 

      filter_ignoreCase: true, 

      filter_reset: '.reset', 

      filter_saveFilters: true, 

      filter_searchDelay: 300, 

      filter_startsWith: false, 

      filter_hideFilters: false, 

      filter_functions: { 

      } 
     } 
    }) 
    .tablesorterPager({ container: $("#pagerOne"), positionFixed: false, size: 10 }) 
}); 

我必須顯示 「未找到資料」 的消息在錶行。

Answer 1

您可以使用內置的showError function（2.15版+），並結合幾個事件如下（demo）：

$(function() { 

    $("#yui") 
    .on('filterEnd filterReset pagerComplete', function(e, table){ 
     var fr, table = this; 
     if (table.config.pager) { 
      $.tablesorter.showError(table); 
      fr = table.config.pager.filteredRows; 
      if (fr === 0) { 
       $.tablesorter.showError(table, "No Data Found"); 
      } 
     } 
    }) 
    .tablesorter({ 
     theme: 'blue', 
     widthFixed: false, 
     widgets: ["zebra", "filter"], 
     widgetOptions: { 
      filter_cssFilter: '', 
      filter_childRows: false, 
      filter_ignoreCase: true, 
      filter_reset: '.reset', 
      filter_saveFilters: true, 
      filter_searchDelay: 300, 
      filter_startsWith: false, 
      filter_hideFilters: false, 
      filter_functions: {} 
     } 
    }) 
    .tablesorterPager({ 
     container: $(".pager"), 
     positionFixed: false, 
     size: 10 
    }); 

}); 

注意，事件綁定尋呼機之前發生的需求被初始化&短setTimeout也是必需的，因爲尋呼機filteredRows計數不會在filterEnd事件後立即更新。

我需要修復的pagerChange event，以確保每一個尋呼機的變化，而不僅僅是一個「頁」變化後，觸發，這樣，那麼你只需要綁定到一個事件，並不需要一個時間延遲

更新：更改的代碼使用pagerComplete event，所以不需要setTimeout。