動的に作成されたテーブルからJSONデータを検索する

Question

「go」ボタンをクリックしたときの変数の値に従ってjsonデータが設定された動的htmlテーブルを作成しました。検索は、初めてデータが入力されたときに正常に動作しますが、実行時に変数を変更した後、テーブルに「go」ボタンをクリックして別の値をクリックすると、テーブルから特定の値を検索しようとすると、前回作成したデータから検索を試みてください。つまり、最初にデータが入力されたデータではなく、そのデータでもテーブルが変更されます。テーブルのデータを変更しても、テーブルの値は変更されますが、テーブルから値を検索するとすぐに検索されますテーブルの最初の値が入力され、その値でテーブルが変更されます。

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

。

Answer 1

DataTables .dataTable()を呼び出した時点でテーブルにデータをキャッシュ/インデックス/ストアします。つまり、独自のコードを使用してテーブルを変更すると、DataTablesプラグインは以前に保存したデータを検索します。 DataTables APIを使用して、テーブル内のデータをクリア/更新する必要があります。これにより、プラグインは、保存したデータをクリアして更新し、検索を実行します。

How to manually update datatables table with new JSON data