jquery datatables actionlink 如何添加 [英] jquery datatables actionlink how to add

问题描述

最近几个小时我一直在搜索，但不幸的是，我似乎找不到一个示例，说明如何使用 .net 和 MVC 使用操作编辑和删除链接列填充数据表.

这是我目前所拥有的，如何添加操作链接?我错过了什么?

<div id="容器"><div id="演示"><table id="myDataTable"><头><tr><th>角色 ID</th><th>角色名称</th><th>用户身份</th><th>用户名</th></tr></thead></tbody>

我想在最后一列添加这个；

 @Html.ActionLink("Edit", "Edit", new {id=item.PrimaryKey}) |@Html.ActionLink("Details", "Details", new { id=item.PrimaryKey }) |@Html.ActionLink("删除", "删除", new { id=item.PrimaryKey })</td>

但是不知道怎么做.

解决方案

您可以使用 aoColumns 属性和 fnRender 函数来添加自定义列.您不能使用 Html.ActionLink 助手，因为您必须从 javascript 动态生成链接.aoColumns 属性可帮助您配置每一列，如果您不想配置特定列，只需传递 null 否则您必须传递一个 object({}).

fnRender 函数可帮助您使用其他列的值创建链接.您可以使用 oObj.aData 获取其他列的值，例如 id 以生成链接.

您从服务器返回的 JSON 输出中的另一个重要内容，对于编辑列，您还必须返回类似 1、2、3 或任何内容.

参考:http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html

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.

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.

解决方案

You could use the aoColumns property with fnRender function to add custom columns. You can't use the Html.ActionLink helper because you have to generate the links dynamically from the javascript. The aoColumns property helps you to configure each columns, if you don't want to configure a particular column just pass null else you have to pass an object({}).

The fnRender function helps you to create the links using the values of the other columns. You can use the oObj.aData to get the values of the other column like id to generate the links.

<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.

Reference: http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax-inlinebuttons.html

这篇关于jquery datatables actionlink 如何添加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！