发布刷新DataTable
发布刷新DataTable
提问于 2019-10-16 21:03:50
我的DataTable (https://datatables.net)有两个问题，第一个问题是，当复选框更改时，我试图让数据表显示新信息，下面是我的代码：
let statusList = getStatusList();
function getRes(callback) { // ADDED CALLBACK
let city = document.getElementById("cityselect").value;
$.ajax({
type: 'get',
url: 'getreservationstable.php?city='+city,
dataType: 'json',
cache: false,
success: callback // USED CALLBACK
});
}
function changeCity()
{
$('#resdatatable').DataTable().ajax.reload();
}
getRes(function (result) { // APPLIED CALLBACK
$('#resdatatable').DataTable({
data: result, // YOUR RESULT
destroy: true,
columns: [
{ data: 'id', title: 'ID' },
{ data: 'bookingdatetime', title: 'Booking Date' },
{ data: 'name', title: 'Name' },
{ data: 'class', title: 'Class' },
{ data: 'pickupdatetime', title: 'Pick up' },
{ data: 'duration', title: 'Duration' },
{ data: 'dropdatetime', title: 'Drop off' },
{ data: 'age', title: 'Age' },
{ data: 'coverage', title: 'Coverage' },
{ data: 'quote', title: 'Quote' },
{
data: 'status',
title: 'Status',
render: function(data, type, row) {
let isKnown = statusList.filter(function(k) { return k.id === data; }).length > 0;
if (isKnown) {
return $('<select id ="resstatus' + row.id + '" onchange="changeResStatus(' + row.id + ')">', {
id: 'resstatus-' + row.id, // custom id
value: data
}).append(statusList.map(function(knownStatus) {
let $option = $('<option>', {
text: knownStatus.text,
value: knownStatus.id
});
if (row.status === knownStatus.id) {
$option.attr('selected', 'selected');
}
return $option;
})).on('change', function() {
changeresstatus(row.id); // Call change with row ID
}).prop('outerHTML');
} else {
return data;
}
}
}
]
});
});
/**
* jQuery plugin to convert text in a cell to a dropdown
*/
(function($) {
$.fn.createDropDown = function(items) {
let oldTxt = this.text();
let isKnown = items.filter(function(k) { return k.id === oldTxt; }).length > 0;
if (isKnown) {
this.empty().append($('<select>').append(items.map(function(item) {
let $option = $('<option>', {
text: item.text,
value: item.id
});
if (item.id === oldTxt) {
$option.attr('selected', 'selected');
}
return $option;
})));
}
return this;
};
})(jQuery);
// If you remove the renderer above and change this to true,
// you can call this, but it will run once...
if (false) {
$('#resdatatable > tbody tr').each(function(i, tr) {
$(tr).find('td').last().createDropDown(statusList);
});
}
function getStatusList() {
return [{
id: 'Confirmed',
text: 'Confirmed'
}, {
id: 'Unconfirmed',
text: 'Unconfirmed'
}, {
id: 'Open',
text: 'Open'
}, {
id: 'Closed',
text: 'Closed'
}, {
id: 'Canceled',
text: 'Canceled'
}];
}我有一个选择框，如下所示：
<select id="cityselect" onchange="changeCity()">
<option value="la">Los Angeles</option>
<option value="oc">Orange County</option>
<option value="sf">San Francisco</option>
</select>当我试图改变这个城市时，它给了我一个错误：
DataTables warning: table id=resdatatable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1控制台上写着：
Uncaught TypeError: Cannot set property 'data' of nullJSON响应100%有效。有人能解释一下为什么这不管用吗？
编辑:这是JSON数据，它是合法的，它加载在页面加载上，但没有在选择开关上加载：
[{"id":"1","bookingdatetime":"10\/02\/19 @ 10:35 pm","name":"Tony ","class":"travel","pickupdatetime":"10\/03\/19 @ 01:00 pm","duration":"013 days","dropdatetime":"10\/16\/19 @ 06:30 pm (sf) ","age":"21+","coverage":"inclusive","quote":"$973","status":"Confirmed"},{"id":"11","bookingdatetime":"10\/03\/20 @ 02:17 pm","name":"Daniel ","class":"travel","pickupdatetime":"10\/04\/19 @ 04:30 am","duration":"027 days","dropdatetime":"10\/31\/19 @ 06:30 pm ","age":"21+","coverage":"inclusive","quote":"$1356","status":"Confirmed"},{"id":"12","bookingdatetime":"10\/03\/19 @ 02:17 pm","name":"Richard Phillips ","class":"suv","pickupdatetime":"10\/08\/19 @ 12:30 pm","duration":"007 days","dropdatetime":"10\/15\/19 @ 04:30 pm (sf) ","age":"21+","coverage":"inclusive","quote":"$849","status":"Unconfirmed"},{"id":"13","bookingdatetime":"10\/03\/19 @ 02:38 pm","name":" ESCOBAR ","class":"convert","pickupdatetime":"10\/12\/19 @ 10:00 am","duration":"014 days","dropdatetime":"10\/26\/19 @ 08:30 pm (oc) ","age":"19","coverage":"inclusive","quote":"$1638","status":"Unconfirmed"},{"id":"14","bookingdatetime":"10\/03\/19 @ 02:40 pm","name":"Tony ","class":"local","pickupdatetime":"10\/04\/19 @ 02:00 pm","duration":"005 days","dropdatetime":"10\/09\/19 @ 05:30 pm ","age":"21+","coverage":"inclusive","quote":"$254","status":"Confirmed"},{"id":"15","bookingdatetime":"10\/03\/19 @ 02:51 pm","name":"YA ES","class":"local","pickupdatetime":"10\/30\/19 @ 11:00 am","duration":"092 days","dropdatetime":"01\/30\/20 @ 11:00 pm ","age":"21+","coverage":"inclusive","quote":"$2376","status":"Confirmed"},{"id":"16","bookingdatetime":"11\/17\/20 @ 02:56 pm","name":"yayoi escobar","class":"local","pickupdatetime":"10\/30\/19 @ 11:00 am","duration":"092 days","dropdatetime":"01\/30\/20 @ 11:00 pm ","age":"21+","coverage":"inclusive","quote":"$0","status":"Confirmed"},{"id":"18","bookingdatetime":"10\/03\/19 @ 03:39 pm","name":"yayoi escobar","class":"local","pickupdatetime":"10\/09\/19 @ 12:30 pm","duration":"020 days","dropdatetime":"10\/29\/19 @ 08:00 pm ","age":"21+","coverage":"inclusive","quote":"$653","status":"Confirmed"},{"id":"19","bookingdatetime":"10\/03\/19 @ 03:40 pm","name":"yayoi escobar","class":"local","pickupdatetime":"10\/08\/19 @ 12:00 pm","duration":"013 days","dropdatetime":"10\/21\/19 @ 09:00 pm ","age":"21+","coverage":"inclusive","quote":"$454","status":"Confirmed"},{"id":"20","bookingdatetime":"10\/03\/19 @ 03:52 pm","name":"Daniel ","class":"travel","pickupdatetime":"10\/22\/19 @ 01:00 pm","duration":"006 days","dropdatetime":"10\/28\/19 @ 07:30 pm ","age":"21+","coverage":"inclusive","quote":"$469","status":"Unconfirmed"},{"id":"25","bookingdatetime":"10\/03\/19 @ 03:39 pm","name":"yayoi escobar","class":"local","pickupdatetime":"10\/09\/19 @ 12:30 pm","duration":"020 days","dropdatetime":"10\/29\/19 @ 08:00 pm ","age":"21+","coverage":"inclusive","quote":"$653","status":"Confirmed"}]回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-19 06:51:21
像您尝试在$('#resdatatable').DataTable().ajax.reload();事件上触发changeCity()事件一样，从不在DataTable构造函数上触发 定义ajax选项。
如文件中的。
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/arrays.txt"
} );
} );由于您使用$.ajax定义了一个单独的调用，我猜您希望保持这种逻辑并调整您的onChange事件，所以最好的选择是以这种方式重写changeCity：
function changeCity()
{
getRes(function (result) {
var datatable = $('#resdatatable').DataTable()
datatable.clear();
datatable.rows.add(result);
datatable.draw();
});
}请参阅这个职位有关如何使用新的JSON数据手动更新数据表。
API参考资料：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58421682
复制相关文章
相似问题
腾讯云开发者
