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!
This question is related to
javascript
jquery
datatables
According to the DataTable help, I could done for my table.
I want wanted multiple database to my 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' }
]
});
Try destroy datatable first then setup it again, example
var table;
$(document).ready(function() {
table = $("#my-datatable").datatable()
$("#my-button").click(function() {
table.fnDestroy();
table = $("#my-datatable").dataTable();
});
});
I had done something that relates to this... Below is a sample javascript with what you need. There is a demo on this 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">×</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">×</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');
}
}
I had the same problem, this is how i fixed it:
first get the data with method of your choice, i use ajax after submitting results that will make change 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()
you have to write this line of code after doing update operation.
$('#example').DataTable().ajax.reload();
For my case (DataTables 1.10.7) following code works for me;
let table = $(tableName).DataTable();
table.clear().draw();
$(tableName).dataTable({ ... });
Datatables clear(): Simply remove all rows of data from the table
You could use an extensive API of DataTable to reload it by ajax.reload()
If you declare your datatable as DataTable()
(new version) you need:
var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();
If you declare your datatable as dataTable()
(old version) you need:
var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();
function autoRefresh(){
table.ajax.reload(null,false);
alert('Refresh');//for test, uncomment
}
setInterval('autoRefresh()', 5000);
Very Simple answer
$("#table_name").DataTable().ajax.reload(null, false);
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();
If you use the url attribute, just do
table.ajax.reload()
Hopes it helps someone
Allan Jardine’s DataTables is a very powerful and slick jQuery plugin for displaying tabular data. It has many features and can do most of what you might want. One thing that’s curiously difficult though, is how to refresh the contents in a simple way, so I for my own reference, and possibly for the benefit of others as well, here’s a complete example of one way if doing this:
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);
});
var myTable = $('#tblIdName').DataTable(); myTable.clear().rows.add(myTable.data).draw();
This worked for me without using ajax.
if using datatable v1.10.12 then simply calling .draw()
method and passing your required draw types ie full-reset
, page
then you will re-draw your dt with new data
let dt = $("#my-datatable").datatable()
// do some action
dt.draw('full-reset')
for more check out datatable docs
i would recommend using the following code.
table.ajax.reload(null, false);
The reason for this, user paging will not be reset on reload.
Example:
<button id='refresh'> Refresh </button>
<script>
$(document).ready(function() {
table = $("#my-datatable").DataTable();
$("#refresh").on("click", function () {
table.ajax.reload(null, false);
});
});
</script>
detail about this can be found at Here
Use this code ,when you want to refresh your datatable:
$("#my-button").click(function() {
$('#my-datatable').DataTable().clear().draw();
});
well, you didn't show how/where you are loading the scripts, but to use the plug-in API functions, you have to include it in your page after you load the DataTables library but before you initialize the DataTable.
like this
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>
var ref = $('#example').DataTable();
ref.ajax.reload();
If you want to add a reload/refresh button to DataTables 1.10 then use drawCallback.
See 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();
}
This simple answer worked for me
$('#my-datatable').DataTable().ajax.reload();
ref https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event
reinitialise datatable with init and write retrieve as true ..done..so simple
eg.
TableAjax.init();
retrieve: true,
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++){
//
.......}
This is how I do it... Maybe not the best way, but it's definitely simpler (IMHO) and doesn't require any additional plugins.
<div id="my-datatable"></div>
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 workings with jQuery dataTable, sometimes if you don't have <thead></thead><tbody></tbody>
it doesn't work. But you might be able to get by without it. I haven't exactly figured out what makes it required and what doesn't.
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();
Source: Stackoverflow.com