title: How to get dataTable working with PHP
body: <p>I want to have my table beautifully display with sorting options. I'm using PHP to retrieve records from a MySQL database. I learn of datatables and saw that they are pretty useful for such purpose.</p>
  
  <p>Now, the problem is whenever I use PHP to generate data from the database and dynamically display them in a table it works perfectly with all the datatables styles applying to the table, but I can't get the sorting and pagination features of dataTables to work. Here is how my table displays:
  <a href="https://i.stack.imgur.com/JIn4d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JIn4d.png" alt="enter image description here"></a></p>
  
  <p>How do I enable the sorting and pagination features that dataTables provides?
  Here are the scripts to dataTables and the php code I wrote:</p>
  
  <pre><code>&lt;!-- DataTables CSS --&gt;
  &lt;link href="vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet"&gt;
  
  &lt;!-- DataTables Responsive CSS --&gt;
  &lt;link href="vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet"&gt;
  
  
  &lt;table class="table table-striped table-bordered table-hover" id="example"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;First Name&lt;/th&gt;
              &lt;th&gt;Surname&lt;/th&gt;
              &lt;th&gt;Gender&lt;/th&gt;
              &lt;th&gt;Birth Date&lt;/th&gt;
              &lt;th&gt;Address&lt;/th&gt;
              &lt;th&gt;Nationality&lt;/th&gt;
              &lt;th&gt;County&lt;/th&gt;
              &lt;th&gt;Student Type&lt;/th&gt;
              &lt;th&gt;Class&lt;/th&gt;
              &lt;th colspan="3"&gt;Operations&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;?php 
         $query = "SELECT student_id, first_name, cell_number, middle_name,   surname, gender, date_of_birth, address, nationality, county, student_type, class_name 
              from students
              INNER JOIN classes
                  ON students.class_id = classes.class_id";
  
         if($result = mysqli_query($connection, $query)){
            if(mysqli_num_rows($result) &gt; 0){
              while ($row = mysqli_fetch_array($result)){
     ?&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;?php echo htmlentities($row['first_name']) ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo htmlentities($row['surname']) ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo htmlentities($row['gender']) ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo htmlentities($row['date_of_birth']) ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo htmlentities($row['address']) ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo htmlentities($row['nationality']) ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo htmlentities($row['county'])?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo htmlentities($row['student_type'])?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?php echo htmlentities($row['class_name'])?&gt;&lt;/td&gt;
  
          &lt;td align="center"&gt;&lt;a class="page_anchor" href="edit_student.php?student=&lt;?php echo urlencode($row['student_id']); ?&gt;"&gt;Edit&lt;/a&gt;&lt;/td&gt; 
  
          &lt;td align="center"&gt;&lt;a class="page_anchor" href="create_grades.php?student=&lt;?php echo urlencode($row['student_id']); ?&gt;"&gt;Grades&lt;/a&gt;&lt;/td&gt; 
  
          &lt;td align="center"&gt;&lt;a class="page_anchor" href="student_details.php?student=&lt;?php echo urlencode($row['student_id']); ?&gt;"&gt;Details&lt;/a&gt;&lt;/td&gt; 
      &lt;/tr&gt;
  
  
              &lt;!-- closing the while loop --&gt; 
              &lt;?php }?&gt;
           &lt;/tbody&gt;
          &lt;!-- closing the if mysqli_num_rows if statement --&gt;    
          &lt;?php } else { echo "No record found"; }?&gt;
      &lt;!-- closing the if $result = mysqli_query($connection, sql) if statement --&gt;   
      &lt;?php } else {
          die("Database query failed. ". mysqli_error($connection));
      } ?&gt;
  &lt;/table&gt;
  
  &lt;!-- jQuery --&gt;
  &lt;script src="vendor/jquery/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Bootstrap Core JavaScript --&gt;
  &lt;script src="vendor/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="vendor/datatables/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
   &lt;script src="vendor/datatables-responsive/dataTables.responsive.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  $(document).ready(function() {
      $('#example').DataTable({
          responsive: true
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here are the errors I'm receiving from the JS console:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'mData' of undefined
   at HTMLTableCellElement.&lt;anonymous&gt; (jquery.dataTables.min.js:90)
   at Function.each (jquery.min.js:2)
   at r.fn.init.each (jquery.min.js:2)
   at HTMLTableElement.&lt;anonymous&gt; (jquery.dataTables.min.js:90)
   at Function.each (jquery.min.js:2)
   at r.fn.init.each (jquery.min.js:2)
   at r.fn.init.m [as dataTable] (jquery.dataTables.min.js:82)
   at r.fn.init.h.fn.DataTable (jquery.dataTables.min.js:166)
   at HTMLDocument.&lt;anonymous&gt; (index.php:429)
   at j (jquery.min.js:2)
  
  Uncaught TypeError: Cannot read property 'defaults' of undefined
   at f (dataTables.bootstrap.min.js:5)
   at dataTables.bootstrap.min.js:8
   at dataTables.bootstrap.min.js:8
  </code></pre>
  
  <p>Here is a warning that I also saw in the JS console:</p>
  
  <pre><code>jQuery.Deferred exception: Cannot read property 'mData' of undefined TypeError: Cannot read property 'mData' of undefined
  at HTMLTableCellElement.&lt;anonymous&gt; (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:90:236)
  at Function.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:2815)
  at r.fn.init.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:1003)
  at HTMLTableElement.&lt;anonymous&gt; (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:90:192)
  at Function.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:2815)
  at r.fn.init.each (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:1003)
  at r.fn.init.m [as dataTable] (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:82:388)
  at r.fn.init.h.fn.DataTable (http://localhost/SchoolMate/vendor/datatables/js/jquery.dataTables.min.js:166:245)
  at HTMLDocument.&lt;anonymous&gt; (http://localhost/SchoolMate/index.php:429:23)
  at j (http://localhost/SchoolMate/vendor/jquery/jquery.min.js:2:29568) undefined
  </code></pre>