javascript - Datatables search box not taking inputs after updating -

code initialize datatable,

jquery('#table1').datatable({   "scrolly": "200px",   "scrollcollapse": true,   "paging": false,   "aasorting": [],   "osearch": {     "bsmart": false   } }); 

filter working when table initialized @ first. when table data updated using ajax call, search box freezes(it's not taking input). datatable update code,

var table1 = jquery('#table1'); result = []; if (data.length) {   jquery.each(data, function(key, value) {     json = ['<span id="hexa" class="' + value.carrier_code + '">' + value.company_web_name + '</span>', value.city, value.state];     result.push(json);   }) } //console.log(result); table1.datatable().fncleartable(); table1.datatable().fnadddata(result); table1.datatable().fndraw(); 

here 'data' returned ajax call. sorting works fine, search input box not taking input after table being updated(works fine when loaded first time).

always create reference datatable while initializing, below.

var table1 = $('#example').datatable({...}); 

from on, can use variable table1 future references, such clearing/adding/drawing table. take @ demo below.

var table1 = $('#example').datatable({      "scrollcollapse": true,      "paging": false,      "aasorting": [],      "osearch": {          "bsmart": false      }  });    var result = [];  ( var i=0; i< 10; i++ ) {      var json = [          '<span id="hexa" class="cc' + (i+1) + '">my company ' + (i+1) + '</span>',          "city" + (i+1),          "state" + (i+1)      ]      result.push(json);  }    table1.fncleartable(); // no datatable() here  table1.fnadddata(result); // no datatable() here  table1.fndraw(); // no datatable() here

<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.datatables.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.datatables.min.js"></script>  <table id="example" class="display" cellspacing="0" width="100%">      <thead>          <tr>              <th>name</th>              <th>position</th>              <th>office</th>          </tr>      </thead>            <tfoot>          <tr>              <th>name</th>              <th>position</th>              <th>office</th>          </tr>      </tfoot>            <tbody>          <tr>              <td>tiger nixon</td>              <td>system architect</td>              <td>edinburgh</td>          </tr>          <tr>              <td>garrett winters</td>              <td>accountant</td>              <td>tokyo</td>          </tr>      </tbody>  </table>