私は DataTable を使用しており、テーブルのセルに配置された選択要素で機能するフィルタリング機能を取得しようとしています。
フィルタリングは、各列の下にある入力フィールドにテキストを入力することで機能します。次に、フィルター関数は、その列のすべてのセルで選択されたテキストをチェックし、1 つのセルで一致が見つからない場合、関連する行は非表示になります。
テーブルがロードされると、テーブルを一度フィルタリングするように機能します。問題は、フィルターをクリアすると機能しないことです。その理由は、現在表示されていない行に配置された選択 DOM オブジェクトに selectedIndex を使用していることに関連しているようです。
「qu_owner_xxx」は選択要素の ID です。
var el1 = document.getElementById("qu_owner_4"); //Visible, works like a charm
console.log("ID 1 " + el1.id); //ID is printed
console.log("EL 1 " + el1.selectedIndex);
var el2 = document.getElementById("qu_owner_17"); //Hidden, returns null
console.log("ID 2 " + el2.id); //Not reaching here
console.log("EL 2 " + el2.selectedIndex) ; //Not reaching here
str = el.options[el.selectedIndex].text; //Just for showing how to get the string used for filtering later
問題は、セルのデータがオブジェクトとしてではなく、純粋な html としてフィルター関数に渡されることです。$(aData[i2]).attr('id')を実行してその部分から ID を取得できます。ここで、aData はテーブルの行です。しかし、jQuery を使用すると、特に html からオブジェクトを「再作成」する必要がある場合に、実際の DOM オブジェクト (selectedIndex など) を使用する場合と比較して到達できない情報があるようです。
非表示の選択ボックス/行の選択された値からテキストを取得するにはどうすればよいですか? それは可能ですか？
アップデート
jsfiddleで自分の理論をテストしましたが、実際には非表示の行/選択から情報を取得して機能します。しかし、それについては疑問の余地はありません。私のフィルター関数では、表示されていない行が失敗しています。
私のフィルター関数 (DataTable は、フィルター処理の時間になるとこの関数を呼び出します)
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var ret = true;
//Loop through all input fields i tfoot that has class 'sl_filter' attached
$('tfoot .sl_filter').each(function(i, obj){
//$(this) can be used. Get the index of this colum.
var i2 = $("tfoot input").index($(this));
//Create regexp to math
var r = new RegExp($(this).val(), "i");
var str = "";
if(i2 == 5){//This is just during development, don't want to care about other columns with select element so just doing things on this column
//Here I just pick two id, one that I know is visible and one that is not
var el1 = document.getElementById("qu_owner_4"); //Visible, works like a charm
console.log("ID 1 " + el1.id); //ID is printed
console.log("EL 1 " + el1.selectedIndex); //selectedIndex is printed
var el2 = document.getElementById("qu_owner_17"); //Hidden, returns null
console.log("ID 2 " + el2.id); //Not reaching here
console.log("EL 2 " + el2.selectedIndex) ; //Not reaching here
//This is how I intended to get it working, but fail
var el = document.getElementById($(aData[i2]).attr('id'));
str = el.options[el.selectedIndex].text; //String to be used for comparing
}
/*Test to see if there is a match or if the input value is the default
(the initial value of input before it has any fokus/text) */
if(r.test(str) || $(this).val()=="Search"){
//Return true only exits this function
return true;
}else{
/*Return false returns both function an .each. Retain 'false' in a variable scoped
to be reached outside the .each */
ret = false;
return false;
}
});
//Return true or false
return ret;
}
);
aData = 行。aData[x] は、その行のセル x のセル コンテンツを示します。select 要素の場合は、生の html です。
this = 検索文字列 i が入力された入力フィールド。