使用 jquery 定义如何在基于数据表插件的网格中添加自定义链接按钮

Question

使用数据 table 插件并尝试添加两个链接编辑和删除当我点击链接时它应该重定向到其他页面。

请帮我解决这个问题..在此先感谢...

请找到我的代码片段：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="@Url.Content("~/Areas/Admin/content/js/bootstrap.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Areas/Admin/content/js/plugins/datatables/jquery.dataTables.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Areas/Admin/content/js/plugins/datatables/dataTables.bootstrap.js")" type="text/javascript"></script>
<div class="box-body table-responsive">
            <table id="example1" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>EmployeeID</th>
                        <th>Description</th>
                        <th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div><!-- /.box-body -->
<script>
var serviceRootUrl = 'http://localhost:49425/Services/MyWcfService.svc/';

$(document).ready(function () {

    var oTable = $('#example').dataTable({

        "bJQueryUI": true,
        "bProcessing": true,

        "bServerSide": true,
        "sAjaxSource": serviceRootUrl + "EmployeeListResponseCollection",                
         "aoColumns": [
                    { data: "EmployeeID" },
                    { data: "Description" },
                    {
                        data: null,
                        "sClass": "center",
                        "sDefaultContent": '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
                    }
            ]                


    });

});

Answer 1

使用 mdata 和 mrender 作为数据表网格的附加字段或列。在脚本中使用这个 snap 代码，它应该可以工作。

$(document).ready(function () {
var oTable = $('#example').dataTable({
        "bJQueryUI": true,
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": serviceRootUrl + "EmployeeListResponseCollection",                
         "aoColumns": [
                    { "mData": "EmployeeID" },
                    { "mData": "Description" },
                    {
                "mData": "EmployeeID",
                "mRender": function (data, type, full) {
                    return '<a href="' + data + '">Edit</a>';
                }
            },
            {
                "mData": "EmployeeID",
                "mRender": function (data, type, full) {
                    return '<a href="' + data + '">Delete</a>';
                }
            }
            ]
    });
});

使用 jquery 定义如何在基于数据表插件的网格中添加自定义链接按钮

Using the jquery definition how can I add the custom links buttons in datatables plugin based grid

javascript

asp.net-mvc

datatable

jquery