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

Question

是否可以仅将某个过滤器应用于一个datatable？ 我有以下的过滤函数，并在文档准备好时应用它，我不知道这是否是正确的程序，但所有的dataTables都会受到过滤器的影响。我希望只影响$('#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...'
            }
            );
        }
    });

- Astronaut

---

你是在使用ajax源，还是它是html/array的一部分等等？ - Drakkainen

数据从 Web SQL 本地加载到浏览器。 - Astronaut

当然已经添加了。欢迎提供任何建议。 - Astronaut

最后一件事，我保证 :) 你在代码中调用了那个函数(fnFiltering.push)吗？如果是的话，就把那一块粘贴过来 :D - Drakkainen

是的！给每个表取不同的名字。比如oTable1、oTable2等等。我以为你可能会调用通用函数，所以建议使用oTable。更改名称并尝试。 - Drakkainen

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

- Manse

---

我使用了一个更简单的版本，因为我只想过滤一个表，但这种方法可以以更通用的方式工作。 - Astronaut

这对我没有用，oSettings.nTable 需要改为 oSettings.nTable.getAttribute('id')。 - Max

直接使用oSettings变量(oSettings.nTable.getAttribute('id'))是不被推荐的，因为它的内容是API私有的，并且可能在版本更新时没有警告地更改。使用var api = new $.fn.dataTable.Api( settings );，然后通过var tableId = api.table().node().id;访问表格的ID。 - Marcos Dimitrio

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

- Jarry

Answer 3

原来过滤是全局的，你确实需要过滤表格元素... 这真是令人失望。

- Astronaut

---

过滤是全局的，但您可以使用ServerSideProcessing绕过它。如果您使用C＃，PHP或其他语言，可以通过ajax调用传递过滤器参数并返回已过滤的数据。我已经做过很多次了，在处理大行时比常规过滤要快得多。 - Drakkainen

你看了我的答案和我给的链接吗？ - Daniel

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个筛选器。

---

你也可以尝试使用datatable的yadcf插件，这里是展示网址，它有9种不同类型的过滤器+额外的API函数，可以帮助你预过滤表格或添加单个过滤器以过滤多个表格和许多其他很酷的功能。

- Daniel

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变量中，然后在完成后恢复它。 Allan实施这种方式的设计决策很奇怪。这是一个丑陋的hack，但它可以工作。

- syazdani

---

我认为这个被接受的答案提供的解决方案更加优雅。您可以在动态创建的表格中使用此代码部分。 - Dreamcatcher

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

- Rashmi Gk