jQuery数据表 - 如何添加编辑和删除选项 [英] jquery dataTables - how to add an edit and delete option
问题描述
我有以下代码： http://jsfiddle.net/5ooyertu/1/
现在，表格正在通过服务器端正确填充，我的分页工作正常。但我想添加删除和编辑行的功能。我想添加一个名为Actions的列，它有两个用于编辑的方法，另一个用于删除方法。
在使用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]。 +< / a>< p> ; button class ='btn btn-xs btn-primary'> Edit< / button>& nbsp;< / td>）;
tr.append（< button class ='btn btn-xs btn-primary'onclick ='delete（+ data [i] .id +，+ data [i] .pid +） ;'>删除< /按钮>< / 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'>编辑< /按钮>& nbsp;< / td>） ;
tr.append（< button class ='btn btn-xs btn-primary'onclick ='delete（+ data [i] .id +，+ data [i] .pid +， true）;'>删除< /按钮>< / td>）
}
}
从上面的代码示例中可以看到，在我的超链接中，我需要从每行传递几条数据，作为查询字符串的一部分（在编辑的情况下）或只需将它们作为参数传递给另一个名为delete的JavaScript函数，该函数与此dataTable位于同一个文件中。这是有条件的......这意味着，超链接将根据grp是真/假而改变。
我想知道如何改变填充dataTable的逻辑现在包含这两个超链接？
我发现这个链接： http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-编辑 - 删除＃但代码没有为我工作，我想我现在读的地方fnRender方法已被弃用。
如果您有任何建议，我会很感激。
编辑1
将代码更改为如下所示：
$（document）.ready（function（）{
var selected = DataTable（{
serverSide：true，
ordering：false，
aLengthMenu：[];
$（'＃users'
[10,25,50,100，-1]，
[10,25,50,100，全部]
]，
ajax： （$ .inArray（data.DT_RowId，selected）！== -1）{
$（row）.addClass（'selected'）;
列
{data：id，searchable：false}，
{数据：名称，可搜索：真正的}，
{data：pid，searchable：true}，
{data：destination ：true}，
{mRender：function（data，type，row）{
return'< a href = add.html？id =''+ row [0] +'> ;编辑< / a>';}
}
]
}）;
}）;
注意渲染的调用引用。我还在我的html代码中添加了一个新列。我确实有一个超链接！但不幸的是，这个链接是不正确的。行[0]返回未定义。此外，我仍然不知道如何改变我创建的超链接，取决于字段目标的值。
例如，我想要做这样的事情：（伪代码）
if row [i] .destination ='Group'then
{mRender：function（data，type，row）{
return'< a href = group.html？id =''+ row [0] +' >编辑< / a>';}
}
else
{mRender：function（data，type，row）{
return'< a href = add .html？id ='+ row [0] +'>编辑< / a>';}
}
结束
编辑2
此代码似乎有效：
$（document）.ready（function（）{
var selected = [];
$（'＃users'）.DataTable（{
serverSide：true，
ordered：false，
aLengthMenu：[
[10，25 ，50,100，-1]，
[10,25,50,100，全部]
]，
ajax：/ cgi-bin / test，
rowCallback：function（row，data）{
if（$ .inArray（data.DT_RowId，selected） ！== -1）{
$（row）.addClass（'selected'）;
列
{data：id，searchable：false}，
{数据：名称，可搜索：真正的}，
{data：pid，searchable：true}，
{data：destination ：true}，
{mRender：function（data，type，row）{
return'< a href = add.html？id ='+ row.id +'> Edit< a>';}
}
]
}）;
现在我只需要弄清楚如何使它成为有条件的。
这里假设有以下示例：
它不应该很难适应你的需求。检查 栏目 的使用情况
var datatablesOptions = {
serverSide：true，
ajaxSource：'[yourAjaxUrl]'，
processing：true，
columns：[
{bVisible = false}，//假设这是行的id，所以不要显示它
null，
null，
null，
/ * EDIT * / {
mRender：function（data，type，row）{
return'< a class =table-编辑data-id ='+ row [0] +'> EDIT< / a>'
}
}
/ * DELETE * / {
mRender：函数（data，type，row）{
return'< a class =table-deletedata-id ='+ row [0] +'> DELETE< / a>'
}
}，
]
};
$（'＃table'）。dataTable（datatablesOptions）;
编辑
如果您需要根据目的地有条件地渲染不同的东西，您可以这样做
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 {
//一些错误，告诉目标值是意外的
}
}
I have the following code: 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.
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>")
}
}
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.
I am wondering how I can change the logic that populates the dataTable to now include these two hyper-links?
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.
EDIT 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)
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
This code seems to work:
$(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.
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
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);
EDIT
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数据表 - 如何添加编辑和删除选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
