picnet 테이블 필터가 동적 테이블에서 작동하지 않습니다.

Question

안녕하세요 저는 Picnet 테이블 필터를 동일한 페이지의 두 테이블에서 사용하고 있습니다. 그들 중 하나는 AJAX를 사용하여 MySQL 데이터베이스에서 데이터를 검색하는 js 파일에서 동적으로 생성됩니다. 다른 하나에는 하드 코딩 된 데이터가 있습니다.

동적으로 생성 된 것은 작동하지 않는 것입니다. (하드 코딩 된 코드를 작성하여 문제가 관련되어 있는지 확인했습니다.) 처음에는 jad 함수에서 "thead"및 "th"태그를 생성하고 있었지만 오류가 발생하면서 "thead"는 정의되지 않았습니다.이 코드를 HTML 파일로 옮겼습니다 ... 현재 "tr"과 "td"를 "tbody"에 append 함수로 추가하는 중입니다 ... 그러나 필터가 작동하지 않습니다. 콤보 상자 필터 인 경우 유일한 옵션은 "선택"입니다. 열 데이터를 기반으로 생성해야하는 다른 옵션은 그렇지 않습니다.

여기에서 문제가 될 수있는 아이디어가 있습니까? 사전에 감사합니다 ... 모니카

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

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

를 초기화! 필터를 새로 고침, 당신의 아약스 문의 성공 콜백에서, 그리고

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

을 :

Answer 3

document.ready에 PicNet 테이블을 초기화,

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

을 또한 확인 할 때 당신을 그 그것을로드하기 전에 테이블을 비우는 경우 초기 picnet 필터를 제거하지 않습니다.

그래야합니다.