title: DataTables: #example working but #datatable not working when making AJAX call
body: <p>I want to know the difference between #example and #datatable. I have seen one example there they are using one table with div id as <em>datatable</em> using some hardcoded value. And another table with div id as <em>example</em> . I can make a Ajax call for that second example. But i cant do it for first one.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          var oTable = $('#example').dataTable( {
              "bProcessing": true,
              "sAjaxSource": "Json/CustomerListJson.php",
              "sScrollX": "70%",
              "sScrollXInner": "110%",
              "bScrollCollapse": true
          } );
      } );                
  &lt;/script&gt;
  </code></pre>
  
  <p>The above code is working well.
  But If i change the table id to datatable like </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          var oTable = $('#datatable').dataTable( {
              "bProcessing": true,
              "sAjaxSource": "Json/CustomerListJson.php",
              "sScrollX": "70%",
              "sScrollXInner": "110%",
              "bScrollCollapse": true
          } );
      } );                
  &lt;/script&gt;
  &lt;div id="dynamic"&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="datatable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Contact&lt;/th&gt;
              &lt;th&gt;Email&lt;/th&gt;
              &lt;th&gt;Address&lt;/th&gt;
              &lt;th&gt;City&lt;/th&gt;
              &lt;th&gt;State&lt;/th&gt;
              &lt;th&gt;Country&lt;/th&gt;
              &lt;th&gt;Phone&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
      &lt;/tbody&gt;
  &lt;/table&gt;     
  &lt;/div&gt;
  </code></pre>
  
  <p>I got one warning pop alert which says </p>
  
  <p>DataTables warning (table id = 'datatable'): Cannot reinitialise DataTable.</p>
  
  <p>To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy.</p>
  
  <p>This is my first project using Bootstrap CSS.
  Please provide me the best way.</p>
  
  <p>I want this type of look and feel.</p>
  
  <p><img src="https://i.stack.imgur.com/GSptx.png" alt="enter image description here">
  But I got this type of table.
  <img src="https://i.stack.imgur.com/TfH0k.png" alt="enter image description here"></p>
  
  <p>Finally I got this error message, if i use #datatable</p>
  
  <pre><code>DataTables warning (table id = 'datatable'): Cannot reinitialise DataTable.
  
  To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy
  </code></pre>