picnetテーブルフィルタが動的テーブルで動作しない

Question

こんにちは私は同じページの2つのテーブルでPicnetテーブルフィルタを使用しています。 これらのうちの1つは、AJAXを使用してMySQLデータベースからデータを取得するjsファイルで動的に生成されます。 もう一方にはハードコードされたデータがあります。

動的に生成されるのは機能しないものです。 （問題がそれに関連しているかどうかを確認するためにハードコードされたものを作成しました） 私はjs関数で "thead"タグと "th"タグを生成していましたが、 "thead"は定義されていません。私はそのコードをHTMLファイルに移動しました...現在、 "tr"と "td"を "tbody"にappend関数で追加していますが、フィルタは機能しません。コンボボックスフィルタの場合、唯一のオプションは "Select .."です。カラムデータに基づいて生成されるべき他のオプションはありません。

あなたはここで何が問題になるか考えていますか？事前に おかげで...モニカ

HTMLコード：

<table id="tablaReservas" border="1"> 
<thead> 
<tr><th>Reserva#</th><th filter-type="ddl">Recurso</th><th>Inicio</th><th>Fin</th>th>Responsable</th><th>Usuario</th></tr> 
</thead> 
<tbody> 
</tbody> 
</table> 

Quick Find: <input type="text" id="quickfind"/><a id="cleanfilters" href="#">Clear Filters</a> 

<table id='demotable'> 
<thead> 
<tr><th filter-type="ddl">Col1</th><th>Col2</th><th>Col3</th></tr> 
</thead> 
<tbody> 
<tr><td>Value 1</td><td>Value 2</td><td>Value 3</td></tr> 
<tr><td>Value 4</td><td>Value 6</td><td>Value 8</td></tr> 
<tr><td>Value 5</td><td>Value 7</td><td>Value 9</td></tr> 
</tbody> 
</table> 

Javascriptコード：フィルタを使用する

$(document).ready(inicializar); 

function inicializar(){  
traerReservas();  

var options = { additionalFilterTriggers: [$('#quickfind')], clearFiltersControls: [$('#cleanfilters')]}; 


$("#tablaReservas").tableFilter(options); 
$("#demotable").tableFilter(options);   
} 

function traerReservas(){ 
$.ajax({async:true, 
url:"../Persistencia/procesaConsultaReservas.php", 
type:"POST", 
datatype:"json", 
success:mostrarTabla, 
error:mensajeTablaReservas, 
}); 
} 

function mostrarTabla(data){ 
var d= eval('(' + data + ')'); 

if (data!=0) { 
for (i=0; i < d.length; i++) {  
var tr= $("<tr id='" + d[i].id + "' onclick=mostrarRecursos(" + d[i].id + ");>" + 
"<td>" + d[i].id + "</td>" + 
"<td>" + d[i].nombre + "</td>" + 
"<td>" + d[i].inicio + "</td>" + 
"<td>" + d[i].fin + "</td>" + 
"<td>" + d[i].responsable + "</td>" + 
"<td>" + d[i].usuario + "</td>" + 
"</tr>"); 

$("#tablaReservas tbody").append(tr); 
} 
}  
} 

Answer 1

一つの方法は、直接テーブルの列IDにアクセスすることです。このアプローチは正しい方法ではないかもしれませんが、それは機能します。

表の各列は、filter_0、filter_1などと識別されます。そのため、フィルタリングする値を直接列に渡します。

$('#filter_0').val('pass your value here'); 

これは、動的に生成されたテーブルまたはハードコードされたテーブルで機能します。ただし、同じページに複数のテーブルがある場合は、.closestメソッドを使用してコードを識別して修正することができます。 これが役立つことを願っています。

Answer 2

1）サーバーに接続し、データを動的にフェッチするJSPページを作成します。

2）これは私の作品テーブル本体にJSPのデータをロードし、検索プラグイン

$('#demotable tbody').load('fetchedData.jsp',function(){ 
    var options = { additionalFilterTriggers: [$('#quickfind')], clearFiltersControls: [$('#cleanfilters')]}; 

    $("#demotable").tableFilter(options); 
    //Define other functions for event trigger 
});  

を初期化!!!

Answer 3

はdocument.readyにPicNetテーブルを初期化します。

$(document).ready(function() { 
    $('#m-stats-table').tableFilter(); 
}); 

次に、あなたのAJAX文の成功コールバックで、フィルタを更新：

$('#m-stats-table').tableFilterRefresh(); 

また、確認したときにすることそれをロードする前にテーブルをクリアしている場合、最初のピクニックフィルタは削除されません。

これでうまくいくはずです。