Как применить фильтр к конкретному datatable - программирование
Подтвердить что ты не робот

Как применить фильтр к конкретному datatable

Можно ли применить определенный фильтр только к одному datatable? У меня есть следующая функция фильтра, которую я подаю на готовый документ, я не знаю, является ли это правильной процедурой, но в качестве побочного эффекта фильтр данных будет влиять на все данные. Я хотел бы повлиять только на $('# 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;
 });

Можно ли применить фильтр только к определенной таблице? Как это сделать?

EDIT:

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

Ответ 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;
});

Ответ 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;
 });

Ответ 3

Не пробовал, но как насчет чего-то подобного?

$.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 datatables и 2 фильтра на одной странице


Вы также можете попробовать my плагин yadcf для datatable, здесь его URL-адрес витрины, у него есть 9 различных типов фильтров + дополнительные функции API, которые могут помочь вам загрузить таблицу с предварительным фильтром или добавить один фильтр для фильтрации нескольких таблиц и многих других интересных вещей.

Ответ 4

Получается, что фильтрация глобальна, и вам нужно отфильтровать элемент таблицы... это довольно разочаровывает.

Ответ 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 и затем возвращайте их после завершения. Странное проектирование на стороне Аллана, чтобы реализовать его так. Уродливый взлом, но он работает.

Ответ 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();