如何将过滤器应用于特定的数据表(How to apply filter to specific da

2019-06-26 05:50发布

是否有可能在一定过滤器只适用于一个数据表? 我有我的文件准备好,应用以下滤波器功能,我不知道这是正确的程序,但它的副作用的所有数据表将被过滤器的影响。 我想只影响$(“#的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...'
            }
            );
        }
    });

Answer 1:

您可以创建表的阵列有过滤器 - 然后在过滤器检查,如果当前表存在该数组中......是这样的:

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


Answer 2:

你可以做这样的事情:一个参数添加到配置:

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


Answer 3:

原来,过滤是全球性的,事实上,你必须过滤表元素......这是相当令人失望。



Answer 4:

没有尝试过,但如何对这样的事情?

$.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个过滤器在同一页上


你也可以尝试一下我的 yadcf插件的数据表 ,它在这里展示的URL ,它有9种不同类型的过滤器+额外的API函数,可以帮助您加载表的预过滤或用于过滤多个表和其他许多很酷的东西添加单个过滤器..



Answer 5:

这是我们做什么:

            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变量,然后还原它,我们在完成后。 在艾伦的部分怪异设计descion实现它这样。 丑陋的黑客攻击,但它的作品。



Answer 6:

下面的链接将有助于在应用过滤器数据表。 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();


文章来源: How to apply filter to specific datatable