[英]Datatables ajax post - send post data from select box
I have a datatable which gets the data from json.php file. 我有一个数据表,它从json.php文件中获取数据。 It is working fine, but now I want a selectbox with various options (eg: 'This Year, Last Year, Open Bills, Closed Bills, Overdue etc), which on select send ajax post variables
data: {cmd: ($('#selected').val()}
to json.php (which will refine the requested records) and ajax.table.reload();
so that new records gets displayed. 它工作正常,但是现在我想要一个带有各种选项的选择框(例如:“今年,去年,未结清帐单,已结清帐单,过期等”),该选择框可以选择发送ajax发布变量
data: {cmd: ($('#selected').val()}
为json.php(将优化请求的记录)和ajax.table.reload();
以便显示新记录。
This is what I have tried so far: 到目前为止,这是我尝试过的:
<select class="form-control" name="selection" id="selection">
<option value="thisMon">This Month</option>
<option value="lasMon">Last Month</option>
<option value="thisYr">This Year</option>
<option value="lasYr">Last Year</option>
<option value="open">Open</option>
<option value="closed">Closed</option>
</select>
<script>
$(document).ready(function() {
$('#selection').change(function() {
var table = $('#datatable-buttons').DataTable({
"ajax": {
url: "scripts/json-expenses.php",
dataSrc: "",
data: { length: $('#selection').val() }
},
dom: "Bfrip",
"columns": [
{ data: "id", visible: false, searchable: false },
{ data: "expense_date"},
{ data: "supplier",
render: function(data, type, row){
return '<a href="/numbers/edit-expense.php?id='+ row.id +'">'+ data +'</a>';
}
},
{ data: "amount" },
{ data: "gst" },
{ data: "status",
render: function(data, type, row) {
if (row.due_date !== null) {
var dueDateArr = row.due_date.split("-");
var dueDate = new Date(dueDateArr[0], dueDateArr[1]-1, dueDateArr[2]);
var todayDate = new Date();
}
if (data == "Not Paid" && todayDate > dueDate) {
return '<label class="label label-danger">Overdue</label>';
}
if (data === "Paid") {
return '<label class="label label-success">'+ data +'</label>';
}
else if (data === "Not Paid") {
return '<label class="label label-default">'+ data +'</label>';
}
}
},
{ data: "due_date",
defaultContent: ""
}
],
"order": [ 1, 'desc' ],
paging: false,
fixedHeader: true
});
});
$('#selection').change(function(){
table.ajax.reload();
});
});
</script>
EDIT:
编辑:
It works only once and gives error ReferenceError: Can't find variable: table
on line where table.ajax.reload();
它只能工作一次并给出错误
ReferenceError: Can't find variable: table
在table.ajax.reload();
行中
Next time I select another option, datatables give error: Cannot reinitialise DataTable.
下次我选择另一个选项时,数据表给出错误:
Cannot reinitialise DataTable.
Try change function like this 尝试这样的改变功能
$(document).ready(function(){
$('#datatable-buttons').DataTable({
"ajax": {
url: "scripts/json-expenses.php",
dataSrc: "",
data: { length: $('#selection').val() }
},
dom: "Bfrip",
"columns": [
{ data: "id", visible: false, searchable: false },
{ data: "expense_date"},
{ data: "supplier",
render: function(data, type, row){
return '<a href="/numbers/edit-expense.php?id='+ row.id +'">'+ data +'</a>';
}
},
{ data: "amount" },
{ data: "gst" },
{ data: "status",
render: function(data, type, row) {
if (row.due_date !== null) {
var dueDateArr = row.due_date.split("-");
var dueDate = new Date(dueDateArr[0], dueDateArr[1]-1, dueDateArr[2]);
var todayDate = new Date();
}
if (data == "Not Paid" && todayDate > dueDate) {
return '<label class="label label-danger">Overdue</label>';
}
if (data === "Paid") {
return '<label class="label label-success">'+ data +'</label>';
}
else if (data === "Not Paid") {
return '<label class="label label-default">'+ data +'</label>';
}
}
},
{ data: "due_date",
defaultContent: ""
}
],
"order": [ 1, 'desc' ],
paging: false,
fixedHeader: true
});
$('#selection').change(function(){
$('#datatable-buttons').dataTable().fnDestroy();
var table = $('#datatable-buttons').DataTable({
"ajax": {
url: "scripts/json-expenses.php",
dataSrc: "",
data: { length: $('#selection').val() }
},
dom: "Bfrip",
"columns": [
{ data: "id", visible: false, searchable: false },
{ data: "expense_date"},
{ data: "supplier",
render: function(data, type, row){
return '<a href="/numbers/edit-expense.php?id='+ row.id +'">'+ data +'</a>';
}
},
{ data: "amount" },
{ data: "gst" },
{ data: "status",
render: function(data, type, row) {
if (row.due_date !== null) {
var dueDateArr = row.due_date.split("-");
var dueDate = new Date(dueDateArr[0], dueDateArr[1]-1, dueDateArr[2]);
var todayDate = new Date();
}
if (data == "Not Paid" && todayDate > dueDate) {
return '<label class="label label-danger">Overdue</label>';
}
if (data === "Paid") {
return '<label class="label label-success">'+ data +'</label>';
}
else if (data === "Not Paid") {
return '<label class="label label-default">'+ data +'</label>';
}
}
},
{ data: "due_date",
defaultContent: ""
}
],
"order": [ 1, 'desc' ],
paging: false,
fixedHeader: true
});
});
)};
在数据表中设置"destroy": true
If you define table
in a function it will be only defined in the function and the child functions. 如果在函数中定义
table
,则仅在函数和子函数中定义。
In your code you define table
in the $('#selection').change(function() {
and you are going to use it in an other $('#selection').change(function() {
, so it won't be defined in the second function. 在代码中,您可以在
$('#selection').change(function() {
定义table
,然后将其用于其他$('#selection').change(function() {
在第二个功能中未定义。
And there is also an error because you use $('#selection').change(function() {
two times and try to add the datatable multiple times. 还有一个错误,因为您两次使用
$('#selection').change(function() {
并尝试多次添加数据表。
$(document).ready(function() {
//no need for change, just load table on document ready
var table = $('#datatable-buttons').DataTable({
"ajax": {
url: "scripts/json-expenses.php",
dataSrc: "",
data: { length: $('#selection').val() }
},
dom: "Bfrip",
"columns": [
{ data: "id", visible: false, searchable: false },
{ data: "expense_date"},
{ data: "supplier",
render: function(data, type, row){
return '<a href="/numbers/edit-expense.php?id='+ row.id +'">'+ data +'</a>';
}
},
{ data: "amount" },
{ data: "gst" },
{ data: "status",
render: function(data, type, row) {
if (row.due_date !== null) {
var dueDateArr = row.due_date.split("-");
var dueDate = new Date(dueDateArr[0], dueDateArr[1]-1, dueDateArr[2]);
var todayDate = new Date();
}
if (data == "Not Paid" && todayDate > dueDate) {
return '<label class="label label-danger">Overdue</label>';
}
if (data === "Paid") {
return '<label class="label label-success">'+ data +'</label>';
}
else if (data === "Not Paid") {
return '<label class="label label-default">'+ data +'</label>';
}
}
},
{ data: "due_date",
defaultContent: ""
}
],
"order": [ 1, 'desc' ],
paging: false,
fixedHeader: true
});
//on change reload table
$('#selection').change(function(){
table.ajax.reload();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.