按按钮扩展名筛选行

时间:2015-11-09 11:15:38

标签: jquery json ajax button datatables

我的表格由json - demo填充。

我需要通过自定义按钮和按钮扩展名来过滤行 - 在列dokonané中显示值为c12的行。下一步按钮显示所有行,效果很好。

HTML:

<button id="filter">Outside - filter</button>
<button id="filter1">Outside - reload</button>
<table id="example">
    <thead>
      <tr>
          <th>c06</th>
          ...
          <th>c12</th>
      </tr>
    </thead>
</table>

JS:

table =  $('#example').DataTable( {
        "ajax": {
            "url": "link",
            "dataSrc": "data"
        },
        dom: 'Bt',
        buttons: [
        {
            text: 'Buttons - filter',
            action: function ( e, dt, node, config ) {

               //function for filtering

            }
        },
        {
            text: 'Buttons - reload',
            action: function ( e, dt, node, config ) {
                dt.ajax.reload();
            }
        }            
       ],
        "columns": [
            { "data": "c06" },
            ...
            { "data": "c12" }
        ]
    } );

我可以通过带有文字Outside - filter的外部按钮(不是由扩展程序生成)来过滤它:

$("#filter").click(function() {
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            return (data[5] == 'dokonané')
                ? true
                : false
        }     
    );
    table.draw();
    $.fn.dataTable.ext.search.pop();
});
//reset to default state
$("#filter1").click(function() {
     table.draw();
});

如何通过点击带有文字Buttons - filter的按钮来过滤它?我希望将等同的过滤作为带有文本Outside - filter的按钮。 (带有文字Outside - reloadButtons - reload的按钮效果很好。)

1 个答案:

答案 0 :(得分:4)

您也可以使用自定义过滤器“内部”按钮:

action: function ( e, dt, node, config ) {
   $.fn.dataTable.ext.search.push(
     function( settings, data, dataIndex ) {
        return data[5] == 'dokonané'
     }
   )     
   table.draw();
   $.fn.dataTable.ext.search.pop();
}       
分叉小提琴 - &gt;的 http://jsfiddle.net/hssLzgcg/