dataTables按類名自定義篩選<tr>

Question

我閱讀http://datatables.net/examples/plug-ins/range_filtering.html文檔以篩選範圍，但我不太瞭解如何按行類過濾項目。

我想要有幾個按鈕，單擊時，按每行的類（字符串值）篩選dataTable。因此，例如，如果您有

<tr class="dont_filter"> 
<tr class="do_filter"> 

它們都會默認顯示。當有人點擊其中一個按鈕時，具有「do_filter」的所有行都將隱藏起來，dataTables將重新繪製列表，以便在所有頁面中發生此更改。

Answer 1

這是一個用於完全不同的東西的數據表提琴的叉子。

http://jsfiddle.net/72xGx/

該樣品取「範圍濾波」的數據表位點爲起點的例子。 它使用複選框來確定是否應用過濾器，並且默認情況下所有過濾器都處於打開狀態。當您檢查並取消選中複選框時，表格中的數據應相應地過濾。毫無疑問，這可以進行一些清理，但我相信你會發現這是實現你所說的目標的一條途徑。

的JavaScript

/* Custom filtering function which will filter data in column four between two values */ 
$.fn.dataTableExt.afnFiltering.push(

function (oSettings, aData, iDataIndex) { 
    var gA = $('#ckb-gradeA').is(':checked'), 
     gC = $('#ckb-gradeC').is(':checked'), 
     gU = $('#ckb-gradeU').is(':checked'), 
     gX = $('#ckb-gradeX').is(':checked'); 

    var myRowClass = oSettings.aoData[iDataIndex].nTr.className; 

    if (myRowClass === 'gradeA' || myRowClass === 'gradeA even' || myRowClass === 'gradeA odd') { 
     return gA === true ? true : false; 
    } else if (myRowClass === 'gradeC' || myRowClass === 'gradeC even' || myRowClass === 'gradeC odd') { 
     return gC === true ? true : false; 
    } else if (myRowClass === 'gradeU' || myRowClass === 'gradeU even' || myRowClass === 'gradeU odd') { 
     return gU === true ? true : false; 
    } else if (myRowClass === 'gradeX' || myRowClass === 'gradeX even' || myRowClass === 'gradeX odd') { 
     return gX === true ? true : false; 
    } else { 
     return false; 
    } 
}); 

$(function() { 
    /* Initialise datatables */ 
    var oTable = $('#example').dataTable(); 

    /* Add event listeners to the two range filtering inputs */ 
    $('#ckb-gradeA').change(function() { 
     oTable.fnDraw(); 
    }); 
    $('#ckb-gradeC').change(function() { 
     oTable.fnDraw(); 
    }); 
    $('#ckb-gradeU').change(function() { 
     oTable.fnDraw(); 
    }); 
    $('#ckb-gradeX').change(function() { 
     oTable.fnDraw(); 
    }); 
}); 

HTML表格結構的一部分
（以注意的<tr>元素一些css類）

<tr class="gradeC"> 
     <td>Trident</td> 
     <td>Internet Explorer 5.0</td> 
     <td>Win 95+</td> 
     <td class="center">5</td> 
     <td class="center">C</td> 
    </tr> 
    <tr class="gradeA"> 
     <td>Trident</td> 
     <td>Internet Explorer 5.5</td> 
     <td>Win 95+</td> 
     <td class="center">5.5</td> 
     <td class="center">A</td> 
    </tr> 
    <tr class="gradeA"> 
     <td>Trident</td> 
     <td>Internet Explorer 6</td> 
     <td>Win 98+</td> 
     <td class="center">6</td> 
     <td class="center">A</td> 
    </tr>