Javascript 如何将筛选器应用于特定数据表

是否可以只对一个数据表应用某个筛选器？ 我在documentready上应用了下面的filter函数，我不知道这是否是正确的过程，但作为一个副作用，所有数据表都会受到filter的影响。我只想影响$（“#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;
 });

是否可以仅对特定表应用筛选器？我如何做到这一点

编辑：

数据表初始化：

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...'
            }
            );
        }
    });

---

您可以创建一个表数组来拥有过滤器-然后在过滤器中检查当前表是否存在于该数组中。。。比如：

// 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;
});

---

我没试过，但是像这样的怎么样

$.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;
        }
}
);

这个想法来源于以下线索：

---

---

您也可以试用我的，在这里，its，its有9种不同类型的过滤器+额外的API函数，可以帮助您加载预过滤的表或添加单个过滤器来过滤多个表和许多其他很酷的东西。

事实证明，过滤是全局性的，您必须过滤表元素。。。非常令人失望。

我们就是这样做的：

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

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

            $.fn.dataTableExt.afnFiltering = temporarilySetFilterFunctions;

---

基本上，将现有的过滤器存储在一个TEMP变量中，然后在完成后将其还原。Allan方面的怪异设计说明，以这样的方式实现它。丑陋的黑客，但它可以工作。

您可以这样做： 向配置中添加一个参数：

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...'
            }
            );
        }
    });

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

//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;
 });

---

以下链接将有助于将筛选器应用于数据表。

我是这样用的：

  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();

---

您使用的是ajax源代码，还是html/数组等的一部分？数据是从web sql本地加载到浏览器的。您可以添加用于初始化数据表的代码吗？确保已添加。谢谢你的提示。最后一件事，我保证：）你在代码中的任何地方调用这个函数（fnFiltering.push）吗？如果是这样，只需粘贴该块：DFiltering是全局的，但您可以使用ServerSideProcessing绕过它。如果使用C#、PHP或w/e语言，则可以通过ajax调用传递过滤器参数并返回已过滤的数据。我已经做了很多次了，它比常规的过滤要快得多（在大的行上）。你看过我的答案了吗？我给的链接？我使用了一个更简单的版本，因为我只想过滤一个表，但这将以更通用的方式工作。这对我不起作用，

oSettings.nTable

需要是

oSettings.nTable.getAttribute（'id'）

直接使用

oSettings

变量（

oSettings.nTable.getAttribute（'id'））是，因为它的内容对API是私有的，并且可能在没有警告的情况下在版本之间更改。使用
var api=new$.fn.dataTable.api（设置）
然后使用
var tableId=api.table（）.node（）.id访问表的id