我一直在寻找最近几个小时，不幸的是我似乎找不到一个如何用动作编辑填充数据表并使用.net和MVC删除链接列的示例。
以下是我到目前为止，如何添加操作链接？我错过了什么？
<script type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable({
bProcessing: true,
sAjaxSource: '@Url.Action("Index1", "Default1")'
});
});
</script>
<div id="container">
<div id="demo">
<table id="myDataTable">
<thead>
<tr>
<th>
RoleId
</th>
<th>
RoleName
</th>
<th>
UserId
</th>
<th>
UserName
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
我想在最后一栏添加;
<td>
@Html.ActionLink("Edit", "Edit", new {id=item.PrimaryKey}) |
@Html.ActionLink("Details", "Details", new { id=item.PrimaryKey }) |
@Html.ActionLink("Delete", "Delete", new { id=item.PrimaryKey })
</td>
但无法弄清楚该怎么做。
答案 0 :(得分：17)
您可以将aoColumns属性与fnRender函数一起使用来添加自定义列。
您无法使用Html.ActionLink助手，因为您必须从javascript动态生成链接。 aoColumns属性可以帮助您配置每个列，如果您不想配置特定列，只需传递null，否则您必须传递object({})。
fnRender函数可帮助您使用其他列的值创建链接。您可以使用oObj.aData获取其他列的值，例如id来生成链接。
<script type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable({
bProcessing: true,
sAjaxSource: '@Url.Action("Index1", "Default1")',
aoColumns: [
null, // first column (RoleId)
null, // second column (RoleName)
null, // third (UserId)
null, // fourth (UserName)
{ // fifth column (Edit link)
"sName": "RoleId",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj)
{
// oObj.aData[0] returns the RoleId
return "<a href='/Edit?id="
+ oObj.aData[0] + "'>Edit</a>";
}
},
{ }, // repeat the samething for the details link
{ } // repeat the samething for the delete link as well
]
});
});
</script>
您从服务器返回的JSON输出中的另一个重要事项，对于编辑列，您还必须返回类似1,2,3或其他内容。
参考：http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html
答案 1 :(得分：7)
fnRender已被折旧且mRender未收到相同的参数。
这对我有用，请遵循@Mark示例：
{ // fifth column (Edit link)
"sName": "RoleId",
"bSearchable": false,
"bSortable": false,
"mRender": function (data, type, full) {
var id = full[0]; //row id in the first column
return "<a href='javascript:alert("+id+");'>Edit</a>";
}
答案 2 :(得分：3)
其他响应正在使用旧版DataTables语法。对于DataTables 1.10+，columnDefs的语法如下：
$('#MyDataTable').DataTable({
"processing": true,
"ajax": '@Url.Action("Index1", "Default1")',
"columnDefs": [
{"targets": [4], "data": "RoleId", "render" : function(data, type, full) { return '@Html.ActionLink("Edit", "Edit", new {id = "replace"})'.replace("replace", data);}},
{}, //repeat
{} //repeat
]
});
注意：为了在ActionLink中获取Model，我使用JavaScript replace()将字符串“replace”替换为data，后者在columnDef中定义为“RoleId” / p>
答案 3 :(得分：2)
aoColumnDefs的另一种方法
$('#myDataTable').dataTable({
bProcessing: true,
sAjaxSource: '@Url.Action("Index1", "Default1")'
aoColumnDefs: [{
"aTargets": [4], //Edit column
"mData": "RoleId", //Get value from RoleId column, I assumed you used "RoleId" as the name for RoleId in your JSON, in my case, I didn't assigned any name in code behind so i used "mData": "0"
"mRender": function (data, type, full) {
return '<a href=' +
'@Url.Action("Edit", "Default1")?RoleId=' + data +
'>Edit</a>';
}
},{
"aTargets": [5], //Detail column
"mData": "RoleId",
"mRender": function (data, type, full) {
return '<a href=' +
'@Url.Action("Detail", "Default1")?RoleId=' + data +
'>Detail</a>';
}
},{
"aTargets": [6], //Delete column
"mData": "RoleId",
"mRender": function (data, type, full) {
return '<a href=' +
'@Url.Action("Delete", "Default1")?RoleId=' + data +
'>Delete</a>';
}
}]
});
答案 4 :(得分：0)
我已经使用了提到的数据表1.10+的代码，但是在数据表单元格而不是链接中获取字符串。
@Html.ActionLink("Edit", "Edit", new {id = "294"})
注意在解决方案上使用和旧的mvc3版本 这是我的javascript：
$(document).ready(function () {
var tenantid = $('#tenantid').text();
$("#title").html("<h1>User List for TenantID: "+ tenantid + " </h1>");
var oTable = $('#list').DataTable({
"serverSide": true,
"ajax": {
"type": "POST",
"url": '/User/DataHandler',
"contentType": 'application/json; charset=utf-8',
'data': function (data)
{
data.ID = tenantid;
return data = JSON.stringify(data);
}
},
"dom": 'lfrtiSp',
"processing": true,
"paging": true,
"deferRender": true,
"pageLength": 10,
"lengthMenu": [5, 10, 25, 50, 75, 100],
"columnDefs": [
{ "targets": [-1], "data": "UserID", "render": function (data, type, row, meta) { return '@Html.ActionLink("Edit", "Edit", new {id = "replace"})'.replace("replace", row.UserID); } }
],
"columns": [
{ "data": "UserID", "orderable": true },
{ "data": "UserGUID", "orderable": false },
{ "data": "UserName", "orderable": true },
{ "data": "UserEMAil", "orderable": true },
{ "data": "UserIsDeleted", "orderable": true },
{ "data": "Action", "orderable": false }
],
"order": [0, "asc"]
});
});
答案 5 :(得分：0)
我找到了另一种方法，可以使用此post（olivier评论）的帮助来获取此动作链接：
您在Javascript中重复使用的表节点中添加数据标记属性
在cshtml中：
<table class="table table-striped display" id="list"
data-url-edit="@Url.Action("Edit","User", new { id = "replace"})"
在columndefs区域的* .js文件中：
"columnDefs": [
{
"targets": [-1], "data": "UserID", "render": function (data, type, row, meta) {
return '<a href="' + $('#list').data('url-edit').replace("replace", row.UserID) + '">Edit</a> | '
+ '<a href="' + $('#list').data('url-details').replace("replace", row.UserID) + '">Details</a> | '
答案 6 :(得分：0)
这对我有用
将其添加为“编辑/操作”列
rsync -rtvvv /sauce/folder/ admin@xxx.xxx.xxx.xxx:/dest/folder/