tablesorter에서 서버 측 필터링을 구성하는 방법은 무엇입니까?

Question

필터 위젯과 함께 tablesorter jQuery 플러그인을 사용하고 있으며 실제 필터링을 서버로 오프로드하고 싶습니다. 위젯에 대한 filter_serversideFiltering 옵션이 있지만 설정 방법에 대한 문서 나 예제를 찾을 수 없습니다.

적어도 AJAX 요청을 보내는 URL과 응답을 처리하기위한 콜백을 제공해야한다고 가정하지만 필터 위젯 문서는이를 수행하는 방법이나 위치를 설명하지 않습니다.

(참고 :.. 내가 여기에 바로 필터 위젯을 호출기 플러그인을 사용하지 않는 서버 측 fitering는 AJAX 설정에 대한 호출기에 의존하는 경우,이 역시 문서화되어 있지 않습니다)

Answer 1

모든 filter_serversideFiltering 옵션은 호출기 위젯/addon과의 통합을 허용하고 내용이 일치하지 않으면 테이블의 행을 숨기는 것을 방지합니다.

호출기 위젯/추가 기능이 없으면 filterEnd 이벤트에 바인딩하고 자신의 아약스 호출을 수행해야합니다. 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 
     } 
    }); 

});