동적으로 생성 된 테이블에서 JSON 데이터로 검색

"go"버튼을 클릭 할 때 변수 값에 따라 json 데이터로 채워진 동적 HTML 테이블을 만들었습니다. 검색은 처음으로 채워진 데이터에 대해서는 정상적으로 작동하지만 런타임에 변수를 변경 한 후에 테이블에 "이동"버튼을 클릭 할 때 테이블을 다시 채우고 다른 값으로 클릭하면 테이블에서 특정 값을 검색하려고하면 이전에 채워진 데이터 즉, 현재 채워진 데이터가 아닌 처음으로 채워진 데이터를 검색하고 해당 데이터로 테이블을 수정하십시오. 테이블의 데이터를 수정 한 횟수에 관계없이 "go"버튼을 클릭 할 때 변수 값의 기본 값을 변경하더라도 테이블이 수정 되더라도 테이블에서 값을 검색하는 즉시 적용됩니다 테이블의 첫 번째 채워진 값 및 해당 값으로 테이블을 수정하십시오. 동적으로 생성 된 테이블에서 JSON 데이터로 검색

\t $(document).ready(function() { 
 
\t \t $("#report").hide(); 
 
\t \t $("#orderGraph").hide(); 
 
\t \t $("#profitGraph").hide(); 
 
\t \t $("#go").click(function() { 
 
\t \t \t \t $("#orderGraph").show(); 
 
\t \t \t \t $("#profitGraph").show(); 
 
\t \t \t \t loadGraphOrderFilter(); 
 
\t \t \t \t loadGraphProfitFilter(); 
 
\t \t \t \t $("#report").show(); 
 
\t \t \t \t $("#datatable > tbody > tr").remove(); 
 
\t \t \t var e; 
 
\t \t \t multicompanyUseCaseData=""; 
 
\t \t \t orderConditionData=""; 
 
\t \t \t orderTypeData=""; 
 
\t \t \t if(document.getElementById("mcuc_selection")) 
 
\t \t \t { 
 
\t \t \t \t e=document.getElementById("mcuc_selection"); 
 
\t \t \t \t multicompanyUseCaseData = e.options[e.selectedIndex].text; 
 
\t \t \t } 
 
\t \t \t if(document.getElementById("oc_selection")) 
 
\t \t \t { \t \t \t 
 
\t \t \t \t e = document.getElementById("oc_selection"); 
 
\t \t \t \t orderConditionData = e.options[e.selectedIndex].text; 
 
\t \t \t } 
 
\t \t \t if(document.getElementById("ot_selection")) 
 
\t \t \t { 
 
\t \t \t \t e = document.getElementById("ot_selection"); 
 
\t \t \t \t orderTypeData = e.options[e.selectedIndex].text; 
 
\t \t \t } \t 
 
\t \t \t var responseObj = $.parseJSON(response1); 
 

 
    $.each(responseObj, function (i, item) { 
 
\t if(item.useCase == multicompanyUseCaseData || item.orderCondition == orderConditionData || item.orderType == orderTypeData) 
 
\t { 
 
     $('<tr>').append(
 
     $('<td>').text(item.orderId), 
 
     $('<td>').text(item.purchaseId), 
 
     $('<td>').text(item.shipmentId), 
 
     $('<td>').text(item.useCase), 
 
     $('<td>').text(item.orderCondition), 
 
     $('<td>').text(item.orderType)).appendTo('#datatable'); 
 
\t } 
 
}); 
 
      // this line performs the searching operation from the table 
 
     $('#datatable').dataTable(); \t \t 
 
    }); 
 
\t });

var response1 = '[{"orderId":"19", "purchaseId":"Alon", "shipmentId":"5", "useCase":"AGS", "orderCondition":"2", "orderType":"Customer" }'; 
 
response1 += ',{"orderId":"19", "purchaseId":"Alon", "shipmentId":"5", "useCase":"AGL", "orderCondition":"2", "orderType":"Customer" }'; 
 
response1 += ',{"orderId":"19", "purchaseId":"Alon", "shipmentId":"5", "useCase":"NAFN", "orderCondition":"2", "orderType":"Customer" }]'; 
 

 
        <div class="x_content"> 
 
        <table id="datatable" class="table table-striped table-bordered"> 
 
         <thead> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th>Order Id</th> 
 
\t \t \t \t \t \t <th>Shipment Id</th> 
 
\t \t \t \t \t \t <th>Purchase Id</th> 
 
\t \t \t \t \t \t <th>Use Case</th> 
 
\t \t \t \t \t \t <th>Order Condition</th> 
 
\t \t \t \t \t \t <th>Order Type</th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t \t </thead> 
 
         <tbody> 
 
         </tbody> 
 
        </table> 
 
        </div>

출처

2016-06-21 Sidhant Kushwaha

DataTables는 .dataTable()으로 전화 할 때 테이블의 데이터를 캐시/색인화/저장합니다. 즉, 자체 코드를 사용하여 테이블을 변경하면 DataTables 플러그인은 저장된 이전 데이터를 검색합니다. DataTables API를 사용하여 테이블의 데이터를 지우거나 업데이트하여 플러그인에서 저장된 데이터를 업데이트하고 검색을 수행하는 데 사용하도록해야합니다.

How to manually update datatables table with new JSON data

출처

2016-06-21 21:05:24 Jim

안녕 @Jim 아마도 나는 그것의 작동하지 않는, 좀 더 도움이 필요합니다 :

이미 답이 여기에 또 다른 예입니다. –

테이블이 수정되고 있지만 검색을 적용하자마자 테이블의 첫 번째 채워진 데이터를 검색하고 테이블을 수정합니다. –

추가 한 코드가 불완전합니다. 표의 데이터를 바꾼 코드를 내가 게시 한 링크의 예로 대체해야합니다. – Jim

동적으로 생성 된 테이블에서 JSON 데이터로 검색

답변

관련 문제