jquery datatables actionlink 如何添加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11256864/
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 actionlink how to add
提问by nitefrog
I have been searching for the last few hours, and unfortunately I cannot seem to find an example of how to populate a datatable with an action edit and delete link column using .net and MVC.
最近几个小时我一直在搜索，不幸的是，我似乎找不到一个示例，说明如何使用 .net 和 MVC 使用操作编辑和删除链接列填充数据表。
Here is what I have so far, how do I add an action link? What am I missing?
这是我目前所拥有的，如何添加操作链接？我错过了什么？
<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>
I want to add this in the last column;
我想在最后一栏中添加它；
<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>
But cannot figure out how to do it.
但无法弄清楚如何做到这一点。
回答by VJAI
You could use the aoColumnsproperty with fnRenderfunction to add custom columns.
You can't use the Html.ActionLinkhelper because you have to generate the links dynamically from the javascript. The aoColumnsproperty helps you to configure each columns, if you don't want to configure a particular column just pass nullelse you have to pass an object({}).
您可以使用aoColumns带有fnRender函数的属性来添加自定义列。您不能使用Html.ActionLink帮助程序，因为您必须从 javascript 动态生成链接。该aoColumns属性可帮助您配置每一列，如果您不想配置特定列，只需通过null其他列，您必须通过object({}).
The fnRenderfunction helps you to create the links using the values of the other columns. You can use the oObj.aDatato get the values of the other column like idto generate the links.
该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>
Another important thing in the JSON output you return from the server, for the edit column also you have to return something like 1, 2, 3 or anything.
您从服务器返回的 JSON 输出中的另一个重要内容，对于编辑列，您还必须返回 1、2、3 或任何内容。
Reference: http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html
参考：http: //jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html
回答by Fernando JS
The fnRender has been depreciated and the mRender doesn't received the same parameters.
fnRender 已折旧，而 mRender 未收到相同的参数。
This works for me, follow the @Mark example:
这对我有用，请按照@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>";
}
回答by devlin carnate
The other responses are using legacy DataTables syntax. For DataTables 1.10+, the syntax for columnDefsis as follows:
其他响应使用旧的 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
]
});
note: In order to get the Model in the ActionLink, I'm using JavaScript replace()to replace the string "replace" with data, which is defined as "RoleId" earlier in the columnDef
注意：为了在 ActionLink 中获取模型，我使用JavaScript replace()将字符串“replace”替换为 ，该字符串data在前面的 columnDef 中定义为“RoleId”
回答by bsting
Another approach with aoColumnDefs
使用 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>';
}
}]
});
回答by user8527840
I have used mentioned code for datatable 1.10+ but get string in the datatable cell instead of the link.
我使用了提到的数据表 1.10+ 代码，但在数据表单元格中获取字符串而不是链接。
@Html.ActionLink("Edit", "Edit", new {id = "294"})
note that using and old mvc3 version on the solution Here my javascript:
请注意，在解决方案上使用旧的 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"]
});
});
回答by user8527840
I found another way to get this actionlink works using help from this post(olivier comments):
我找到了另一种方法来使用这篇文章的帮助来获得这个 actionlink 的工作（奥利维尔评论）：
you add data tags attributes in the table node that you reuse in the Javascript
您在 Javascript 中重用的表节点中添加数据标签属性
in cshtml:
在 cshtml 中：
<table class="table table-striped display" id="list"
data-url-edit="@Url.Action("Edit","User", new { id = "replace"})"
in your *.js file in ths columndefs area:
在 ths 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> | '
回答by Naveed Ahmed
this works for me
这对我有用
add this as your Edit / Action column
将此添加为您的“编辑/操作”列
{ "data": "YOURIDKEYCOLUMN",
"render": function (data) {
return "<a href='/YOUREDITINGURL/Edit/"+data+"'>Edit</a>"
}
