jquery datatables actionlink如何添加

Question

我一直在寻找最近几个小时,不幸的是我似乎无法找到一个如何用动作编辑填充数据表并使用.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>

但无法弄清楚该怎么做.

Answer 1

您可以使用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

Answer 2

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>";
   }