title: JQuery Uncaught TypeError: Cannot read property 'reload' of undefined
body: <p>I want to reload the datatable after I insert the new data in the database. I have written this code of HTML.    </p>
  
  <pre><code>&lt;table class="table table-striped table-bordered bootstrap-datatable datatable" id="Slider_table"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Title&lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
      &lt;?php foreach($items as $row){?&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;?=$row-&gt;item_title;?&gt;&lt;/td&gt;
          &lt;td class="center"&gt;&lt;?=$row-&gt;item_price;?&gt;&lt;/td&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>But it gives me that error in the console.log.</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'reload' of undefined
    on that line <code>$("#Slider_table").DataTable().ajax.reload();</code></p>
  </blockquote>
  
  <pre><code>$('#add_items').on('click', function(e){
      e.preventDefault();
      var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form
  
      $.ajax({
          url: "&lt;?= base_url(); ?&gt;Items/add_items",
          type: "post",
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function(output) {
              $("#Slider_table").DataTable().ajax.reload();
          }
      });
  });
  </code></pre>