如何重新加载/刷新 jQuery 数据表？

小开

最佳答案

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();
});
}
// Edited by Prasad
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

小开

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>

小开

This is how I do it... Maybe not the best way, but it's definitely simpler (IMHO) and doesn't 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 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();

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

小开

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);
});

Source

小开

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++){
//
.......}

小开

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 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 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();

小开

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();
}

小开

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

eg.

TableAjax.init();
retrieve: true,

小开

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' }
]
});

小开

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 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 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">&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');
}
}

小开

This simple answer worked for me

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

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

小开

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


setInterval('autoRefresh()', 5000);

小开

If you use the url attribute, just do

table.ajax.reload()

小开

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

小开

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

This worked for me without using ajax.

小开

you have to write this line of code after doing update operation.

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

小开

Use this code ,when you want to refresh your datatable:

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

小开

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

小开

Very Simple answer

$("#table_name").DataTable().ajax.reload(null, false);

小开

My table first call:

var myTable = $('.myTable').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.11.0/i18n/es_es.json"
},
dom: 'Bfrtip',
processing: true,
"paging": false
});

Your ajax call code here.

Then after the ajax result:

//Destroy my table
myTable.destroy();


//Place my table again
$("#tableWrapper").html(''+
'<table class="table-striped myTable">'+
'<thead>'+
'<tr>'+
'<th>Title</th>'+
'</tr>'+
'</thead>'+
'<tbody id="info_conds">'+
'<td>Content</td>'+
'</tbody>'+
'</table>'+
'');

Calling my table properties again

myTable = $('.myTable').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.11.0/i18n/es_es.json"
},
dom: 'Bfrtip',
processing: true,
"paging": false
});

Done.