我有一个dataTable,用于显示数据库中的数据。我没有显示为引导模式,并且每行都有一个删除行的选项。
这是从数据库获取数据的jquery:
function cart_contents() {
$.ajax({
url: "cartContents.php",
type: "POST",
dataType: "JSON",
success: function(data){
var table = $('#cart-content').dataTable();
table.fnDestroy();
table.dataTable({
"aaData": data,
"scrollX": false,
"lengthChange": false,
"ordering": false,
"pageLength": 6,
"language": {
"info": "Number of items: _TOTAL_"
},
"searching": false,
"aoColumns": [
{"sTitle": "Product", "mData": "product"},
{"sTitle": "Price", "mData": "price"},
{"sTitle": "Qty.", "mData": "quantity"},
{
"sTitle": "Edit", "mData": "id", "render": function (mData, type, row, meta) {
return '<button class="btn btn-xs btn-success" onclick="sample(' + mData + ')">Edit</button>';
}
},
{
"mData": "id", "render": function (mData, type, row, meta){
return "<span style='cursor: pointer' class='close' onclick='remove_product(this," + mData + ")'>x</span>";
}
}
]
})
}
}
这是remove_product:
function remove_product(these, id){
var i = these.parentNode.parentNode.rowIndex;
document.getElementById("cart-content").deleteRow(i);
$.ajax({
type: "POST",
url: "remove_product.php",
data: {product_id: id},
success: function(data){
alert(data);
}
})
}
现在,由于数据被设置为显示6行,因此该数据可能会或可能不会超过表格中的单个页面。因此,有可能出现分页。每当单击“ x”以删除行时,它都会在页面上将其删除,并成功将其删除到数据库中。
但是,当我滚动到表格的下一页并返回上一步时,被删除的行又回来了。由于它不再存在于数据库中,我将如何永久删除它?我不需要重新加载模态就可以做到这一点。