Searching from dynamically created table with JSON data

Question

I have created a dynamic html table populated with json data as per the value of the variable on "go" button click. The search is working fine for the first time populated data but after changing the variable at run time when i re-populate the table on "go" button click with different values and as soon as i try to search a particular value from the table it try searching from the previous populated data ie, the data which was populated for the first time not from the current populated data and it modifies the table also with that data. No matter how many times you modify the data of the table on the basic of the value of the variable on "go" button click, although the table gets modified but as soon as you apply to search a value from the table it will search from the 1st populated value of the table and modify the table with that value.

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

    $.each(responseObj, function (i, item) {
 if( item.useCase == multicompanyUseCaseData || item.orderCondition == orderConditionData || item.orderType == orderTypeData )
 {
        $('<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');
 }
});
          // this line performs the searching operation from the table
        $('#datatable').dataTable();  
  });
 });

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>
     <tr>
      <th>Order Id</th>
      <th>Shipment Id</th>
      <th>Purchase Id</th>
      <th>Use Case</th>
      <th>Order Condition</th>
      <th>Order Type</th>
     </tr>
      </thead>
                      <tbody>
                      </tbody>
                    </table>
                  </div>

.

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

DataTables caches/indexes/stores the data in the table at the time you call .dataTable(). This means that if you alter the table using your own code, the DataTables plugin will still search off the previous data that it has stored. You need to use the DataTables API to clear/update the data in the table so that the plugin also clears and updates the data it has stored and that it uses to perform the search.

There is another example that is already answered here:

How to manually update datatables table with new JSON data

edited May 23 '17 at 11:45

Community

1
1

answered Jun 21 '16 at 21:05

Jim

3,210
2
17
23

Hi @Jim perhaps i need little more help, its not working. – 65th bit Jun 23 '16 at 19:21
The table is getting modified, but as soon as i apply the search it searches from the 1st populated data of the table and modifies the table with it. – 65th bit Jun 23 '16 at 19:28
The code you added is incomplete to begin with. You would need to replace any code you have replacing the data in the table with the example in the link I posted. – Jim Jun 27 '16 at 13:12

Searching from dynamically created table with JSON data

1 Answers1