为什么我的jquery数据表在第一次尝试时显示数据，但在随后的尝试中却不显示数据? [英] Why my jquery datatable shows data at first attempt but not for the subsequent attempt?
问题描述
我正在使用它来加载表，但是当我第一次加载它(即第一个请求)时它可以工作，但是在随后的请求中它无法加载新数据.
I am using this to load a table but it works when I load it for the first time i.e. first request but on the subsequent request it fails to load the new data.
我正在将asp.net mvc与jquery数据表一起使用.为什么不起作用?
I am using asp.net mvc with jquery datatable. Why Doesn't it work?
在控制台中引发此错误.
THrows this error in console.
我收到无法读取未定义的属性'reload'"
$('form').submit(function(e) {
e.preventDefault();
if (!$(this).valid()) {
$("#tbodytblServicesReport").html("");
return;
} else {
filltblServicesReport();
}
});
function filltblServicesReport() {
$('tfoot td#tdTotal').text("");
var url = '@Url.Action("ServicesDetailedReportPartyWise")';
var data = {
FromDate: $("#FromDate").val(),
ToDate: $("#ToDate").val(),
PartyName: $("#PartyName").val()
}
$.post(url, data, function(response) {
if (response.ReturnStatusJSON == true) {
$("#tbodytblServicesReport").html("");
var counter = 1;
$.each(response.lstDetailedServicesReturned, function(i, val) {
$("#tbodytblServicesReport").append($('<tr>').append($('<td>').html(i))
.append($('<td>').html((val.EntryDateTime === null || val.EntryDateTime === "") ? "N/A" : formatJSONDate(val.EntryDateTime)))
.append($('<td>').html(val.InvoiceNo))
.append($('<td>').html(val.CustomerName))
.append($('<td>').html(val.VehicleRegNo))
.append($('<td>').html(val.ServiceName))
.append($('<td>').html(val.PartyName))
.append($('<td>').html(val.ServicePrice))
.append($('<td>').html(val.Commission))
)
i++;
$('tfoot td#tdTotal').text(val.TotalCost);
$('tfoot td#tdTotalCommission').text(val.TotalCommission);
$('tfoot td#tdCommissionValue').text("-" + val.TotalCommission);
$('tfoot td#tdFinalTotal').text(val.TotalCostMinusTotalCommission);
//$('tfoot td#tdTotalCostMinusCommissionMinusTotalOtherExpenses').text(val.TotalCostMinusCommissionMinusTotalOtherExpenses);
counter = i;
})
if (counter <= 1) {
$('tfoot td#tdTotal').text("");
$('tfoot td#tdTotalCommission').text("");
$('tfoot td#tdCommissionValue').text("");
$('tfoot td#tdFinalTotal').text("");
//$('tfoot td#tdTotalCostMinusCommissionMinusTotalOtherExpenses').text("");
return;
}
$('#tblServicesReport').show();
$('#tblServicesReport').DataTable.ajax.reload(null, false)({
bPaginate: false,
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
{
extend: 'pdfHtml5',
footer: true,
title: 'Party Wise Report (' + $('#FromDate').val() + ' - ' + $('#ToDate').val() + ')',
customize: function(doc) {
doc.styles.title = {
color: 'gray',
fontSize: '15',
alignment: 'center'
}
doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');
doc.styles.tableHeader.fontSize = 10;
doc.styles.tableHeader.alignment = 'left';
doc.styles.tableHeader.color = 'white'
}
},
{
extend: 'print',
footer: true
//title: 'Sales Report'
}
]
});
} else {
swal("Sorry !", "No Record Found", "error");
$("#tbodytblServicesReport").html("");
}
});
}
推荐答案
表的重载方法不起作用，因此有一种解决方法.
reload method of a table won't work, so there's a way around of how you do it.
首先，初始负载适当 然后对于其他加载，之后需要销毁数据表并清空行 所以这是我的做法-
first the initial load is proper then for other loads after that needs to destroy the datatable and empty the rows so here how I did it -
第一次创建数据表
$('#mytable').dataTable()
第二次:-
//ajax for delete row
$.ajax({
url: url,
type: "POST",
data: { request },
cache: false,
success: function (data) {
//DESTROY datatable
$('#mytable').DataTable().destroy();
//remove table rows
$('#mytable tbody').empty();
$.ajax({
type: "GET",
url: "url",
"columnDefs": [
{ className: "ques", "targets": [1] }
],
success: function (response) {
if (response.Status === 1) {
//Create new table and get list
$('#mytable').dataTable({
"data": response.data,
"initComplete": function (settings, json) {
App.unblockUI('.questionslist');
},
columns: [{ "data": "Id" },
{ "data": "Question", "width": "50%" },
{ "data": null, "render": function (data, type, full) { return '<a class="btn btn-info btn-sm" href=/Home/EditQuestion/' + full.Id + '>' + 'Edit' + '</a>'; }, },
{ "data": null, "render": function (data, type, row) { return '<button type="button" class="btn btn-danger btn-sm" value="' + row.Id + '" id="delete">DELETE</button>' } }
],
"pageLength": 10,
"order": [[0, "desc"]],
});
} else {
toastr.error(response.Message)
}
},
failure: function (response) {
},
error: function (response) {
}
});
}
else {
}
},
error: function (ex) {
},
})
对于那些不了解的人 第一个ajax调用在这里执行DELETE方法:-从数据表中删除行
for those who didn't understand 1st ajax call here does a DELETE method : - deletes a row from datatable
IF 成功删除后，它会破坏数据表并删除所有行
IF successfully deleted, it destroys the datatable and removes all rows
//DESTROY datatable
$('#mytable').DataTable().destroy();
//remove table rows
$('#mytable tbody').empty();
之后 最后的ajax调用(删除一个条目之后)再次获取表的所有数据，并将其加载到表中
AFTER THAT the final ajax call gets all the table's data again (after deleting one entry), and loads it into the table
^^^^在上面的ajax调用中，销毁数据表后，它看起来像一个新表，因此它的工作原理与第一次工作类似.
^^^^ in the above ajax call, after destroying the datatable it looks as a new table ,hence it will work similarly as it worked for the first time
如有疑问请还原
这篇关于为什么我的jquery数据表在第一次尝试时显示数据，但在随后的尝试中却不显示数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
