На мой взгляд, у меня есть таблица, которая выглядит так:
Я использую AJAX с «Удалить ссылки», чтобытаблица может просто обновляться без полного обновления страницы, так что, как только пользователь нажмет «Удалить», появится диалоговое окно, например:
После того, какНажав кнопку подтверждения, мы переходим в jQuery / Ajax:
weighLocationTable.on("click",
".js-delete-teu-weighLocation",
function() {
var link = $(this);
var row = $(this).parents("tr");
var teuId = $(this).data("teu-id");
var weighLocId = $(this).data("teu-wl-id");
var personnelIbm = $("#PersonnelIBM").val();
var allTables = $(".teu-edit-tbl");
var rowCount = allTables.DataTable().rows().count();
console.log(rowCount);
var rowCountMinusOne = rowCount - 1;
console.log("Total Rows In Every Table on Page Minus One: " + rowCountMinusOne);
var countThisTableRows = $("#Teu-Edit-Weigh-Location-Tbl").DataTable().rows().count();
console.log("Total Rows In Weigh Location Table: ", countThisTableRows);
var thisTableRowMinusOne = countThisTableRows - 1;
console.log("Total Rows In Weigh Location Table Minus One: ", thisTableRowMinusOne);
/*
If the user who is deleting rows deletes the only one left.. then it should delete the entire TEU record because
there are zero rows associated with it. Else just delete the maneuver.
*/
if (rowCountMinusOne === 0) {
bootbox.confirm({
title: "Delete Entire TEU Record?",
message:
"Because this is the last category for this record, deleting this row will result in the entire record being deleted. " +
"Are you sure you want to delete this entire TEU Record? ",
buttons: {
cancel: {
label: "<i class='fa fa-times'></i> Cancel"
},
confirm: {
label: "<i class='fa fa-check'></i> Confirm"
}
},
callback: function(result) {
if (result) {
toastr.options = {
timeOut: 3000
}
$.ajax({
url: deleteEntireRecordUrl + teuId,
method: "DELETE",
beforeSend: disableSendButton(),
success: function() {
var thisTable = $("#Teu-Edit-Weigh-Location-Tbl").DataTable();
thisTable.row($(this).parents("tr")).remove().draw(false);
//row.remove().draw();
//row.remove();
//$("#Teu-Edit-Weigh-Location-Tbl").DataTable().destroy();
//$("#Teu-Edit-Weigh-Location-Tbl").DataTable().draw();
toastr.options = {
onHidden: function() {
window.location.href = redirectUrl + personnelIbm;
},
timeOut: 2000
}
toastr.success("Row successfully deleted.");
toastr.success("TEU record successfully deactivated.");
}
});
}
}
});
} else {
bootbox.confirm({
title: "Delete Row?",
message:
"Are you sure you want to delete this category with it's count? This will PERMANENTLY delete this row.",
buttons: {
cancel: {
label: "<i class='fa fa-times'></i> Cancel"
},
confirm: {
label: "<i class='fa fa-check'></i> Confirm"
}
},
callback: function(result) {
if (result) {
toastr.options = {
timeOut: 3000
}
$.ajax({
url: deleteOneRowUrl + teuId + "/" + weighLocId,
method: "DELETE",
success: function() {
var thisTable = $("#Teu-Edit-Weigh-Location-Tbl").DataTable();
thisTable.row($(this).parents("tr")).remove().draw(false);
//row.remove().draw();
//row.remove();
//$("#Teu-Edit-Weigh-Location-Tbl").DataTable().destroy();
//$("#Teu-Edit-Weigh-Location-Tbl").DataTable().draw();
if (thisTableRowMinusOne === 0) {
weighLocationTable.next().remove();
weighLocationTable.remove();
}
toastr.success("Row successfully deleted");
},
error: function(x, y, z) {
console.log(x);
}
});
}
}
});
}
});
Как вы можете видеть, в моих функциях успеха я пробовал несколько вещей, чтобы попытаться обновить таблицу.потому что после удаления строки счетчик по-прежнему показывает 2 записи, например:
Мне нужно, чтобы таблица обновлялась правильно, чтобы была только одназапись.
Что я делаю не так?
Любая помощь приветствуется.