reload datatable after ajax success

Question

I use JQuery DataTable. I send data to datatable onclick in json file at ajax succes .the first click everything is good,But the next click I get only the right data ANd wro

Answer 1

I had this same problem. I found a function I wrote on a project that deals with this. Here is a simple 2 column table I made.

        

            

                
Member Name
                
Location
            
        
        

          

            
Member Name
            
Location
          
        
      

This is my script to populate it:

function drawTable(){
var table = $('#memberships').DataTable();

table.destroy();

value = $("#memberName").val();
console.log("member name-->>" + value);
$('#memberships').DataTable({
responsive:true,
pageLength: 50,
ajax:{
    "url": `//BACKEND API CALL`,
    "type":"get",
    "dataSrc": 'members'//my data is in an array called members
},
columns: [
  {"data": "name_display" },
  {"targets": 0,
    "data": "membershipID",
    "render": function ( data, type, full, meta ) {
      return 'Edit MemberDelete';
    }
  }
 ]
});
$.fn.dataTable.ext.errMode = 'none';
}

You can ignore my column render function. I needed 2 buttons based on the data returned. The key was the table.destroy in the function. I created the table in a variable called table. I destroy it right in this initialization because it allowed me to use this same function over and over. The first time it destroys an empty table. Each call after that destroys the data and repopulates it from the ajax call.

Hope this helps.

Update: After playing with datatables alot more I found that setting table to a variable in a global scope to your function allows you to use reload.

var table = $('#memberships').DataTable({});

Then

table.ajax.reload();

should work.