我已经在DataTable中建立了一个过滤器，因此可以检查状态。我正在使用以下代码来检索状态：
if(isset($_POST['status']))
{
if (!empty($where) ) {
$where .= "AND status = '". $_POST['status'] ."'";
} else {
$where .= "WHERE status = '". $_POST['status'] ."'";
}
}
else{
if (!empty($where) ) {
$where .= "AND status = '1'";
} else {
$where .= "WHERE status = '1'";
}
}
选择数据没有问题。当我查看WebConsole时，可以看到脚本正在发布正确的数据，从而获得了正确的响应。
但是我在数据表示方面存在一些问题。
当响应正确时，我想更新我的数据表。
我正在使用以下代码更新我的数据表：
success:function(data){
$('#tb1').DataTable(data);
}
执行此代码时，我收到DataTables警告：
DataTables warning: table id=tb1 - Cannot reinitialise DataTable.
我无法弄清楚我的脚本出了什么问题。查看多个示例，脚本应该可以工作。有人知道我的脚本出了什么问题以及如何解决此问题吗？
这是我的完整剧本：
<script type="text/javascript">
$( document ).ready(function() {
$('#tb1').DataTable({
"bprocessing": true,
"serverSide": true,
"ajax": {
"url": "./Response1.php",
"type": "POST",
"error": function(){
$("#grid_processing").css("display","none");
}
}
});
$("div.toolbar1").html('<select id="status" type="status"><option value="1">Active</option><option value="0">Inactive</option></select>');
$("#status").on('change',function () {
var val = $(this).val();
$.ajax({
url: './Response1.php',
type: 'POST',
data: 'status='+val,
success:function(data){
$('#tb1').DataTable(data);
}
});
});
});
</script>
答案 0 :(得分：1)
已更新，其中包含解释和参考
不需要单独的Ajax请求。坚持使用Datatables Ajax option就足够了。
我们可以对请求的add additional data使用数据表的ajax.data选项，或者根据需要将to modify the data object提交给服务器。
要使用new and refresh data input，我们需要使用ajax.data as a function，否则它将被初始化为静态对象，该对象只会被评估一次。
var table = $('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": function ( data) {
//your data altering codes
}
}
} );
然后使用数据表ajax.reload()在事件调用中从Ajax数据源重新加载表数据。
使用数据表ajax.data更新数据请求的可能方法是：
var table = $('#example').dataTable({ "ajax": { "url": "data.json", "data": function(data) { data.status = $('#status').val(); } } }); table.ajax.reload();
var global_status = 1; var table = $('#example').dataTable({ "ajax": { "url": "data.json", "data": function(data) { data.status = global_status; } } }); $("#status").on('change', function() { global_status = $(this).val(); table.ajax.reload(); });
示例演示：
$.mockjax({
url: "Response1.php",
response: function(settings) {
// Investigate the `settings` to determine the response...
if (settings.data.status == 1) {
this.responseText = {
"draw": settings.data.draw,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
[
"Airi",
"Satou",
"Accountant",
"Tokyo",
"28th Nov 08",
"1"
],
[
"Angelica",
"Ramos",
"Chief Executive Officer (CEO)",
"London",
"9th Oct 09",
"1"
],
[
"Ashton",
"Cox",
"Junior Technical Author",
"San Francisco",
"12th Jan 09",
"1"
],
[
"Bradley",
"Greer",
"Software Engineer",
"London",
"13th Oct 12",
"1"
],
[
"Brenden",
"Wagner",
"Software Engineer",
"San Francisco",
"7th Jun 11",
"1"
],
[
"Brielle",
"Williamson",
"Integration Specialist",
"New York",
"2nd Dec 12",
"1"
],
[
"Bruno",
"Nash",
"Software Engineer",
"London",
"3rd May 11",
"1"
],
[
"Caesar",
"Vance",
"Pre-Sales Support",
"New York",
"12th Dec 11",
"1"
],
[
"Cara",
"Stevens",
"Sales Assistant",
"New York",
"6th Dec 11",
"1"
],
[
"Cedric",
"Kelly",
"Senior Javascript Developer",
"Edinburgh",
"29th Mar 12",
"1"
]
]
}
}
if (settings.data.status == 0) {
this.responseText = {
"draw": settings.data.draw,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
[
"Airi",
"Satou",
"Accountant",
"Tokyo",
"28th Nov 08",
"0"
],
[
"Angelica",
"Ramos",
"Chief Executive Officer (CEO)",
"London",
"9th Oct 09",
"0"
],
[
"Ashton",
"Cox",
"Junior Technical Author",
"San Francisco",
"12th Jan 09",
"0"
]
]
}
}
}
});
$(document).ready(function() {
var req_status = 1;
var table = $('#example').DataTable({
"processing": true,
"serverSide": true,
"paging": false,
"ordering": false,
"info": false,
"searching": false,
"ajax": {
"url": "Response1.php",
"type": "POST",
"data": function(data) {
data.status = req_status;
}
},
});
$("div.toolbar1").html('<select id="status" type="status"><option value="1">Active</option><option value="0">Inactive</option></select>');
$("#status").on('change', function() {
req_status = $(this).val();
table.ajax.reload();
console.log('Status Val',table.ajax.params().status);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<div class="toolbar1"></div>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Status</th>
</tr>
</tfoot>
</table>
答案 1 :(得分：0)
尝试一下
$("#tb1").dataTable().fnDestroy();
$("#tb1").html(data);
$("#tb1").DataTable();
答案 2 :(得分：0)
在服务器端添加以下内容：true，
ERROR_INVALID_PARAMETER在初始化表格后销毁该表格
答案 3 :(得分：0)
尝试使用单个通话
function initTable(tableId, apiUrl){
var table_element = "#" + tableId;
if ($.fn.DataTable.isDataTable(table_element )) {
//remove datatable framework on the table so we can re-initialize new record
$(table_element).DataTable().clear().destroy();
$(table_element).html(''); //empty the table entirely
}
//re-initialize table
var table = $(table_element).DataTable({
"destroy": true,
"bprocessing": true,
"serverSide": true,
"ajax": {
"url": apiUrl,
"type": "POST",
"error": function(){
$("#grid_processing").css("display","none");
}
}
});
}
从这样的任何地方调用函数
initTable('tb1','./Response1.php');