我正在尝试在Ajax Success上初始化DataTable。它首次正常工作,但除非我刷新页面,否则无法再次工作。
JS功能:
this.summaryReport = function()
{
crsf = $("input[name=csrftestname]").val();
searchClients = $("#searchClients").val();
$('#loadingmessage').show();
$.ajax({
url: url+"query_report_summary",
type: "post",
cache: false,
data: {"csrftestname": crsf, searchClients: searchClients},
success: function(query_result)
{
var data = $.parseJSON(query_result);
$('#example').DataTable( {
data: data,
columns: [
{ data: "name" },
{ data: "location" },
{ data: "source" },
{ data: "contact" },
{ data: "number" },
{ data: "status" }
]
} );
self.reportSummary(data);
},
complete: function()
{
$("#reportSummaryForm")[0].reset();
$('#loadingmessage').hide();
}
});
}
我得到的错误是 - DataTable警告 - 无法重新初始化DataTable。
HTML:
<form role="form" class="" id="reportSummaryForm">
<input type="hidden" name="<?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>">
<div class="input-group input-group-sm">
<input class="form-control input-sm" type="text" id="searchClients" name="searchClients" placeholder="">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-primary" data-bind="click: summaryReport">Search</button>
</span>
</div>
</form>
<table id="example" class="display" width="100%"></table>
答案 0 :(得分:1)
在外部范围内预先创建dataTable:
var table = $('#example').DataTable( {
columns: [
{ data: "name" },
{ data: "location" },
{ data: "source" },
{ data: "contact" },
{ data: "number" },
{ data: "status" }
]
});
在summaryReport中,clear()
表格和add()
新行,逐个。下面我也设置dataType
,因此不需要转换响应。所有这些都假设您真的在响应中得到有效的JSON,该响应在columns
中指定的表单上包含一系列项目:
$.ajax({
url: url+"query_report_summary",
type: "post",
cache: false,
data: {"csrftestname": crsf, searchClients: searchClients},
dataType: 'json',
success: function(data) {
table.clear()
data.forEach(function(row) {
table.row.add(row)
})
table.draw()
}
...
})
答案 1 :(得分:0)
错误Can not reinitialize DataTable
明确指出,已经为此元素初始化了数据表。
你可能会在每次成功调用ajax之后销毁数据表并将其初始化为新数据。
$('#example').DataTable( {
应替换为
dtExample.destroy();
dtExample = $('#example').DataTable( {
dtExample
必须作为函数外部的全局变量添加,以便在以后执行ajax调用时访问它。
为避免这一切,您可以查看示例部分here中解释的数据表的服务器端处理能力