7

我一直在搜索过去几个小时，不幸的是，我似乎找不到如何使用 .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>

但无法弄清楚如何做到这一点。

4

7 回答 7

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

于 2012-06-29T13:21:24.113 回答
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>";
   }
于 2014-06-16T18:57:25.737 回答
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 中获取模型，我使用JavaScript replace()将字符串“replace”替换为data，该字符串在前面的 columnDef 中定义为“RoleId”

于 2017-01-23T18:27:08.080 回答
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>';
                     }
                  }]
});
于 2014-11-10T09:39:34.717 回答
1

我使用这篇文章的帮助（olivier 评论）找到了另一种让这个 actionlink 工作的方法：

您在 Javascript 中重用的表节点中添加数据标签属性

在 cshtml 中：

<table class="table table-striped display" id="list" 
            data-url-edit="@Url.Action("Edit","User", new { id = "replace"})"

在 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> | '
于 2017-08-28T15:18:50.993 回答
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"]

    });
 });
于 2017-08-28T14:09:16.790 回答
0

这对我有用

将此添加为您的编辑/操作列

{ "data": "YOURIDKEYCOLUMN",
  "render": function (data) {
   return "<a href='/YOUREDITINGURL/Edit/"+data+"'>Edit</a>"
   }
于 2018-10-09T13:39:24.910 回答