title: DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2
body: <p>I have created a form to echo table data, I need to design the table With Sorting, Searching and Paging, but the error show me like this <code>DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see http://datatables.net/tn/2</code>, below is my coding:</p>
  
  <p><code>head</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"&gt;   
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"&gt;&lt;/style&gt;
  &lt;script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><code>Echo Table coding</code></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;?php
  session_start();
  $qry = "select id, name, identify, created, pay_option, amount, receivedby from payment_details";
  $_SESSION["query"] = $qry;
  $result = $conn-&gt;query("select id, name, identify, created, pay_option, amount, receivedby from payment_details");
  $rows = $result-&gt;fetchAll(PDO::FETCH_ASSOC);
  echo "&lt;div id='myTable'&gt;&lt;div class='data-content'&gt;&lt;span&gt;&lt;b&gt;REPORT SELECTION&lt;/b&gt;&lt;/span&gt;&lt;div class='data-table'&gt;";
  echo "&lt;table id='dataTable'&gt;&lt;tr&gt;&lt;th&gt;Payer&lt;/th&gt;&lt;th&gt;Passport/IC No&lt;/th&gt;&lt;th&gt;Date Paid&lt;/th&gt;&lt;th&gt;Payment Type&lt;/th&gt;&lt;th&gt;Payment Amount&lt;/th&gt;&lt;th&gt;Received by&lt;/th&gt;&lt;th&gt;Payment Receipt&lt;/th&gt;&lt;/tr&gt;";
  foreach($rows as $row) {
  echo "&lt;tr id=".$row["id"]."&gt;&lt;td&gt;".$row["name"]."&lt;/td&gt;&lt;td&gt;".$row["identify"]."&lt;/td&gt;&lt;td&gt;".$row["created"]."&lt;/td&gt;&lt;td&gt;".$row["pay_option"]."&lt;/td&gt;&lt;td&gt;".$row["amount"]."&lt;/td&gt;&lt;td&gt;".$row["receivedby"]."&lt;/td&gt;&lt;td&gt;&lt;a href='?loc=invoice' onclick='sessionFunction(".$row["id"].")'&gt;View&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;";
                  }
  echo "&lt;/table&gt;";
  echo "&lt;/div&gt;&lt;/div&gt;&lt;div class='table-msg'&gt;&lt;span&gt;Total Record : ";
  echo $result-&gt;rowCount();
  echo "&lt;/span&gt;&lt;span style='margin-left: 70%;'&gt;Max 500 pages&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;";
                  ?&gt;
  
  </code></pre>
  
  <p><code>Script Function</code></p>
  
  <pre class="lang-html prettyprint-override"><code>$(document).ready(function(){
  $('#myTable').dataTable();
  });
  
  </code></pre>
  
  <p><strong>My Output show me like this</strong>
  <a href="https://i.stack.imgur.com/tSqVw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tSqVw.png" alt="Output"></a></p>
  
  <p>Actual I want the output table like the below sample and red arrows in the picture mean that I want the function:
  <a href="https://i.stack.imgur.com/vx8Wb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vx8Wb.png" alt="Output 2"></a></p>
  
  <p>I hope someone coding experts can guide me how to sovle it, this problems have already make me stuck in the few days. Thanks.</p>