如何在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中配置服务器端筛选？

回答

相关问题