web-dev-qa-db-ja.com

特定のデータテーブルにフィルターを適用する方法

1つのデータテーブルにのみ特定のフィルターを適用することは可能ですか？ドキュメントの準備ができて適用している次のフィルター関数があります。これが適切な手順かどうかはわかりませんが、副作用として、すべての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...'
            }
            );
        }
    });
javascriptjqueryjquery-pluginsdatatables
19
Astronaut

フィルタを使用するテーブルの配列を作成できます。次に、フィルタで、現在のテーブルがその配列に存在するかどうかを確認します...次のようになります。

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

次のようなことができます。構成にパラメーターを追加します。

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

試したことはありませんが、こんな感じはいかがですか？

$.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つのフィルター

myデータテーブル用のyadcfプラグイン 、ここでは showcase url を試すこともできます。 9種類のフィルターと追加のAPI関数を使用すると、事前にフィルター処理されたテーブルを読み込んだり、複数のテーブルや他の多くのクールなものをフィルター処理するための単一のフィルターを追加したりできます。

3
Daniel

フィルタリングはグローバルであり、実際にテーブル要素をフィルタリングする必要があることがわかりました...それは非常に残念です。

3
Astronaut

次のリンクは、データテーブルにフィルターを適用するのに役立ちます。 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();
0
Rashmi Gk

これが私たちの仕事です。

            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変数に格納し、完了したら元に戻します。このように実装するためのアラン側の奇妙な設計の説明。醜いハックですが、うまくいきます。

0
syazdani