我有脚本将数据加载到数据表中,数据已成功加载到表中,然后我想尝试更新数据表时,如果新数据插入到json中显示的数据库中,我尝试使用自动刷新来更新数据表,只是更新来自Ajax的json。然后我尝试使用ID刷新的按钮更新数据表,但仍然无法正常工作:有ide吗?
<button id="Refresh" type="button">Refresh</button>
$(function dataQR () {
$('#showQR').on('show.bs.modal', function(e) {
$("#code").empty();
$("#code").qrcode($(e.relatedTarget).data('id'));
});
$.ajax({
url: "/report/dataGenerateQR.html",
dataType: "json",
method: "GET",
success: function (response) {
console.log("Response : "+ response);
var table = $('#QRTable').dataTable({
data: response,
retrieve: true,
paging: true,
searching: true,
//destroy: false,
columns: [
{'data': 'amount',"render": $.fn.dataTable.render.number(',', '.', 2, 'Rp. ')},
{'data': 'createdate'},
{
"data": "codeqr",
"render": function(data, type, row, meta){
if(type === 'display') {
data = '<a href="#showQR" class="fa fa-qrcode" data-toggle="modal" data-target="#showQR" data-id="'+ data +'" style="font-size: 1.6em;"></a>';
}
return data;
},
"orderable": false
}
]
});
//$('#QRTable').dataTable().api().ajax.reload();
$(".dataTables_filter input").addClass("form-control");
$(".dataTables_length select").addClass("form-control");
$("#Refresh").click(function(){
table.fnReloadAjax();
table.fnDraw();
})
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("error bro :"+textStatus);
}
});
setTimeout(dataQR,2000);
});
任何线索?谢谢。
答案 0 :(得分:1)
这是我的解决方案。希望对您有所帮助:)
<script> var TableDatatablesAjax = function() {
var e = function() {
var a = new Datatable;
a.init({
src: $("#QRTable"),
onSuccess: function(a, e) {},
onError: function(a) {},
onDataLoad: function(a) {},
loadingMessage: "Loading...",
dataTable: {
lengthMenu: [
[10, 20, 50, 100, 150, -1],
[10, 20, 50, 100, 150, "All"]
],
"columnDefs": [ {
"targets": 'no-sort',
"orderable": false,
} ],
pageLength: 10,
processing: true,
serverSide: true,
bFilter:true,
//pagingType: "full_numbers",
ajax: {
url: "/report/dataGenerateQR.html",
data: function ( d ) {
d.customLabel='customValue';
// d.custom = $('#myInput').val();
// etc
}
},
//ordering: !1,
order: [
[1, "asc"]
]
}
})
};
return {
init: function() {
e()
}
} }();
jQuery(document).ready(function() {
TableDatatablesAjax.init();
//
$('#replace_with_button_id').click(function()
{
var QRTable = $('#QRTable').DataTable();
QRTable.ajax.reload();
});
答案 1 :(得分:0)
在fnDraw()之前尝试一下:
table.dataTable().fnDestroy();