title: "Search" and "Pagination" on Table are missing after converting to AJAX
body: <p>Can anyone here help me to solve my problem?</p>
  
  <p>BEFORE converting to AJAX:</p>
  
  <p><a href="https://i.stack.imgur.com/ieQOe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ieQOe.png" alt="enter image description here"></a></p>
  
  <p>AFTER converting to AJAX:</p>
  
  <p><a href="https://i.stack.imgur.com/XMTPj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XMTPj.png" alt="enter image description here"></a></p>
  
  <p>and you will notice that on the first image there are 5,000+ records only 10 records per tab. On the second image there are only 20 records BUT if the code will work it must only 10 records per page will be shown. </p>
  
  <p>I'll provide a code below so that you can check it and tell me where part of the code that I missed. </p>
  
  <p>MY CODE</p>
  
  <p>view.php</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script src="assets/js/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;!-- BOOTSTRAP SCRIPTS --&gt;
  &lt;script src="assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!-- DATA TABLE SCRIPTS --&gt;
  &lt;script src="assets/js/dataTables/jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;script src="assets/js/dataTables/dataTables.bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="assets/js/table.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
   function load(){
       
       // AJAX for loading view table
       var xhttp = new XMLHttpRequest();
       xhttp.onreadystatechange = function() {
           if (this.readyState == 4 &amp;&amp; this.status == 200) {
               document.getElementById("loadTable").innerHTML = this.responseText;
           }
       };
       xhttp.open("GET", "table/loadViewTable.php", true);
       xhttp.send();
   }
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body onload="load()"&gt;
  &lt;div class="panel-body"&gt;
   &lt;div class="table-responsive"&gt;
       &lt;div id="loadTable" &gt;
           
       &lt;/div&gt;
   &lt;/div&gt;                                                          
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>loadViewTable.php</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php
   include_once '..\assets\function\retrieveFunction.php';
   $loadStudList = array();
      $loadStudList = currentEnrolledStudentsList();
  ?&gt;
  &lt;table class="table table-striped table-bordered table-hover" id="claimTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;School Semester&lt;/th&gt;
              &lt;th&gt;Student Number&lt;/th&gt;
              &lt;th&gt;Lastname&lt;/th&gt;
              &lt;th&gt;Firstname&lt;/th&gt;
              &lt;th&gt;Middlename&lt;/th&gt;
              &lt;th&gt;Suffixname&lt;/th&gt;
              &lt;th&gt;Course&lt;/th&gt;
              &lt;th&gt;Year Level&lt;/th&gt;
              &lt;th&gt;Registration Date&lt;/th&gt;
              &lt;th&gt;Encoder&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;?php
       $i=0; 
       for ($i=1;$i&lt;=20;$i++){?&gt;
       &lt;tr onclick="getClaimData()"&gt;
        &lt;td&gt;&lt;?php echo $i;?&gt;&lt;/td&gt;     
        &lt;td&gt;2017-2016-1&lt;/td&gt;     
        &lt;td&gt;123456789&lt;/td&gt;     
        &lt;td&gt;Doe&lt;/td&gt;     
        &lt;td&gt;John&lt;/td&gt;     
        &lt;td&gt;Anyone&lt;/td&gt;     
        &lt;td&gt;NONE&lt;/td&gt;     
        &lt;td&gt;BSMAR-E&lt;/td&gt;     
        &lt;td&gt;4TH&lt;/td&gt;     
        &lt;td&gt;12/11/2017&lt;/td&gt;     
        &lt;td&gt;JOHN&lt;/td&gt;     
       &lt;/tr&gt;
      &lt;?php
       }
      ?&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the purpose is when I'm using PHP+HTML for loading the 5,000+ records it takes 10-15 seconds on my PC and it takes 20-30 seconds loading time on other low end PC's but when I use AJAX it takes only 3-5 seconds to load all records but the search bar and pagination are missing.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I forgot to add this code...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function getClaimData(){
  
      var table = $('#claimTable').DataTable();
      $('#claimTable tbody').on('click', 'tr', function () {
          var data = table.row( this ).data();
          document.getElementById("claimStudID").value = data[1];
          document.getElementById("claimStudLN").value = data[2];
          document.getElementById("claimStudFN").value = data[3];
          document.getElementById("claimStudMN").value = data[4];
          document.getElementById("claimSuffix").value = data[5];
          document.getElementById("claimStudCourse").value = data[6];
          document.getElementById("claimStudLevel").value = data[7];
      } );
  }</code></pre>
  </div>
  </div>
  
  after I type my query all table will show but no search and pagination but when I will clicked the table all features of the table worked.</p>
  
  <p>BEFORE clicking the table
  <a href="https://i.stack.imgur.com/6Nn7X.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6Nn7X.png" alt="enter image description here"></a></p>
  
  <p>AFTER
  <a href="https://i.stack.imgur.com/Tv2XL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tv2XL.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE 2:</strong></p>
  
  <p>For better explanation I uploaded my file. Please test it
  <a href="https://www.4shared.com/s/fHFrxPNtuca" rel="nofollow noreferrer">https://www.4shared.com/s/fHFrxPNtuca</a></p>