title: I am using div sorting, but when I use sorting, then the datatable function doesn't work
body: <p>I am using a div sorting function, but when I activate this function then bootstrap, the datatable is not working. Here is my HTML code:</p>
  
  <pre><code>&lt;div id="bingo_width" class="bingo_width" &gt;
  &lt;?php if(ifdbPermissions(1))://if (hasPermissions('status_pending',  false)): 
  foreach($permissions as $row){
  if($row-&gt;db_role == 1){
      $iddd = $row-&gt;order;
  break;
  }
  }
  ?&gt; 
  &lt;div id="ID_grid_101_&lt;?php echo $iddd?&gt;_user" class="bingo_button_4"&gt;
  &lt;idn&gt;&lt;?php echo $iddd?&gt;&lt;/idn&gt;
      &lt;div class="box"&gt;
          &lt;div class="box-header with-border"&gt;
              &lt;h3 class="box-title"&gt;Pending Production&lt;/h3&gt;
          &lt;/div&gt;
          &lt;?php if (!empty($productions)): ?&gt;
              &lt;div class="box-body"&gt;
                  &lt;table id="pending_status" class="details table table-bordered table-striped text-center"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;&lt;/th&gt;
                              &lt;th&gt;Id&lt;/th&gt;
                              &lt;th&gt;Priority&lt;/th&gt;
                              &lt;th style="width: 100px !important;"&gt;Date&lt;/th&gt;
                              &lt;th style="width: 100px !important;"&gt;Customer&lt;/th&gt;
                              &lt;th style="width: 100px !important;"&gt;Type of Desk&lt;/th&gt;
                              &lt;th style="width: 100px !important;"&gt;Salesman&lt;/th&gt;
                              &lt;th style="width: 100px !important;"&gt;Qty&lt;/th&gt;
                              &lt;th style="width: 100px !important;"&gt;Date Expected&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody id="sortable"&gt;
                          &lt;?php foreach ($productions as $row): ?&gt;
                              &lt;?php if ($row-&gt;status == 'Pending'): ?&gt;
                                  &lt;tr id="row_&lt;?php echo $row-&gt;id; ?&gt;"&gt;
                                      &lt;td class="details-control"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;id; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;sorting_order; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo date_format(date_create($row-&gt;create_date), "m-d-Y"); ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;customer_name; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;name; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;salesman; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;qty; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $originalDate = $row-&gt;expected_delivery_date; ?&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;?php endif; ?&gt;
                          &lt;?php endforeach; ?&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;!-- /.box-body  --&gt;
          &lt;?php endif; ?&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;?php endif; ?&gt;
  &lt;?php
  if(ifdbPermissions(2))://if (hasPermissions('status_in_production', false)): 
  foreach($permissions as $row2){
      if($row2-&gt;db_role == 2){
          $iddd2 = $row2-&gt;order;
      break;
  }
  }
  ?&gt;
  &lt;div id="ID_grid_101_&lt;?php echo $iddd2?&gt;_user" class="bingo_button_4"&gt;
  &lt;idn&gt;&lt;?php echo $iddd2?&gt;&lt;/idn&gt;
      &lt;div class="box"&gt;
          &lt;div class="box-header with-border"&gt;
              &lt;h3 class="box-title"&gt;In Production&lt;/h3&gt;
          &lt;/div&gt;
          &lt;?php if (!empty($productions)): ?&gt;
              &lt;div class="box-body"&gt;
                  &lt;table id="in_production_status" class="details table table-bordered table-striped text-center"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;&lt;/th&gt;
                              &lt;th&gt;Id&lt;/th&gt;
                              &lt;th&gt;Submitted Date&lt;/th&gt;
                              &lt;th&gt;Customer&lt;/th&gt;
                              &lt;th&gt;Type of Desk&lt;/th&gt;
                              &lt;th&gt;Qty&lt;/th&gt;
                              &lt;th&gt;Date Expected&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;?php foreach ($productions as $row): ?&gt;
                              &lt;?php if ($row-&gt;status == 'In Production'): ?&gt;
                                  &lt;tr&gt;
                                      &lt;td class="details-control"&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;id; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo date_format(date_create($row-&gt;create_date), "m-d-Y"); ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;customer_name ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;name; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;qty; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $originalDate = $row-&gt;expected_delivery_date; ?&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;?php endif; ?&gt;
                          &lt;?php endforeach; ?&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;!-- /.box-body --&gt;
          &lt;?php endif; ?&gt;
      &lt;/div&gt;
  
   &lt;/div&gt;
  &lt;br /&gt;
  &lt;?php endif; ?&gt;
  
  
  &lt;!----- products-------&gt;
  &lt;?php if(ifdbPermissions(14)):
              foreach($permissions as $row){
  if($row-&gt;db_role == 14){
      $iddd = $row-&gt;order;
  break;
  }
  }?&gt;
  &lt;div id="ID_grid_101_&lt;?php echo $iddd?&gt;_user" class="bingo_button_4"&gt;
  &lt;idn&gt;&lt;?php echo $iddd?&gt;&lt;/idn&gt;  
  
  &lt;div class="box"&gt;
      &lt;div class="box-header with-border"&gt;
          &lt;h3 class="box-title"&gt;Products Detail&lt;/h3&gt;
      &lt;/div&gt;
      &lt;?php //if (!empty($purchase_orders)): ?&gt;
          &lt;div class="box-body"&gt;
              &lt;div class="table-responsive"&gt;  
                  &lt;table id="product_detail" class="table table-bordered table-striped text-center"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;!--&lt;th&gt;Sr #&lt;/th&gt;--&gt;
                              &lt;th&gt;Part &lt;/th&gt;
                              &lt;th&gt;Title&lt;/th&gt;
                              &lt;th&gt;Qty on Hand&lt;/th&gt;
                              &lt;th&gt;QA&lt;/th&gt;
                              &lt;th&gt;Total Cost&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;?php if ($products): ?&gt;  
                              &lt;?php 
                              $total_cost = 0;
                              $count1 = 1; 
                              foreach ($products as $row): 
                              $total_cost += $row-&gt;total_cost;
                              ?&gt;
                                  &lt;tr&gt;
                                      &lt;!--&lt;td&gt;&lt;?php //echo $count1++;?&gt;&lt;/td&gt;--&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;part; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;product_name; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;qoh; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;qa; ?&gt;&lt;/td&gt;
                                      &lt;td&gt;&lt;?php echo $row-&gt;total_cost; ?&gt;&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;?php 
                               endforeach ?&gt;
                          &lt;?php endif; ?&gt;  
                      &lt;/tbody&gt;
                      &lt;tfoot&gt;
                          &lt;tr&gt;
                              &lt;!--&lt;th&gt;&lt;/th&gt;--&gt;
                              &lt;td&gt;Total&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;?php echo $total_cost?&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tfoot&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /.box-body --&gt;
      &lt;?php //endif; ?&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;?php endif?&gt;
   &lt;!-------products-----&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my script:</p>
  
  <pre><code>&lt;script&gt;
  $('#pending_status').DataTable({});
  $('#in_production_status').DataTable();
  $('#product_detail').DataTable();
  
  $(document).ready(function(){
  order_bingo_item('ascending');
  });
  function order_bingo_item(text_order)
  {
  //console.log('this is functtion');
  var order_type = text_order;
  var $divs = $("div.bingo_button_4");
  
  if (order_type=='ascending')
  {
   //console.log($divs);
   var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
      return $(a).find("idn").text() - $(b).find("idn").text();
  });
  $("#bingo_width").html(alphabeticallyOrderedDivs);
  }
  else
  if (order_type=='descending')
  {
  var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
      return $(b).find("idn").text() - $(a).find("idn").text();
  });
  $("#bingo_width").html(alphabeticallyOrderedDivs);
   }
  
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Can any body help me about this? When I remove the code for sorting then it works well. When I add this code for sorting, then sorting works well but data table pagination and other functions are not working. Please help me out.</p>