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

.reload() is not working properly untill we pass some parameter

var  = $("#example").DataTable() ;
datatbale_name.ajax.reload(null, false );

Answer 2

On a button clik you dont need to empty your table body and make initiate the datatable again with the ajax.

you just have to call your ajax again as you have already initiate on document ready function

just use

$("#Table_id").ajax.reload();

check the below link, you will have better idea.

https://datatables.net/reference/api/ajax.reload()

Let me know if this doesn't help you

Answer 3

I created this simple function:

function refreshTable() {
  $('.dataTable').each(function() {
      dt = $(this).dataTable();
      dt.fnDraw();
  })
}

Answer 4

Try This i hope it will work

$("#datatable_id").DataTable().ajax.reload();

Answer 5

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.

<table id="memberships" class="table table-striped table-bordered table-hover"  width="100%">
        <thead>
            <tr>
                <th>Member Name</th>
                <th>Location</th>
            </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Member Name</th>
            <th>Location</th>
          </tr>
        </tfoot>
      </table>

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 '<button type="button" class="btn btn-info btn-block" 
      onclick="editMember(' + data + ')">Edit Member</button><button 
      type="button" class="btn btn-danger btn-block" 
      onclick="deleteMember(' + data + ')">Delete</button>';
    }
  }
 ]
});
$.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.

Answer 6

use below code..it perfectly work, it keep your pagination without lose current page

$("#table-example").DataTable().ajax.reload(null, false );