0

我可以很好地对负数的数据表进行排序，但我想过滤而不是对 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"}
    ]
});

虽然，那个只会创建一个包含所有值的选择。我怎样才能做到这一点？

4

2 回答 2

3

这是一种方式：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

于 2013-05-28T00:55:41.773 回答
1

这是一种方法，尽管我不建议将其作为“最佳方法”。该示例发布在 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 );         
      }
    });
});
于 2013-05-28T00:55:39.897 回答