初始化后如何更改数据表的数据
How can I change the data of DataTables after it has been initialized?
我想根据ajax请求填充数据表。
这是我所做的
$(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]
但这给了我一个错误
类型错误:table.clear 不是一个函数
如何正确让数据表动态一遍又一遍地更改其内容?
要使用 table.clear(),请使用 DataTable()
而不是 dataTable()
dataTable
返回一个 jquery 对象,其中 as DataTable
返回 datatables 对象
我也遇到了这个问题,他们处理它的方式只是销毁所有内容并重新创建它,但性能对于这项任务来说并不是非常关键。
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();
}
});
});
});
相关文章:
- 单击按钮即可显示带有提取的json数据的表
- 将数据从表单传递到另一个页面上的表-knockout.js
- 当用户将数据输入表单时要知道的事件
- 在这种情况下,我如何使用Javascript生成充满数据的表行
- 使用jQuery用data-*数据填充表单文本输入
- 使用ng repeat用数组中的数据填充表行
- 如何根据特定条件将数据插入表中
- (钛工作室)显示带有排序数据的表视图
- 如何将数据从表单传递到 php 函数到 javascript 以在画布上绘制而不刷新页面
- 根据 Ajax 返回的数据提交表单
- 如何在 Backbone 中构建具有相互关联的垂直和水平数据的表
- 从远程站点获取数据 - HTML 表
- 根据表数据对表行进行排序
- 使用表格数据填写表单
- 加载HighCharts图表/数据在表单上提交jQuery
- 如何使用 Ajax .serialize() 数据将表单发布到 PHP
- 使用来自另一个表单的数据填充表单
- 在包含 JSON 数据的表中实现无限滚动
- 使用 jQuery 生成一个包含 XML 数据的表
- 如何访问对象的键值?希望从对象数据填充表