从Ajax调用中删除DataTables中的行 [英] Removing rows from DataTables from a Ajax call
问题描述
我有一个DataTables（datatables.net）表设置，它有一个自定义列，我有不同类型操作的图标。
I have a DataTables (datatables.net) table setup which have a custom column where I have icons for different kind of actions.
其中一个动作是删除，我不想将数据重新加载到表中，所以我想知道是否有内置的任何函数用于删除数据表本地行（所以我的脚本删除服务器上的实际帖子，然后我可以删除我的数据表中的同一行）。
One of these actions is deletion and I don't want to reload the data into the table so I was wondering if there was any function built-in for removal of datatable rows locally (so my script deletes the actual post on the server and then I can remove the same row in my datatable).
经过一番研究后我发现了fnDeleteRow，但我不知道如何使用它。在我的脚本中，我有一个ajax调用，并且在成功事件中我想删除该行，但是我无法确定哪个行有点击该链接。以下是我现在所处的位置：
After some research I've found "fnDeleteRow" but I don't know how to use it. In my script I have an ajax call and on the success event I want to delete the row but I have trouble identifying what row that had the link was clicked. This below is where I am at the moment:
function Delete(id) {
$.ajax({
url: "ajax/ajax.php",
type: "POST",
data: {
action: "delete",
id: id
},
success: function(response){
oTable = $('#table').DataTable();
var row = oTable.closest('tr');
var nRow = row[0];
oTable.DataTable().fnDeleteRow(nRow);
},
error: function (response) {
alert("Something went wrong.");
console.log(response);
},
});
};
这会在控制台中打印以下内容：
This prints the following in the console:
TypeError: oTable.closest is not a function
I这是jQuery的新手，不知道如何实现这个问题。你们有谁有任何想法？我猜测即使我在成功事件中的脚本具有正确的语法，也不会知道哪一行有第一个点击的按钮/链接。我如何确保它呢？
I'm pretty new to jQuery and don't know how to implement this to my case. Do anyone of you have any idea? I'm guessing that even if my script within the success event had the right syntax, it won't have a clue what row had the button/link that was clicked at the first place. How do I ensure it does?
编辑：
这是我的数据表的启动方式，以防它混淆：
This is how my datatable is initiated, in case it is confusing:
function DrawTable() {
$('#table').DataTable( {
"cache": false,
"columnDefs": [
{
"targets": [ 0, 1 ],
"visible": false,
"searchable": true
}
]
} );
}
我被告知要使用jsfiddle，所以我上传了一个。从未使用过此网站，我的标记已生成，但我手动执行了一次。
https://jsfiddle.net/nqeqxzub/9/
I was told to use a jsfiddle, so I've uploaded one. Never used this site and my markup is generated but I manually did one. https://jsfiddle.net/nqeqxzub/9/
推荐答案
也许已经太晚了，但无论如何我都会说。在网上搜索了两天之后，我找到了一个没有任何DataTable函数的简单解决方案
Maybe it's too late, but I will put it anyway. After two days of searching all over the web, I find a simple solution without any DataTable functions
<td>
<button type="button" id="{{$lead->id}}" name="{{$lead->id}}" onclick="deleteRecord(this.id,this)" data-token="{{ csrf_token() }}">Delete</button>
</td>
上面这个单元格有一个onclick函数，它带有2个参数，第一个参数（这个.id）是按钮的id（来自DB，将传递给ajax以更新DB），第二个（this）是按钮本身的索引（稍后我们将提取索引）从它开始的行）
this cell above has an onclick function that takes 2 parameters, the first one (this.id) is the id of the button (that comes from the DB, and will be passed to ajax to update the DB), and the second one (this) which is the index of the button itself (later we will extract the index of the row from it)
function deleteRecord(mech_id,row_index) {
$.ajax({
url:"{{action('MechanicController@destroy')}}",
type: 'get',
data: {
"id": mech_id,
"_token": token,
},
success: function ()
{
var i = row_index.parentNode.parentNode.rowIndex;
document.getElementById("table1").deleteRow(i);
}
});
}
现在在成功函数中，我使用了2行：
第一个是从按钮中提取行索引（2个父项，因为我们必须从按钮的父节点传递，在这种情况下，然后是行的父节点）
Now in the success function, I have used 2 lines: the first one is to extract the row index from the button (2 parents because we have to pass from the parent of the button, in this case , and then the parent of the which is the row)
第二行是table1的索引的简单删除行，这是我的表的名称
the second line is a simple delete row of our index from table1 which is the name of my table
这篇关于从Ajax调用中删除DataTables中的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
