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...'
}
);
}
});
フィルタを使用するテーブルの配列を作成できます。次に、フィルタで、現在のテーブルがその配列に存在するかどうかを確認します...次のようになります。
// 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つのフィルター
myデータテーブル用のyadcfプラグイン 、ここでは showcase url を試すこともできます。 9種類のフィルターと追加のAPI関数を使用すると、事前にフィルター処理されたテーブルを読み込んだり、複数のテーブルや他の多くのクールなものをフィルター処理するための単一のフィルターを追加したりできます。
フィルタリングはグローバルであり、実際にテーブル要素をフィルタリングする必要があることがわかりました...それは非常に残念です。
次のリンクは、データテーブルにフィルターを適用するのに役立ちます。 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();
これが私たちの仕事です。
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変数に格納し、完了したら元に戻します。このように実装するためのアラン側の奇妙な設計の説明。醜いハックですが、うまくいきます。