title: Paginating table after ajax request - JS
body: <p>In my code below, when i paginate my data and filter using my search box.</p>
  
  <p>What happens is, after my ajax request is successful, the table in default states returns all data without the pagination. </p>
  
  <p>When i refresh the page, the table is then paginated again and after ajax request, the pagination is no more</p>
  
  <p>Why is this happening?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;table class="table" id="table" &gt;
      &lt;thead&gt;
          &lt;tr&gt; 
              &lt;th&gt;&lt;/th&gt;
              &lt;th colspan="5"&gt;&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          @foreach($products as $product) 
              &lt;tr&gt;
                  &lt;td width="600"&gt;{{$product-&gt;name }}&lt;/td&gt;    
              &lt;/tr&gt;
          @endforeach    
      &lt;/tbody&gt;
  &lt;/table&gt;
  {{$products-&gt;links()}}
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          var typingTimer;                //timer identifier
          var doneTypingInterval = 100;  //time in ms (5 seconds)
  
          $("#myInput").on('keyup', function () {
              clearTimeout(typingTimer);
              // if ($('#myInput').val() | ) {
                  typingTimer = setTimeout(doneTyping, doneTypingInterval);
              // }
          });
      });
  
      //user is "finished typing," do something
      function doneTyping() {
          var key = $('#myInput').val();
  
          $.ajax({
              url: '/admin/dashboard/order/food/search?myInput='+key,
              type: 'GET',
              beforeSend: function () {
                  // $("#table").slideUp('fast');
              },
              success: function (data) {
                  console.log(data);
                  $("#table").slideDown('fast');
  
                  var table = $("#table tbody");
  
                  table.html("");
                  $.each(data, function(idx, elem){
                      table.append(
                          "&lt;tr&gt;&lt;td&gt;&lt;input type='checkbox' onclick='return order(this)' data-food='"+JSON.stringify(elem)+"' id='"+elem.id+"' name='"+elem.name+"' value='"+elem.price+"'  data-id="+elem.id+" class='sub_chk' /&gt;&lt;/td&gt;&lt;td width='600' &gt;"+elem.name+"&lt;/td&gt;&lt;td&gt;"+elem.price+"&lt;/td&gt;&lt;tr&gt;"
                      );
                  });
              }            
          });
      }
  &lt;/script&gt;
  </code></pre>