我有以下代码：http://jsfiddle.net/5ooyertu/1/
目前，表格通过服务器端正确地填充数据，并且我的分页功能正常工作。但我想添加删除或编辑行的功能。我想添加一个名为“操作”的列，其中包含两个链接 - 一个链接到编辑方法...另一个链接到删除方法。
在使用dataTables之前，我有一些JavaScript逻辑，可以迭代Ajax中记录的数组，调用并填充常规表格的数据和适当的超链接。
如上述代码示例所示，我需要传递每行的一些数据，无论是作为查询字符串的一部分（在编辑的情况下）还是只是将它们作为参数传递给与此dataTable位于同一文件中的另一个名为“delete”的JavaScript函数。而且这是有条件的...意思是，超链接会根据grp是否为真/假而改变。
我想知道如何更改填充dataTable的逻辑以包括这两个超链接？
我发现了这个链接：http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete# 但代码对我没起作用，而且我觉得我在某个地方读到fnRender方法现已不推荐使用。
如果您有任何建议，我会非常感激。
编辑1:
我试图将我的代码更改为以下内容:
请注意调用render函数。我还在我的HTML代码中向我的表格添加了一列。我确实得到了超链接！但不幸的是，链接是错误的。row [0]返回“undefined”。而且，我仍然不知道如何根据字段“destination”的值更改我创建的超链接。 因此，例如，我想做这样的事情：（伪代码）
现在我只需要想出如何将其变成有条件的。
在使用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>")
}
}
如上述代码示例所示，我需要传递每行的一些数据，无论是作为查询字符串的一部分（在编辑的情况下）还是只是将它们作为参数传递给与此dataTable位于同一文件中的另一个名为“delete”的JavaScript函数。而且这是有条件的...意思是，超链接会根据grp是否为真/假而改变。
我想知道如何更改填充dataTable的逻辑以包括这两个超链接？
我发现了这个链接：http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete# 但代码对我没起作用，而且我觉得我在某个地方读到fnRender方法现已不推荐使用。
如果您有任何建议，我会非常感激。
编辑1:
我试图将我的代码更改为以下内容:
$(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>';}
}
]
} );
} );
请注意调用render函数。我还在我的HTML代码中向我的表格添加了一列。我确实得到了超链接！但不幸的是，链接是错误的。row [0]返回“undefined”。而且，我仍然不知道如何根据字段“destination”的值更改我创建的超链接。 因此，例如，我想做这样的事情：（伪代码）
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>';}
}
]
});
现在我只需要想出如何将其变成有条件的。
row是什么吗？顺便说一下：我在我的代码中做了一些更改，以允许通过 ajax 调用执行删除/编辑操作的可能性。你应该为table-edit和table-delete创建一个点击回调函数。 - Claudio Redi