How to reload/refresh jQuery dataTable?

Question

I am trying to implement functionality whereby clicking a button on the screen will cause my jQuery dataTable to refresh (as the server-side data source may have changed since the dataTable was created).

Here's what I have:

$(document).ready(function() {     $("#my-button").click(function() {         $("#my-datatable").dataTable().fnReloadAjax();     }); }); 

But when I run this, it does nothing. What's the proper way to refresh the dataTable when the button is clicked? Thanks in advance!

Answer 1

With version 1.10.0 of DataTables, it is built-in and easy:

var table = $('#example').DataTable(); table.ajax.reload(); 

or just

$('#example').DataTable().ajax.reload(); 

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

Answer 2

Destroy the datatable first and then draw the datatable.

$('#table1').DataTable().destroy(); $('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>"); $('#table1').DataTable().draw();