从 JQuery 数据表中删除一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19135667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Deleting a Row from JQuery Datatables
提问by Najam-us-Saqib
Hi I am deleting the row from the table using fnDeleteRowfunction but the problem is that it deletes the correct row for the first time only and than start deleting the next row instead of that for which I am pressing the delete button.
嗨，我正在使用fnDeleteRow函数从表中删除行，但问题是它仅第一次删除正确的行，然后开始删除下一行而不是我按下删除按钮的行。
here is my code
这是我的代码
$(document).ready(function() {
$(document).delegate('.but', 'click', function() {
var id = this.id; //getting the ID of the pressed button
var name = this.name; //getting the name of the pressed button
/****AJAX Function*********/
$.post('/products/delete', {id:id}, function(data) {
if(data == 1){ //In case if data is deleted
var oTable = $('#table_id').dataTable(); // JQuery dataTable function to delete the row from the table
oTable.fnDeleteRow( parseInt(name, 10) );// JQuery dataTable function to delete the row from the table
// oTable.fnDraw(true);
}
else
alert(data);
});
});
});
this.namegives the row number of the row associated with the pressed button as I don't know any method to calculate the rowIndex dynamically from the dataTable.
this.name给出与按下的按钮关联的行的行号，因为我不知道从数据表动态计算 rowIndex 的任何方法。
As I calculate the row number on the server side and associate that number with the button, so when I delete the row datatable rearranges its rowIndex on client side and server does not know any thing regard this.
当我计算服务器端的行号并将该数字与按钮相关联时，所以当我删除行数据表时，会在客户端重新排列它的 rowIndex，服务器对此一无所知。
Any help to resolve this issue.
解决此问题的任何帮助。
回答by Unknown
Try this:
尝试这个：
$(document).ready(function() {
$(document).delegate('.but', 'click', function() {
var id = this.id; //getting the ID of the pressed button
var row = $(this).closest("tr").get(0);
/****AJAX Function*********/
$.post('/products/delete', {id:id}, function(data) {
if(data == 1){ //In case if data is deleted
var oTable = $('#table_id').dataTable(); // JQuery dataTable function to delete the row from the table
oTable.fnDeleteRow(oTable.fnGetPosition(row));// JQuery dataTable function to delete the row from the table
// oTable.fnDraw(true);
}
else
alert(data);
});
});
});
回答by dxpkumar
// Delete Row from dataTable - START //
$('body').on('click', 'i.DeleteRow', function() {
DeletedRow = $(this).parents('tr');
});
$('body').on('click', '.btnYES', function(){
console.log('DeletedRow:', DeletedRow);
$('#unitsTableDisplay').DataTable().row(DeletedRow).remove().draw();
})
// Delete Row from dataTable - END //
回答by Vahap Gencdal
$(document).ready(function () {
$('#add-new-button').on('click',function(){
var rData = [
test1,
test1,
'<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
'<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
];
$('#dataTable').DataTable().row.add(rData).draw(false);
});
$('#dataTable').on('click', '.update', function () {
var pageParamTable = $('#dataTable').DataTable();
var tableRow = pageParamTable.row($(this).parents('tr'));
var rData = [
test1,
test1,
'<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
'<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
];
pageParamTable
.row( tableRow )
.data(rData)
.draw();
});
$('#dataTable').on('click', '.delete', function () {
var pageParamTable = $('#dataTable').DataTable();
var tableRow = pageParamTable.row($(this).parents('tr'));
pageParamTable.row( tableRow ).remove().draw();
});
});
in this code you can find delete, add and update row from a DataTable it works for our peoject
在此代码中，您可以从适用于我们项目的 DataTable 中找到删除、添加和更新行
