如何添加多个CRUD'列到jquery datatables服务器端渲染?

时间:2018-06-06 20:45:28

标签: mvc.jquery.datatables

我在MVC示例中使用了服务器端jquery datatables分页。 vanilla示例显示了网格,没有用于编辑/详细信息/删除的其他列/链接。

我按照下面的示例进行了操作,并成功找到了一个编辑按钮,并将其成功导航到MVC编辑视图:



<script>

    $(document).ready(function () {

        if ($.fn.DataTable.isDataTable('#tblrtr')) {
            $('#tblrtr').dataTable().fnDestroy();
            $('#tblrtr').dataTable().empty();

        }

        var complete = $('#tblrtr').DataTable(
            {
                "serverSide": true,
                "destroy": true,
                "processing": true,
                "ajax":
                    {
                        url: "/ReportsToRecords/RTRList",
                        method: "POST"
                    },
                "columns": [
                    { "data": "id" },
                    { "data": "reportingId" },
                    { "data": "title" },
                    { "data": "name" },
                    { "data": "reportsToId" },
                    { "data": "employeeId" },

                    {
                        "title": "",
                        "data": "id",
                        "searchable": false,
                        "sortable": false,
                        "render": function (data, type, full, meta) {
                            @*return '<a href="@Url.Action("Edit","ReportsToRecords")?id=' + data + '" class="editRTR">Edit</a>'; }*@
                            return '<a class="btn btn-info" href="/ReportsToRecords/Edit/' + full.id + '">Edit</a>'; }
                    }



                ]
            }

        );

        /// Following code is for filter input to apply filter only on Enter
        var itm = $("#tblrtr_filter input")

        itm.unbind();
        itm.keyup(function (e) {
            //enter or tab
            if (e.keyCode == 13) {
                complete.search(this.value).draw();
            }
        });


    });
</script>
&#13;
&#13;
&#13;

我现在想要添加详细信息并删除导航按钮到相应的mvc视图。但是,如果我只是在数据列之后复制代码,并对该代码中的返回行进行适当的更改,则网格的呈现将停止工作。

似乎不喜欢定义多个按钮列。有没有人知道正确的语法,还添加了详细信息和删除按钮?我知道似乎有一个带弹出屏幕的可编辑数据表来执行此操作,但我正在尝试使用现有的mvc视图。

思想?

1 个答案:

答案 0 :(得分:0)

发现我必须将其更改为以下内容:

&#13;
&#13;
                        "render": function (data, type, full, meta) {  
                            return '<a href="@Url.Action("Edit", "ReportsToRecords")?id=' + data + '" class="editReportsToRecords">Edit</a> | <a href="@Url.Action("Details", "ReportsToRecords")?id=' + data + '" class="detailsReportsToRecords">Details</a> | <a href="@Url.Action("Delete", "ReportsToRecords")?id=' + data + '" class="deleteReportsToRecords">Delete</a>';  }
&#13;
&#13;
&#13;