title: jQuery DataTable data disappears after sorting
body: <p>I am unsure as to why the data in my datatable disappears after sorting.  </p>
  
  <p>Starting with the jQuery which is fired once the user clicks the submit button:</p>
  
  <pre><code> $('#searchSubmit').on('click', function()
   {
     var searchbooking = $('#searchbooking').val();
     var searchbol = $('#searchbol').val();
  
     $.post('api/search.php', {searchbooking: searchbooking, searchbol: searchbol}, function(data)
     {
       var obj = JSON.parse(data);
       $('#tableBody').empty(); 
       var htmlToInsert = obj.map(function (item)
       {
         return '&lt;tr&gt;&lt;td&gt;'+item.BOL_DATE+'&lt;/td&gt;&lt;td&gt;'+ item.BOOKING_NUM +'&lt;/td&gt;&lt;/tr&gt;';
       });
       $('#tableBody').html(htmlToInsert.join(''));
     });
   });
  </code></pre>
  
  <p>Here is the PHP script, with which (I might add) I am using SQLSRV coding for the first time:</p>
  
  <pre><code> &lt;?php
   if($_POST['searchbooking'] == true || $_POST['searchbol'] == true)
   {
     $_SESSION['where'] = "";
     $searchbooking = stripslashes(str_replace( "'", "''", $_POST['searchbooking']));
     $searchbol = stripslashes(str_replace( "'", "''", $_POST['searchbol']));
  
     if($searchbooking != "")
     {
       if( $_SESSION['where'] != "" ) $_SESSION['where'] .= " AND ";
       $_SESSION['where'] = "[BOOKING_NUM] = '".$searchbooking."'";
     }
     if($searchbol != "")
     {
       if( $_SESSION['where'] != "" ) $_SESSION['where'] .= " AND ";
       $_SESSION['where'] .= "[BOL_NUM] = '".$searchbol."'";
     }
  
     $where = "WHERE " . $_SESSION['where'];
  
     $select = "SELECT [BOL_DATE], [BOOKING_NUM] FROM [brokerage].[dbo].[detailbackup] ".$where."";
  
     $query = sqlsrv_query($dbc, $select);
  
     $out = array();
     while( $row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC) ) 
     {
       $out[] = $row;
     }
     echo json_encode($out);  
   ?&gt;
  </code></pre>
  
  <p>Back in my HTML page, the table is set up like this:</p>
  
  <pre><code> &lt;table class='table table-striped table-bordered table-hover display nowrap' id='example1' cellspacing="0" width="100%"&gt;
   &lt;thead&gt;
     &lt;tr&gt;
       &lt;th&gt;Bol Date&lt;/th&gt;
       &lt;th&gt;Booking Number&lt;/th&gt;
     &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody id="tableBody"&gt;
   &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>Near the bottom of the HTML page, above the closing body tag, I have the JavaScript that formats the DataTable:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
     $('#example1').DataTable({
       "iDisplayLength": 25,
       "scrollX": true,
       "scrollY": 550,
       "order": [[ 0, "desc" ]],
       "bLengthChange": true,  
       "bSort": true,   
       "bAutoWidth": true   
   &lt;/script&gt;
  </code></pre>
  
  <p>With everything I have added above, I can return the data to the page.  But once I sort (or even change the length of the table from 25 to 50), the data disappears.</p>
  
  <p>Does anyone see my error?  </p>