私はhttp://www.datatables.net/で作業しています。列値の個別のリストを保持する列ごとに select 要素を作成しました。select.change() が呼び出されると、新しいテーブル データに基づいて (クリックされたものを除く) 選択を再作成するコードを書きました。これは、Chrome、Firefox、および IE 10 でうまく動作します。IE 9 で動作させる方法がわかりません。Hulk をスマッシュする準備ができています。
.innerHTML は機能しません。Jquery の .html() が機能しません。options.add() の代わりに .addChild() を試しました。何も機能しません。選択は空になるか、フィルタリングされないか、1 つがフィルタリングされた後、残りのどれも select.change() イベントを開始しません。
編集: テーブルが最初に作成されたときに選択の代わりに TH を取得するために、再作成時に parentElement.innerHTML() に戻ることも試みました th.innerHTML = select が使用されます。
$(document).ready(function () {
/* Initialise the DataTable */
var oTable = $('#table').dataTable({
"sDom": '<"top"i>',
"bPaginate": false,
"bSort": false
})
/* Add a select menu for each TH element in the table footer */
$("thead th").each(function (i) {
this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i), i);
$('select', this).change(function () {
oTable.fnFilter($(this).val(), i);
// Get array of select controls
var a = document.getElementsByTagName('select');
// Loop through select controls
for (var j = 0; j < 7; j++) {
// If filtered array is not empty
if (filtered.length > 0) {
// If column currently being looped is not in filtered array
if ($.inArray(j, filtered) < 0) {
// If column currently being looped is not the column clicked
if ((this).textContent != a[j + 1].textContent) {
a[j + 1].innerHTML = fnCreateSelect(oTable.fnGetColumnData(j), j); // Recreate drop down list for currently looping column
}
else {
filtered.push(j); // Add column to filtered array
}
}
else
// If title is selected and currently looping column is the column selected
if ($(this).val() == "" && j == i) {
var index = $.inArray(j, filtered); // Get index of column in filtered array
filtered.splice(index, 1); // Remove column from filtered array
a[i + 1].innerHTML = fnCreateSelect(oTable.fnGetColumnData(i), i); // Recreate drop down list for column selected (Because resetting drop down)
}
}
else {
// If column currently being looped is not the column clicked
if ((this).textContent != a[j + 1].textContent) {
// THE JQUERY WAY
//var col;
//switch (a[j + 1].id) {
// case "Dest": col = "#Dest"; break;
// case "Leg": col = "#Leg"; break;
// case "Start": col = "#Start"; break;
// case "End": col = "#End"; break;
// case "Day": col = "#Day"; break;
// case "Sort": col = "#Sort"; break;
// case "Services Days": col = "#Service Days"; break;
//}
//$(col).html(fnReCreateSelect(oTable.fnGetColumnData(j), j));
// THE JAVASCRIPT WAY
a[j + 1].innerHTML = fnCreateSelect(oTable.fnGetColumnData(j), j); // Recreate drop down list for currently looping column
}
else {
filtered.push(j); // Add column to filtered array
}
}
}
//$("select").hide().show(); // Might help with IE problems
});
});
fnGetColumnData 関数 (列値の個別の配列を取得)
(function ($) {
$.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {
// check that we have a column id
if (typeof iColumn == "undefined") return new Array();
// by default we only want unique data
if (typeof bUnique == "undefined") bUnique = true;
// by default we do want to only look at filtered data
if (typeof bFiltered == "undefined") bFiltered = true;
// by default we do not want to include empty values
if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;
// list of rows which we're going to loop through
var aiRows;
// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers
// set up data array
var asResultData = new Array();
for (var i = 0, c = aiRows.length; i < c; i++) {
iRow = aiRows[i];
var aData = this.fnGetData(iRow);
var sValue = aData[iColumn];
//if (sValue == " ") {
// sValue = "_";
//}
// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;
// ignore unique values?
else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
// else push the value onto the result data array
else asResultData.push(sValue);
}
return asResultData.sort();
}
}(jQuery));
新しいブラウザーで問題なく動作する createSelect() と、試しに使用してきた reCreateSelect() です。
function fnCreateSelect(aData, j) {
switch (j) {
case 0: j = "Dest"; break;
case 1: j = "Leg"; break;
case 2: j = "Start"; break;
case 3: j = "End"; break;
case 4: j = "Day"; break;
case 5: j = "Sort"; break;
case 6: j = "Service Days"; break;
}
var r = '<select id="'+j+'"><option value="">' + j + '</option>', i, iLen = aData.length;
for (i = 0 ; i < iLen ; i++) {
r += '<option value="' + aData[i] + '">' + aData[i] + '</option>';
}
return r + '</select>';
}
function fnReCreateSelect(aData, j) {
switch (j) {
case 0: j = "Dest"; break;
case 1: j = "Leg"; break;
case 2: j = "Start"; break;
case 3: j = "End"; break;
case 4: j = "Day"; break;
case 5: j = "Sort"; break;
case 6: j = "Service Days"; break;
}
var s = document.getElementById(j);
var op0 = document.createElement("option");
op0.text = "";
op0.value = j;
s.options.add(op0);
var iLen = aData.length;
for (i = 0 ; i < iLen ; i++) {
var op = document.createElement("option");
op.text = aData[i]
op.value = aData[i];
s.options.add(op);
}
return s;
}