Javascript jquery dataTables - 如何添加编辑和删除选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30627026/
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
jquery dataTables - how to add an edit and delete option
提问by dot
I have the following code: http://jsfiddle.net/5ooyertu/1/
我有以下代码：http: //jsfiddle.net/5ooyertu/1/
Right now, the table is being populated properly via the server side, and my paging works. But I'd like to add the ability to delete and or edit a row. I would like to add a column called "Actions" that has two - one to an edit method... and the other to a delete method.
现在，该表正在通过服务器端正确填充，并且我的分页工作正常。但我想添加删除和/或编辑行的功能。我想添加一个名为“Actions”的列，它有两个——一个是编辑方法……另一个是删除方法。
Prior to using dataTables, I had some JavaScript logic that would iterate through an array of records from an Ajax, call and populate a regular table with the data, and the appropriate hyper-links.
在使用 dataTables 之前，我有一些 JavaScript 逻辑可以遍历来自 Ajax 的记录数组，调用并使用数据和适当的超链接填充常规表。
for (var i=0; i < data.length; i++) {
if (data[i].grp == 0) {
tr.append("<a href='add.html?id=" + data[i].id + "&pid=" + data[i].pid + "&destination=" + data[i].destination + "&name=" + data[i].name.replace("'", "%27") + "'</a><button class='btn btn-xs btn-primary'>Edit</button> </td>");
tr.append("<button class='btn btn-xs btn-primary' onclick='delete(" + data[i].id + "," + data[i].pid + ");'>Delete</button></td>")
} else {
tr.append("<a href='update_group.html?id=" + data[i].id + "&pid=" + data[i].pid + "&destination=" + data[i].destination + "&name=" + data[i].name.replace("'", "%27") + "'</a><button class='btn btn-xs btn-primary'>Edit</button> </td>");
tr.append("<button class='btn btn-xs btn-primary' onclick='delete(" + data[i].id + "," + data[i].pid + ",true);'>Delete</button></td>")
}
}
As you can see from the above code example, in my hyperlinks, I need to pass a few pieces of data from each row, either as a part of the query string (in the case of edits) or just pass them as parameters to another JavaScript function called "delete" that lives in the same file as this dataTable. And it's conditional... meaning, the hyperlinks will change depending on whether grp is true / false.
从上面的代码示例中可以看出，在我的超链接中，我需要从每一行传递几条数据，作为查询字符串的一部分（在编辑的情况下）或将它们作为参数传递给另一个与此数据表位于同一文件中的名为“删除”的 JavaScript 函数。它是有条件的……意思是，超链接将根据 grp 是否为真/假而改变。
I am wondering how I can change the logic that populates the dataTable to now include these two hyper-links?
我想知道如何将填充 dataTable 的逻辑更改为现在包含这两个超链接？
I found this link: http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete#But the code didn't work for me and I think I read somewhere that the fnRender method is deprecated now.
我找到了这个链接：http: //datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete#但代码对我不起作用，我想我在某处读到 fnRender 方法现在已被弃用。
If you have any suggestions, I'd appreciate it.
如果您有任何建议，我将不胜感激。
EDIT 1
编辑 1
I tried to change my code to look like this:
我试图将我的代码更改为如下所示：
$(document).ready(function() {
var selected = [];
$('#users').DataTable( {
"serverSide": true,
"ordering": false,
aLengthMenu: [
[10, 25, 50, 100, "-1"],
[10, 25, 50, 100, "All"]
],
"ajax": "/cgi-bin/test",
"rowCallback": function( row, data ) {
if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
$(row).addClass('selected');
}
},
"columns":
[
{ "data": "id" ,"searchable":false},
{ "data": "name","searchable":true},
{ "data": "pid", "searchable":true },
{ "data": "destination", "searchable":true },
{"mRender": function ( data, type, row ) {
return '<a href=add.html?id="'+row[0]+'">Edit</a>';}
}
]
} );
} );
Notice the call reference to render. I also added a new column to my table in my html code. I do get a hyperlink! But unfortunately, the link is incorrect. row[0] returns "undefined". Also, I still don't know how to change the hyperlink i create depending on the value of the field "destination". So for example, I want to do something like this: (pseudocode)
注意渲染的调用引用。我还在我的 html 代码中向我的表中添加了一个新列。我确实得到了一个超链接！但不幸的是，链接不正确。row[0] 返回“未定义”。此外，我仍然不知道如何根据“目的地”字段的值更改我创建的超链接。例如，我想做这样的事情：（伪代码）
if row[i].destination = 'Group' then
{"mRender": function ( data, type, row ) {
return '<a href=group.html?id="'+row[0]+'">Edit</a>';}
}
else
{"mRender": function ( data, type, row ) {
return '<a href=add.html?id="'+row[0]+'">Edit</a>';}
}
end
EDIT 2
编辑 2
This code seems to work:
这段代码似乎有效：
$(document).ready(function() { var selected = []; $('#users').DataTable( {
$(document).ready(function() { var selected = []; $('#users').DataTable( {
"serverSide": true,
"ordering": false,
aLengthMenu: [
[10, 25, 50, 100, "-1"],
[10, 25, 50, 100, "All"]
],
"ajax": "/cgi-bin/test",
"rowCallback": function( row, data ) {
if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
$(row).addClass('selected');
}
},
"columns":
[
{ "data": "id" ,"searchable":false},
{ "data": "name","searchable":true},
{ "data": "pid", "searchable":true },
{ "data": "destination", "searchable":true },
{"mRender": function ( data, type, row ) {
return '<a href=add.html?id='+row.id+'>Edit</a>';}
}
]
} );
now I just need to figure out how to make it conditional.
现在我只需要弄清楚如何使其成为有条件的。
回答by Claudio Redi
Here you have an example assuming the following:
这里有一个假设如下的示例：
- Ajax population
- Data row is an array containing 4 columns
- Your data row contains the id on first column
- You don't display id on table so you hide it
- 阿贾克斯人口
- 数据行是一个包含 4 列的数组
- 您的数据行包含第一列的 id
- 你不在桌子上显示 id 所以你隐藏它
It shouldn't be hard to adapt it to your needs. Check columnsusage
让它适应您的需求应该不难。检查columns使用情况
var datatablesOptions = {
"serverSide": true,
"ajaxSource": '[yourAjaxUrl]',
"processing": true,
"columns": [
{ bVisible = false }, // assume this is the id of the row, so don't show it
null,
null,
null,
/* EDIT */ {
mRender: function (data, type, row) {
return '<a class="table-edit" data-id="' + row[0] + '">EDIT</a>'
}
}
/* DELETE */ {
mRender: function (data, type, row) {
return '<a class="table-delete" data-id="' + row[0] + '">DELETE</a>'
}
},
]
};
$('#table').dataTable(datatablesOptions);
EDIT
编辑
In case you need to conditional render something different depending on destinationyou could do
如果您需要有条件地呈现不同的东西，这取决于destination您可以做什么
mRender: function (data, type, row) {
if (row.destination == "d1") {
return '<a href="destination1?id=' + row.id + '">EDIT</a>'
}else (row.destination == "d2"){
return '<a href="destination2?id=' + row.id + '">EDIT</a>'
} else {
// some error telling that destination value is unexpected
}
}
回答by Basheer AL-MOMANI
take look at my Snippet of Columns part
看看我的列片段部分
columns: [
{ 'data': 'LastName' },
{ 'data': 'FirstMidName' },
{ 'data': 'EnrollmentDate' },
{// this is Actions Column
mRender: function (data, type, row) {
var linkEdit = '@Html.ActionLink("Edit", "Edit", new {id= -1 })';
linkEdit = linkEdit.replace("-1", row.ID);
var linkDetails = '@Html.ActionLink("Details", "Details", new {id= -1 })';
linkDetails = linkDetails.replace("-1", row.ID);
var linkDelete = '@Html.ActionLink("Delete", "Delete", new {id= -1 })';
linkDelete = linkDelete.replace("-1", row.ID);
return linkDetails + " | " + linkEdit + " | " + linkDelete;
}
}
and this is snippet from my Json
这是我的 Json 的片段
{ID: 1, LastName: "Alexander", FirstMidName: "Carson", EnrollmentDate: "/Date(1126386000000)/",…}
Note thate I'm using ASP.Net MVC so Html.ActionLinkjust returning a Link
请注意，我使用的是 ASP.Net MVC 所以Html.ActionLink只返回一个链接
and the results are
结果是
回答by CrazyPaste
DataTables has support for Edit and Delete operations. Delete is fairly simple, like this:
DataTables 支持编辑和删除操作。删除相当简单，如下所示：
$('#id tbody').on('click', function(){
table
.row($(this).parents('tr'))
.remove()
.draw();
});
Check out this example: https://editor.datatables.net/examples/simple/inTableControls.html
看看这个例子：https: //editor.datatables.net/examples/simple/inTableControls.html
