How to reload / update jQuery dataTable?

Question

I am trying to implement functionality in which pressing a button on the screen will update jQuery dataTable (as a data source on the server side it may change from the moment the dataTable was created).

Here is what I have:

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

But when I run this, it does nothing. What is the correct way to update table data when a button is clicked? Thanks in advance!

Answer 1

You can try the following:

 function InitOverviewDataTable() { oOverviewTable =$('#HelpdeskOverview').dataTable( { "bPaginate": true, "bJQueryUI": true, // ThemeRoller-stöd "bLengthChange": false, "bFilter": false, "bSort": false, "bInfo": true, "bAutoWidth": true, "bProcessing": true, "iDisplayLength": 10, "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest' }); } function RefreshTable(tableId, urlData) { $.getJSON(urlData, null, function( json ) { table = $(tableId).dataTable(); oSettings = table.fnSettings(); table.fnClearTable(this); for (var i=0; i<json.aaData.length; i++) { table.oApi._fnAddData(oSettings, json.aaData[i]); } oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); table.fnDraw(); }); } function AutoReload() { RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest'); setTimeout(function(){AutoReload();}, 30000); } $(document).ready(function () { InitOverviewDataTable(); setTimeout(function(){AutoReload();}, 30000); }); 

http://www.meadow.se/wordpress/?p=536

Answer 2

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

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

or simply

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

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

Answer 3

You can use the extensive DataTable API to reload it ajax.reload()

If you declare your datatable as DataTable() (new version), you need to:

 var oTable = $('#filtertable_data').DataTable( ); // to reload oTable.ajax.reload(); 

If you declare your datatable as DataTable() (old version), you need to:

 var oTable = $('#filtertable_data').dataTable( ); // to reload oTable.api().ajax.reload(); 

Answer 4

First destroy the dataset, and then draw it.

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

Answer 5

I had the same problem, here is how I fixed it:

first get the data for the method you selected, I use ajax after sending the results that will make changes to the table. Then clear and add fresh data:

 var refreshedDataFromTheServer = getDataFromServer(); var myTable = $('#tableId').DataTable(); myTable.clear().rows.add(refreshedDataFromTheServer).draw(); 

here is the source: https://datatables.net/reference/api/clear ()

Answer 6

This simple answer worked for me

  $('#my-datatable').DataTable().ajax.reload(); 

ref https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

Answer 7

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

If you want to add a reload / refresh button in DataTables 1.10, use drawCallback .

See the example below (I am using DataTables with bootstrap css)

 var ref= $('#hldy_tbl').DataTable({ "responsive": true, "processing":true, "serverSide":true, "ajax":{ "url":"get_hotels.php", "type":"POST" }, "drawCallback": function( settings ) { $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination'); } }); function refresh_tab(){ ref.ajax.reload(); } 

Answer 8

This is how I do it ... It may not be the best way, but it is definitely simpler (IMHO) and does not require any additional plugins.

HTML

 <div id="my-datatable"></div> 

JQuery

 function LoadData() { var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>"); $("table",myDataTable).dataTable({...}); } $(document).ready(function() { $("#my-button").click(LoadData); LoadData(); }); 

Note. In my work with jQuery dataTable, sometimes if you do not have <thead></thead><tbody></tbody> , this does not work. But you can do without it. I definitely did not understand what was required of this and what was not.

Answer 9

Try to destroy the data first, then configure it again, for example

 var table; $(document).ready(function() { table = $("#my-datatable").datatable() $("#my-button").click(function() { table.fnDestroy(); table = $("#my-datatable").dataTable(); }); }); 

Answer 10

I would recommend using the following code.

 table.ajax.reload(null, false); 

The reason for this is that user paging will not be reset upon reboot.
Example:

 <button id='refresh'> Refresh </button> <script> $(document).ready(function() { table = $("#my-datatable").DataTable(); $("#refresh").on("click", function () { table.ajax.reload(null, false); }); }); </script> 

Details on this can be found here.

Answer 11

well, you did not specify how / where you load the scripts, but to use the API functions of the plug-in, you must include it on your page after loading the DataTables library, but before initializing the DataTable.

like this

 <script type="text/javascript" src="jquery.dataTables.js"></script> <script type="text/javascript" src="dataTables.fnReloadAjax.js"></script> 

Answer 12

If you use url attribute just do

 table.ajax.reload() 

Hope this helps someone

Answer 13

Allan Jardines DataTables is a very powerful and seamless jQuery plugin for displaying tabular data. It has many functions and can do most of what you might want. One thing, which, oddly enough, is complicated, is how to update the content in a simple way, so I have links for myself and, possibly, in the interests of others, a complete example of one of the ways:

HTML

 <table id="HelpdeskOverview"> <thead> <tr> <th>Ärende</th> <th>Rapporterad</th> <th>Syst/Utr/Appl</th> <th>Prio</th> <th>Rubrik</th> <th>Status</th> <th>Ägare</th> </tr> </thead> <tbody> </tbody> </table> 

Javascript

 function InitOverviewDataTable() { oOverviewTable =$('#HelpdeskOverview').dataTable( { "bPaginate": true, "bJQueryUI": true, // ThemeRoller-stöd "bLengthChange": false, "bFilter": false, "bSort": false, "bInfo": true, "bAutoWidth": true, "bProcessing": true, "iDisplayLength": 10, "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest' }); } function RefreshTable(tableId, urlData) { $.getJSON(urlData, null, function( json ) { table = $(tableId).dataTable(); oSettings = table.fnSettings(); table.fnClearTable(this); for (var i=0; i<json.aaData.length; i++) { table.oApi._fnAddData(oSettings, json.aaData[i]); } oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); table.fnDraw(); }); } function AutoReload() { RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest'); setTimeout(function(){AutoReload();}, 30000); } $(document).ready(function () { InitOverviewDataTable(); setTimeout(function(){AutoReload();}, 30000); }); 

Source

Answer 14

var myTable = $ ('# tblIdName'). DataTable () ;. MyTable.clear () rows.add (myTable.data) .draw ();

This worked for me without using ajax.

Answer 15

Use this code when you want to update data:

  $("#my-button").click(function() { $('#my-datatable').DataTable().clear().draw(); }); 

Answer 16

  if(data.length==0){ alert("empty"); $('#MembershipTable > tbody').empty(); // $('#MembershipTable').dataTable().fnDestroy(); $('#MembershipTable_info').empty(); $("#MembershipTable_length").empty(); $("#MembershipTable_paginate").empty(); html="<tr><td colspan='20'><b>No data available in Table</b> </td></tr>"; $("#MembershipTable").append(html); } else{ $('#MembershipTable').dataTable().fnDestroy(); $('#MembershipTable > tbody').empty(); for(var i=0; i<data.length; i++){ // 

.......}

Answer 17

According to the DataTable , I could do for my table.

I want a multiple database to be requested in a DataTable.

For example: data_1.json> 2500 records - data_2.json> 300 records - data_3.json> 10265 records

 var table; var isTableCreated= false; if (isTableCreated==true) { table.destroy(); $('#Table').empty(); // empty in case the columns change } else i++; table = $('#Table').DataTable({ "processing": true, "serverSide": true, "ordering": false, "searching": false, "ajax": { "url": 'url', "type": "POST", "draw": 1, "data": function (data) { data.pageNumber = (data.start / data.length); }, "dataFilter": function (data) { return JSON.stringify(data); }, "dataSrc": function (data) { if (data.length > 0) { data.recordsTotal = data[0].result_count; data.recordsFiltered = data[0].result_count; return data; } else return ""; }, "error": function (xhr, error, thrown) { alert(thrown.message) } }, columns: [ { data: 'column_1' }, { data: 'column_2' }, { data: 'column_3' }, { data: 'column_4' }, { data: 'column_5' } ] }); 

Answer 18

if you use datatable v1.10.12, and then just calling the .draw() method and passing the required types to draw, i.e. full-reset , page , then you re-draw your dt with the new data

let dt = $("#my-datatable").datatable()

// do some action

dt.draw('full-reset')

for additional checking datatable docs

Answer 19

I did something related to this ... Below is a javascript example with what you need. There is a demo here: http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

 //global the manage member table var manageMemberTable; function updateMember(id = null) { if(id) { // click on update button $("#updatebutton").unbind('click').bind('click', function() { $.ajax({ url: 'webdesign_action/update.php', type: 'post', data: {member_id : id}, dataType: 'json', success:function(response) { if(response.success == true) { $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+ '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+ '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+ '</div>'); // refresh the table manageMemberTable.ajax.reload(); // close the modal $("#updateModal").modal('hide'); } else { $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+ '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+ '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+ '</div>'); // refresh the table manageMemberTable.ajax.reload(); // close the modal $("#updateModal").modal('hide'); } } }); }); // click remove btn } else { alert('Error: Refresh the page again'); } } 

Answer 20

You must write this line of code after the update operation.

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

Answer 21

  function autoRefresh(){ table.ajax.reload(null,false); alert('Refresh');//for test, uncomment } setInterval('autoRefresh()', 5000); 

Answer 22

reinitialise datatable with init and write retrieve as true..done..so simple

eg.

 TableAjax.init(); retrieve: true,