picnet表格過濾器不能使用動態表格

你好，我在同一頁面的兩個表格中使用Picnet表格過濾器。其中之一是在我的js文件上動態生成的，使用AJAX從MySQL數據庫中檢索數據。另一個有硬編碼數據。picnet表格過濾器不能使用動態表格

動態生成的是一個不起作用的。（我創建了硬編碼的只是爲了查看問題是否與此相關）在開始時，我還在我的js函數中生成了「thead」和「th」標籤，但是當我收到錯誤消息時說：「thead」未定義我將該代碼移動到HTML文件中......目前，我只通過追加功能將「tr」和「td」添加到「tbody」中...但過濾器不起作用。對於組合框過濾器來說，唯一的選擇是「選擇..」，但應根據列數據生成的其他選項不是。

你對這裏的問題有什麼想法嗎？在此先感謝...莫妮卡

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

來源

2011-10-28 user1018873

一種方式是通過直接訪問表的列ID 。雖然這種方法可能不是正確的方法，但它的工作原理。

該表的每一列都標識爲filter_0，filter_1等。因此，將要過濾的值直接傳遞給列。

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

這適用於動態生成或硬編碼表。但是，如果同一頁面中有多個表，則可以使用.closest方法來相應地識別和修改您的代碼。希望這有助於。

來源

2012-09-14 17:11:12 Naveen

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

這對我的作品！

來源

2013-06-14 20:36:47 Muthu

中的document.ready初始化PicNet表：

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

然後，在你的Ajax語句的成功回調，刷新過濾器：

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

同時，確保當你在加載之前正在清除表格，您不會刪除最初的picnet過濾器。

這應該工作。

來源

2014-11-21 15:32:01 dutchman711

這工作沒有問題 –

picnet表格過濾器不能使用動態表格

回答

相關問題