jQuery - Add row to datatable without reloading/refreshing
<p>I'm trying add data to DB and show these data in same page using ajax and jQuery datatable without reloading or refreshing page. My code is saving and retrieving data to/from database. But updated data list is not showing in datatable without typing in search box or clicking on table header. Facing same problem while loading page. </p>

<p>Here is my code</p>

<pre><code>//show data page onload              
$(document).ready(function() {
   catTable = $('#cat_table').DataTable( {
      columns: [
        { title: "Name" },
        { title: "Level" },
        { title: "Create Date" },
        { title: "Status" }
      ]
    });
    get_cat_list(); 
 });

//save new entry and refresh data list
$.ajax({
    url: 'category_save.php',
    type: 'POST',
    data:{name: name,level: level},
    success: function (data) {
       get_cat_list();
    },
    error: function (data) {
       alert(data);
    }
 });

//function to retrieve data from database
function get_cat_list() {
   catTable.clear();
   $.ajax({
      url: 'get_category_list.php',
      dataType: 'JSON',
      success: function (data) {
         $.each(data, function() {
            catTable.row.add([
                this.name,
                this.level,
                this.create_date,
                this.status
            ] );
         });
      }
   });
}
</code></pre>