過濾負數整數的jQuery數據表

Question

我可以對負數進行排序dataTable就好了，但我想過濾而不是在select.change（）事件排序。基本上，我只需要它取第4列的值，並基於選擇框選擇{all，positive或negative}來呈現該行。

<table class="data-table"> 
    <thead> 
     <tr> 
     <th>Text</th> 
     <th>Text</th> 
     <th>Text</th> 
     <th>Value</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>Lorem</td> 
     <td>Ipsum</td> 
     <td>Dolor</td> 
     <td>$1.99</td> 
     </tr> 
     <tr> 
     <td>Lorem</td> 
     <td>Ipsum</td> 
     <td>Dolor</td> 
     <td>$2.99</td> 
     </tr> 
     <tr> 
     <td>Lorem</td> 
     <td>Ipsum</td> 
     <td>Dolor</td> 
     <td>$-1.99</td> 
     <tr> 
     <td>Lorem</td> 
     <td>Ipsum</td> 
     <td>Dolor</td> 
     <td>$-2.99</td> 
     </tr> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
     <td colspan="4"> 
      <select class="select-filter"> 
      <option value="1">All</option> 
      <option value="2">Positive</option> 
      <option value="3">Negative</option> 
      </select> 
     </tr> 
    </tfoot> 
</table> 

然後我試過一對夫婦的JS：

$(function(){ 
    $(".data-table").dataTable(); 
    $('.select-filter').change(function(){oTable.fnDraw();}); 
}); 

，但 「看起來」 最容易的做我想做的一個：

$(".data-table").dataTable().columnFilter({ 
    aoColumns: [ 
     null, 
     null, 
     null, 
     {type: "select"} 
    ] 
}); 

雖然，這我們只會創建一個包含所有值的選擇。我怎樣才能做到這一點？

Answer 1

這裏有一種方法：http://jsfiddle.net/AGsPA/

'myFilter' 是選擇的ID。 afnFiltering允許您將自己的自定義過濾器添加到數據表。請注意，下面的過濾器功能很簡單 - 在Value列中沒有破折號的任何東西都將被視爲正數（這包括空格）。任何帶有短劃線的東西都是消極的。

var myFilter = $('#myFilter'); 

$.fn.dataTableExt.afnFiltering.push(
    function(oSettings, aData, iDataIndex) { 
     if (myFilter.val() == 1) 
      return true; 
     else if (myFilter.val() == 2) 
      return (aData[3].indexOf('-') == -1); 
     else 
      return (aData[3].indexOf('-') != -1); 
    } 
); 
myFilter.change(function() { $('#myTable').dataTable().fnDraw(); }); 

您可能也有興趣在此：DataTables Column Filter Add On

Answer 2

這裏的一個方式，雖然我做不提出這個被譽爲「最佳途徑」。該示例發佈在jsbin中。

http://jsbin.com/afogup/2/edit

注意第一列中，這將被隱藏，但它包含任一「2」或「3」爲正和負。

<tr> 
    <th>Filter Val</th> 
    <th>Text</th> 
    <th>Text</th> 
    <th>Text</th> 
    <th>Value</th> 
    </tr> 

注意對於使用select元素作爲過濾器數據表的文檔。
http://www.datatables.net/examples/api/multi_filter_select.html

然後注意撥打電話datatable。

$(document).ready(function() { 
    /* Initialise the DataTable */ 
    var oTable = $('#example').dataTable({ 
     "aoColumnDefs": [ 
      { "bVisible": false, "aTargets": [ 0 ] } 
     ], 
     "oLanguage": { 
      "sSearch": "Search all columns:" 
     } 
    }); 

    /* select menu in the table footer */ 

    $('select.select-filter').change(function() { 
     var selectVal = parseInt($(this).val(), 10); 
     if (selectVal === 1) { 
      oTable.fnFilter("", 0); 
     } else { 
      oTable.fnFilter(selectVal, 0);   
     } 
    }); 
});