Javascript picnet表筛选器不使用动态表

您好，我在同一页面的两个表中使用Picnet表过滤器。 其中一个是在使用AJAX从MySQL数据库检索数据的js文件上动态生成的。 另一个有硬编码数据

动态生成的是不起作用的。（我创建了一个硬编码的，只是为了看看问题是否与此相关） 起初，我还在js函数中生成“thead”和“th”标记，但当我收到一个错误，说“thead”未定义时，我将代码移到了HTML文件中……目前，我只通过append函数将“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>

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

Reserva#RecursoIniciFinth>负责的用户
快速查找：
COL1 COL2COL3
值1值2值3
值4值6值8
值5值7值9

Javascript代码：

<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>

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

$（文档）.ready（inicializar）；
函数inicializar（）{
traerReservas（）；
var options={additionalFilterTriggers:[$（'quickfind'）]，clearFiltersControls:[$（'cleanfilters'）]}；
$（“#tablaReservas”）.tableFilter（选项）；
$（“#可降级”）.tableFilter（选项）；
}
函数traerReservas（）{
$.ajax（{async:true，
url:“../Persistencia/procesaConsultaReservas.php”，
类型：“POST”，
数据类型：“json”，
成功：莫斯特拉布拉，
错误：mensajeTablaReservas，
});
}
功能mostrarTabla（数据）{
var d=评估（“（“+数据+”）”）；
如果（数据！=0）{
对于（i=0；i

使用过滤器的一种方法是直接访问表列id。尽管这种方法可能不是正确的方法，但它是有效的

表中的每一列都被标识为filter\u 0、filter\u 1等。因此，将要筛选的值直接传递给列

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

这适用于动态生成或硬编码的表。但是，如果在同一页中有多个表，则可以使用.closest方法相应地标识和修改代码。 希望这有帮助。

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

---

这对我有用

初始化文档中的PicNet表。就绪：

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

然后，在ajax语句的成功回调中，刷新过滤器：

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

此外，请确保在加载表之前清除表时，没有删除初始picnet筛选器

这应该行得通