如何在tablesorter中配置服務器端篩選？

我使用的tablesorter jQuery插件與過濾器小部件，我想卸載到服務器的實際過濾。我發現這個小部件有一個filter_serversideFiltering選項，但是我找不到有關如何設置它的任何文檔或示例。如何在tablesorter中配置服務器端篩選？

我假設我需要提供至少一個用於發送AJAX請求的URL和用於處理響應的回調，但過濾器小部件文檔似乎無法解釋在何處或如何執行此操作。

（注意：我不使用尋呼機的插件在這裏，就在過濾器部件如果服務器端fitering依賴於尋呼機其AJAX的設置，這也未記錄）

來源

2014-09-23 DarkMorford

這是我能找到的：http://aplia.com/media/jsframeworks/jquery/plugins/tablesorter/docs/example-widget- filter.html 我想你可能需要設置一個列作爲過濾器，打開控制檯並查看發送了哪些頭。 – DevlshOne 2014-09-24 00:22:22

@DevlshOne該頁面包含我的forkorter的舊版本的文檔。這是[當前過濾器文檔頁面]（http://mottie.github.io/tablesorter/docs/example-widget-filter.html）。 – Mottie 2014-09-24 01:50:14

所有filter_serversideFiltering選項的作用是允許與分頁器小部件/插件集成，並防止在內容不匹配時隱藏表中的任何行。

沒有尋呼機小部件/插件，您需要綁定到filterEnd事件並執行您自己的ajax調用。 Here is a demo使用filltext.com提供JSON數據，因此結果將不匹配過濾器，但您可以在過濾後看到它的更新。您可以查看控制檯網絡選項卡以查看正在使用的實際URL。

HTML

<table class="tablesorter"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>ID</th> 
      <th>First</th> 
      <th>Last</th> 
      <th>State</th> 
      <th>Info</th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
</table>

腳本

$(function() { 
    var $table = $('table'), 
     lastSearch = [], 
     updateAjax = function (filters) { 
      $.getJSON('http://www.filltext.com/?callback=?', { 

       // add the current filters to be serialized 
       // into a URL query string 
       // commented out here or filltext.com returns nothing 
       // 'filter': filters 

       // the following parameters are needed for 
       // filltext.com to return content 
       'rows': 10, 
       '#': '{index}', 
       'ID': '{randomNumberLength|3}', 
       'First': '{firstName}', 
       'Last': '{lastName}', 
       'State': '{usState|abbr}', 
       'Info': '{lorem|3}' 
      }) 
      .done(function (data) { 
       buildTable(data); 
      }); 
     }, 
     buildTable = function (data) { 
      if (data) { 
       var col, row, txt, 
       headers = ['#', 'ID', 'First', 'Last', 'State', 'Info'], 
        len = headers.length, 
        rows = ''; 
       size = data.length; 
       for (row = 0; row < size; row++) { 
        rows += '<tr>'; 
        for (col = 0; col < len; col++) { 
         txt = data[row][headers[col]]; 
         rows += '<td>' + txt + '</td>'; 
        } 
        rows += '</tr>'; 
       } 

       $table.find('tbody') 
        .html(rows) 
        .trigger('update'); 
      } 
     }; 

    $table.on('filterEnd', function (e, c) { 
     // prevent ajax spamming 
     var ls = c.$table.data('lastSearch'); 
     if (lastSearch.join('-') !== ls.join('-')) { 
      lastSearch = ls; 
      updateAjax(lastSearch); 
     } 
    }) 
    .tablesorter({ 
     theme: 'blue', 
     widthFixed: true, 
     widgets: ['zebra', 'filter'], 
     widgetOptions: { 
      // prevents rows from getting hidden 
      filter_serversideFiltering: true 
     } 
    }); 

});

來源

2014-09-24 03:29:29 Mottie

如何在tablesorter中配置服務器端篩選？

回答

相關問題