Javascript 如何将过滤器应用于特定数据表

How to apply filter to specific datatable

提问by Astronaut

Is it possible to apply a certain filter to only one datatable? I have the following filter function that I am applying on document ready, I don't know if this is proper procedure, but as a side effect all dataTables will be affected by the filter. I would Like to affect only the $('#productTable'), but this selector appears to not have the desired effect.

是否可以将某个过滤器仅应用于一个数据表？我有以下过滤器功能，我准备在文档上应用，我不知道这是否是正确的程序，但作为副作用，所有数据表都会受到过滤器的影响。我只想影响 $('#productTable')，但是这个选择器似乎没有达到预期的效果。

//Filter Function in Stock 
//$('#productTable').
$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
    var checked = $('#instock').is(':checked');
    var qntStock = 1; 
    var stockCol = 3; 

    if (!checked) {
        return true;
    }
    if (checked && aData[stockCol] > qntStock) {
        return true;
    }

    return false;
 });

Is it possible to apply a filter only to a particular table? How do I accomplish this?

是否可以仅将过滤器应用于特定表？我该如何实现？

EDIT:

编辑：

dataTable initialization:

数据表初始化：

var oTable = $('#productTable').dataTable({
        "aoColumnDefs": [{
            "sClass": "my_class", 
            "aTargets": [4]
            }],
        "bAutoWidth": false,
        "iDisplayLength": 100,
        "fnDrawCallback": function() {
            $("td.my_class").editable(function(value, settings) 
            { 
                return(value);
            }, 
            {
                indicator : 'Save...',
                tooltip   : 'Click to Edit...'
            }
            );
        }
    });

回答by Manse

You could create an array of tables to have the filter - then in your filter check if the current table is present in that array ... something like :

您可以创建一个表数组来使用过滤器 - 然后在您的过滤器中检查当前表是否存在于该数组中......类似于：

// setup an array of the ids of tables that should be allowed
var allowFilter = ['productTable'];

$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {

    // check if current table is part of the allow list
    if ( $.inArray( oSettings.nTable.getAttribute('id'), allowFilter ) == -1 )
    {
       // if not table should be ignored
       return true;
    }
    var checked = $('#instock').is(':checked');
    var qntStock = 1; 
    var stockCol = 3; 

    if (!checked) {
        return true;
    }
    if (checked && aData[stockCol] > qntStock) {
        return true;
    }

    return false;
});

回答by Jarry

you can do something like this: add a parameter to the configuration:

你可以这样做：在配置中添加一个参数：

var oTable = $('#productTable').dataTable({
        "applyFilter":true,
        "aoColumnDefs": [{
            "sClass": "my_class", 
            "aTargets": [4]
            }],
        "bAutoWidth": false,
        "iDisplayLength": 100,
        "fnDrawCallback": function() {
            $("td.my_class").editable(function(value, settings) 
            { 
                return(value);
            }, 
            {
                indicator : 'Save...',
                tooltip   : 'Click to Edit...'
            }
            );
        }
    });

and then, verify if your filter is active:

然后，验证您的过滤器是否处于活动状态：

//Filter Function in Stock 
//$('#productTable').
$.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
    if(oSettings.applyFilter)
    {
        var checked = $('#instock').is(':checked');
        var qntStock = 1; 
        var stockCol = 3; 

        if (!checked) {
            return true;
        }
        if (checked && aData[stockCol] > qntStock) {
            return true;
        }

        return false;
    }
    else
        return true;
 });

回答by Daniel

Haven't tried, but how about something like this ?

没试过，但这样的事情怎么样？

$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
        if ( oSettings.nTable == document.getElementById( 'productTable' )){
            var checked = $('#instock').is(':checked');
            var qntStock = 1; 
            var stockCol = 3; 

            if (!checked) {
                return true;
            }
            if (checked && aData[stockCol] > qntStock) {
                return true;
            }

            return false;
        }
}
);

the idea came from this thread : 2 datatables & 2 filters on the same page

这个想法来自这个线程：同一页面上的 2 个数据表和 2 个过滤器

---

---

You can also try out myyadcf plugin for datatable, here its showcase url, its has 9 different types of filters + additional API functions that can help you load table pre filtered or add single filter for filtering multiple table and many other cool stuff..

你也可以试试我的yadcf 数据表插件，这里是它的展示网址，它有 9 种不同类型的过滤器 + 额外的 API 函数，可以帮助你加载预先过滤的表或添加单个过滤器来过滤多个表和许多其他很酷的东西..

回答by Astronaut

It turns out filtering is global and indeed you have to filter the table element... it's quite disappointing.

事实证明过滤是全局的，实际上你必须过滤表格元素......这很令人失望。

回答by syazdani

This is what we do:

这就是我们所做的：

            var temporarilySetFilterFunctions = $.fn.dataTableExt.afnFiltering;
            $.fn.dataTableExt.afnFiltering = [function (settings, data, index) {
                // our filter function
            } ];

            this._table.dataTable().fnDraw(); // filter!

            $.fn.dataTableExt.afnFiltering = temporarilySetFilterFunctions;

Basically store the existing filters in a TEMP variable and then revert it after we are done. Weird design descion on Allan's part to implement it like this. Ugly hack, but it works.

基本上将现有过滤器存储在 TEMP 变量中，然后在我们完成后将其还原。艾伦的部分奇怪的设计决定像这样实现它。丑陋的黑客，但它的工作原理。

回答by Rashmi Gk

The following link will help in applying filter to data table. http://live.datatables.net/oyinin/3/edit#javascript,html

以下链接将有助于将过滤器应用于数据表。 http://live.datatables.net/oyinin/3/edit#javascript,html

I have used it like this:

我是这样使用它的：

  drawTable = function (tableId, url,    stateEngineURL) {
        resUrl = url;
        sUrl = stateEngineURL;
        oTable = $('#' + tableId).dataTable({
            "bAutoWidth" : false,
            "bProcessing" : false,
            "bServerSide" : false,
            "sScrollY" : "150px",
            "bPaginate" : true,
            "bDeferRender" : true,
            "bScrollInfinite" : true,
            "bSortCellsTop" : true,
            "sAjaxSource" : url,
            "aoColumns" : [
                {
                    "mDataProp" : "clusterName"
                }, {
                    "mDataProp" : "type"
                }, {
                    "mDataProp" : "actions",
                    "bSortable": false
                }
            ],
            "fnServerData": function (sSource, aoData, fnCallback) {
                aoData.push({"name" : "REQUESTTYPE", "value" : "getCredentialResrcURL" });
                $.getJSON(sSource, aoData, function (json) {
                    fnCallback(json);
                });
            },
            "fnRowCallback" : function (nRow, aData) {
                onRowCallBack(nRow, aData);
            }
        });
        oTable.dataTableExt.afnFiltering.push(
                function( oSettings, aData, iDataIndex ) {
                   if(aData.type=='OSS 5.x'){
                       return false;
                   }
                }
            );
        oTable.fnDraw();