2017-01-23 77 views
0

只有漫遊纔有可能通過DataTables下拉過濾器中的tr類名來過濾記錄?基於tr類名稱的DataTables下拉列表過濾器

例I有一個下拉如下:

    <div> 
        <select> 
         <option value="Default">All</option> 
         <option value="Unread">Unread</option> 
        </select> 
       </div> 

和TR如下:

<tr class="unread"> 
    <td>test1</<td> 
</tr> 
<tr class="read"> 
    <td>test2</<td> 
</tr> 
<tr class="unread"> 
    <td>test3</<td> 
</tr> 

當下拉選擇的未讀,它將調用下面js代碼來濾除tr with「read」class and only only show with the following with「unread」class name:

 $.fn.dataTable.ext.search.push(
     function (settings, data, dataIndex) { 
      var test = settings.nTable.id; 
     } 
    ); 

回答

0

您幾乎在那裏尋找添加到search,但您需要參考其中的表api。這似乎工作:

$(function() { 
    $.fn.dataTable.ext.search.push(
     function(settings, data, dataIndex) { 
      if ($("#selector").val() !== "Default") { 
       var api = new $.fn.dataTable.Api(settings); 
       return api.row(dataIndex).nodes().to$().hasClass("unread"); 
      } else { 
       return true; 
      } 
     } 
    ); 
    var example = $("#example").DataTable(); 
    $("#selector").on("change", function() { 
     example.draw(); 
    }); 
}); 

而這裏是一個工作example,希望有所幫助。