我想根据ajax请求填充datatables。
这就是我所做的
$(function(e) {
$('#CampaignMenu').change(function(e) {
$('#ReportWrapper').hide();
if ( $(this).val() != '0') {
$('#DisplayReport').attr('disabled', false);
} else {
$('#DisplayReport').attr('disabled', true);
}
});
$('#DisplayReport').click(function (e) {
$.ajax({
type: 'GET',
url: '/getdata',
data: { 'campaign_id': $('#CampaignMenu').val() },
dataType: 'json',
success: function (json) {
$('#reportTable').DataTable({
data: json,
pageLength: 50,
lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
searching: false,
order: [ [ 2, 'desc' ] ],
columns: [
{ data: 'chain_name', title: 'Chain Name' },
{ data: 'store_id' , title: 'Store Number' },
{ data: 'completed', title: 'Total Surveys Completed' },
{ data: 'initial_quota', title: 'Target Surveys To Complete' },
{ data: 'total_callable', title: 'Total Call In The Dialer Queue' },
{ data: 'current_status', title: 'Current Quota Status' },
]
});
$('#ReportWrapper').show();
}
});
});
});
</script>
第一个请求没有问题。但是,当我第二次调用ajax请求时,我收到此错误
DataTables warning: table id=reportTable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
如何在初始化表格内容后更改它?
我想在页面加载时初始化数据表,然后调用一些事件以便稍后在我的Ajax请求中填充它。但是,我需要一个事件来调用我的ajax请求。
$(window).load(function (e) {
$('#reportTable').DataTable({
pageLength: 50,
lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
searching: false,
order: [ [ 2, 'desc' ] ],
columns: [
{ data: 'chain_name', title: 'Chain Name' },
{ data: 'store_id' , title: 'Store Number' },
{ data: 'completed', title: 'Total Surveys Completed' },
{ data: 'initial_quota', title: 'Target Surveys To Complete' },
{ data: 'total_callable', title: 'Total Call In The Dialer Queue' },
{ data: 'current_status', title: 'Current Quota Status' }
]
});
});
我尝试在重新初始化之前销毁该表,但这不起作用。
$('#reportTable').DataTable().destroy();
已更新
我在初始化后找到了一种向表中添加数据的方法。但我需要一种方法来清除数据,所以我不会有重复数据。
以下是我为添加数据所做的工作
var table = $('#reportTable').dataTable();
table.fnAddData(json);
之前的代码会继续将数据附加到表中,但它不会首先清除现有数据导致重复。我在添加以下代码[table.clear().draw()][2]
之前尝试添加但是这给了我一个错误
TypeError:table.clear不是函数
如何正确地让DataTable一次又一次地改变它的内容?
答案 0 :(得分:2)
要使用table.clear(),请使用DataTable()
代替dataTable()
dataTable
返回一个jquery对象,其中DataTable
返回datatables对象
我也遇到了这个问题,他们处理它的方式只是为了摧毁一切并重新创建它,但性能对于这项任务来说并不是非常关键。
答案 1 :(得分:1)
DataTables使用destroy:true
提供了一个选项,它将销毁以前的数据并重新初始化它!我也在使用WordPress,它完美无缺。如果有人遇到这样的问题,你可以试试这个解决方案。希望这会有所帮助,欢呼!
$('#DisplayReport').click(function (e) {
$.ajax({
type: 'GET',
url: '/getdata',
data: { 'campaign_id': $('#CampaignMenu').val() },
dataType: 'json',
success: function (json) {
$('#reportTable').DataTable({
destroy: true, <======= Add this to remove previous table
data: json,
pageLength: 50,
lengthMenu: [10, 25, 50, 75, 100, 250, 500, 1000],
searching: false,
order: [ [ 2, 'desc' ] ],
columns: [
{ data: 'chain_name', title: 'Chain Name' },
{ data: 'store_id' , title: 'Store Number' },
{ data: 'completed', title: 'Total Surveys Completed' },
{ data: 'initial_quota', title: 'Target Surveys To Complete' },
{ data: 'total_callable', title: 'Total Call In The Dialer Queue' },
{ data: 'current_status', title: 'Current Quota Status' },
]
});
$('#ReportWrapper').show();
}
});
});
});