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

How to apply filter to specific datatable

本文关键字：数据表 应用于 筛选      更新时间：2023-09-26

是否可以只对一个数据表应用特定的筛选器？我有以下过滤器功能，我正在文档准备中应用，我不知道这是否是正确的过程，但作为副作用，所有数据表都将受到过滤器的影响。我只想影响$（"#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;
 });

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

编辑：

dataTable初始化：

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

您可以执行以下操作：在配置中添加一个参数：

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

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

还没试过，但这样的东西怎么样？

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

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

您也可以尝试myyadcf数据表插件，这里是它的展示url，它有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变量中，然后在完成后将其还原。艾伦这样实现它的设计描述很奇怪。丑陋的黑客，但它工作。

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

我是这样用的：

  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();
相关文章：