javascript - 按负整数过滤 jQuery 数据表

Question

我可以对负片上的数据表进行排序，但我想对 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 允许您将自己的自定义过滤器添加到数据表中。请注意，下面的过滤器函数很简单 - 值列中没有破折号的任何内容都将被视为正值(包括空格)。任何带破折号的都是负数。

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