jquery dataTables - 如何添加编辑和删除选项 [英] jquery dataTables - how to add an edit and delete option
问题描述
我有以下代码:http://jsfiddle.net/5ooyertu/1/
现在，表格正在通过服务器端正确填充，我的分页工作正常.但我想添加删除和/或编辑行的功能.我想添加一个名为Actions"的列.有两个 - 一个是编辑方法......另一个是删除方法.
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.
在使用 dataTables 之前，我有一些 JavaScript 逻辑，可以遍历来自 Ajax 的记录数组，使用数据和适当的超链接调用和填充常规表.
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.
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>")
}
}
从上面的代码示例中可以看出，在我的超链接中，我需要从每一行传递几条数据，作为查询字符串的一部分(在编辑的情况下)或将它们作为另一个名为delete"的 JavaScript 函数的参数与此数据表位于同一文件中.而且它是有条件的……意思是，超链接会根据 grp 是否为真/假而改变.
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.
我想知道如何将填充 dataTable 的逻辑更改为现在包含这两个超链接?
I am wondering how I can change the logic that populates the dataTable to now include these two hyper-links?
我找到了这个链接:http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete# 但代码对我不起作用我想我在某处读到 fnRender 方法现在已被弃用.
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.
如果您有任何建议，我将不胜感激.
If you have any suggestions, I'd appreciate it.
编辑 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>';}
}
]
} );
} );
注意渲染的调用引用.我还在我的 html 代码中向我的表中添加了一个新列.我确实得到了一个超链接！但不幸的是，链接不正确.row[0] 返回未定义".此外，我仍然不知道如何根据字段目的地"的值更改我创建的超链接.例如，我想做这样的事情:(伪代码)
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)
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
编辑 2
此代码似乎有效:
$(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 I'm going to make it conditional.
推荐答案
这里有一个假设如下的示例:
Here you have an example assuming the following:
- 阿贾克斯人口
- 数据行是一个包含 4 列的数组
- 您的数据行包含第一列的 id
- 您没有在表格上显示 id，因此您将其隐藏
让它适应您的需求应该不难.检查columns用法
It shouldn't be hard to adapt it to your needs. Check columns usage
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);
编辑
如果您需要根据 destination 有条件地呈现不同的内容，您可以这样做
In case you need to conditional render something different depending on destination you could do
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
}
}
这篇关于jquery dataTables - 如何添加编辑和删除选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
