重新初始化数据表 [英] Reinitialise DataTable
问题描述
我已经在DataTable中构建了一个过滤器，因此我可以检查状态.我正在使用以下代码来检索状态:
I have build a filter in my DataTable so I can check for the status. I am using the following code to retrieve the status:
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时，可以看到该脚本正在发布正确的数据，从而获得了正确的响应.
I have no issues with selecting the data. When I look at the WebConsole I can see that the script is posting the right data en gets the right response.
但是我在数据表示方面有一些问题.
But I have some issues with the presentation of the data.
当响应正确时，我想更新我的数据表.
When the response is correct I want to update my DataTable.
我正在使用以下代码更新我的数据表:
I am using the following code for updating my datatable:
success:function(data){
$('#tb1').DataTable(data);
}
执行此代码时，我收到DataTables警告:
When I execute this code I get a DataTables warning:
DataTables warning: table id=tb1 - Cannot reinitialise DataTable.
我无法弄清楚我的脚本出了什么问题.查看多个示例，脚本应该可以工作.有人知道我的脚本出了什么问题以及如何解决此问题吗?
I cant figure out whats wrong with my script. Looking to multiple examples the script should work. Does someone know what is wrong with my script and how I can solve this problem?
这是我的完整剧本:
<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>
推荐答案
已更新，其中包含解释和参考
不需要单独的Ajax请求.坚持使用数据表Ajax选项就足够了.
There is no need separate Ajax request. Stick with Datatables Ajax option is enough.
我们可以对请求add additional data使用数据表 ajax.data 选项，或根据需要将to modify the data object提交给服务器.
We can use Datatables ajax.data option to add additional data to the request, or to modify the data object being submitted to server if required.
要使用new and refresh data input，我们需要使用ajax.data as a function，否则它将被初始化为静态对象，该对象只会被评估一次.
To work with new and refresh data input we need to use ajax.data as a function otherwise it will initialized as a static object which will evaluated only once.
var table = $('#example').dataTable( {
"ajax": {
"url": "data.json",
"data": function ( data) {
//your data altering codes
}
}
} );
然后使用数据表 ajax.reload()重新加载表您的事件调用中来自Ajax数据源的数据.
And then use Datatables ajax.reload() to reload the table data from the Ajax data source within your event calls.
使用数据表更新数据请求的可能方法 ajax.data 通过: /p>
Possible ways to update data request using Datatables ajax.data is by:
- 直接使用元素值
var table = $('#example').dataTable({
"ajax": {
"url": "data.json",
"data": function(data) {
data.status = $('#status').val();
}
}
});
table.ajax.reload();
- 使用可在数据表之前的事件调用中更改的全局变量 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>
这篇关于重新初始化数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
