时间戳

首页 > 解决方案 > 在 DataTable 中动态呈现列 - Column.Render 属性

jquery - 在 DataTable 中动态呈现列 - Column.Render 属性

问题描述

我正在开发一个动态数据表，其中数据源是使用 [n] 列动态生成的，其中数据源可能包含 4 列或 6 列作为示例。根据 DataTables 论坛上的这篇文章（如何从动态数据源呈现列），可以定义和构建列定义的变量，并将其传递给初始化。

基于此，我创建了以下代码，该代码适用于给定目的，并根据数据源动态呈现列。

HTML：

 <div class="data-table">
        <table id="dataTable" class="table table-striped table-bordered" style="width:100%;"></table>
    </div>

脚本：

 <script>
    var dataToSend = {};
    var dataTable;

    dataToSend = {
        "regionId": @Model.RegionId
    }

    // Get Column Defintions
    var dtColumns = @Html.Raw(Json.`enter code here`Serialize(listOfDefintions));

    // DataTable
    $(function () {
        dataTable = {
            dt: null,

            init: function () {
                dt = $("#dataTable").DataTable({
                    ajax: {
                        type: "GET",
                        url: "@Url.Action("GetDataForGrid", "Contact")",
                        data: function () {
                            return dataToSend;
                        },
                        datatype: "json",
                        dataSrc: ""
                    },
                    columns: dtColumns,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                });
            },
            refresh: function () {
                dt.ajax.reload();
            }
        }

        dataTable.init();
    });

</script>

上面的代码根据下面可以看到的数据源呈现以下 DataTable。

数据源： 数据源

渲染表： 数据表

我的问题是关于表格的最后一列空的，我需要在其中呈现一个按钮。如果我一直想渲染一个具有已知列值的表，我通常会按照下面的代码行编写一些东西，我将在其中使用 DataTable 属性 column.Render。如下所示，使用列的 data 属性，我可以使用创建函数来呈现一个按钮，该按钮可用于快速导航到 Contact/Edit 页面，将“id”作为 Url 路由值传递，意思是可以编辑所选联系人的具体详细信息。

 <script>
    var dataToSend = {};
    var contactDataTable;

    dataToSend = {
       "regionId": @Model.RegionId
    };

    $(function () {
        contactDataTable = {
            dt: null,

            init: function () {
                dt = $('#contact-data-table').DataTable({
                    ajax: {
                        type: "GET",
                        url: "@Url.Action("GetDataForGrid", "Contact")",
                        data: function () {
                            return dataToSend;
                        },
                        datatype: "json",
                        dataSrc: ""
                    },
                    columns: [
                        {
                            "title": "Forename",
                            "data": "forename",
                            "searchable": true,
                        },
                        {
                            "title": "Surname",
                            "data": "surname",
                            "searchable": true,
                        },
                        {
                            "title": "Email",
                            "data": "email",
                            "searchable": true
                        },
                        {
                            "Status":
                            "status":
                            "searchable":
                        },
                        {
                            "title": "Role",
                            "data": "roleName",
                            "searchable": true
                        },
                        {
                            "title": "",
                            "data": "id",
                            "searchable": false,
                            "sortable": false,
                            "render": function (data, type, full, meta) {
                                var buffer = '<a href="@Url.Action("Edit","Contact")/' + data  + '" class="btn btn-sm btn-primary js-action"><i class="far fa-edit"></i></a>&nbsp;'

                                buffer += '<a href="@Url.Action("Delete", "Contact")/' + data + '" class="btn btn-sm btn-danger js-action"><i class="far fa-trash-alt"></i></a>';

                                return buffer;
                            }
                        }
                    ],
                    columnDefs: [
                        { "width": "15%", "targets": 0 },
                        { "width": "15%", "targets": 1 },
                        { "width": "20%", "targets": 2 },
                        { "width": "15%", "targets": 3 },
                        { "width": "15%", "targets": 4 },
                        { "width": "20%", "targets": 5 },
                    ],
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                });
            },
            refresh: function () {
                dt.ajax.reload();
            }
        }
</script>

如果我在将其传递给我的 DataTable 初始化之前定义和构建列定义变量，如何实现在我的表中呈现按钮的相同原理？

任何帮助都会很棒。

标签： jqueryjsonasp.net-mvcdatatables

解决方案

给定问题的一个简单解决方案是使用可用于构造所需相关 URL的Column.defaultContent属性和自定义事件。onClick

在下面的示例中，我修改了我的dtColumns数组，如提供的图像中所示，以便相关对象包含 的定义defaultContent，设置为将呈现简单按钮的字符串。要defaultContent由 使用DataTable，您必须将该Data属性设置为 null。

数据表 - 数据源

var myColumnDefs = [
        { title: "Forename", data: "forename", width: "15%"},
        { title: "Surname", data: "surname", width: "15%"},
        { title: "Email", data: "email", width: "20%"},
        { title: "Status", data: "status", width: "15%"},
        { title: "Role", data: "roleName", width: "15%"},
        { title: "", data: "(string)null", width: "20%", searchable: false, sortable: false, defaultContent: "<a id='btnEdit' class='btn btn-sm btn-primary js-action'><i class='fas fa-edit'></i></a>"}
    ]

这样做时，会呈现如下表：

渲染数据表

修改后的代码实际上只包含处理onClick按钮事件的额外函数。在这种情况下，我可以通过 using 获取加载记录的数据$("#dataTable").DataTable().row((selectedRow).parents("tr")).data()，其中 id 属性可以访问。使用这个 Id 值，我能够构造所需的 URL，该 URL 恰好被传递到呈现 Bootstrap 模态的函数中。

    <script>
    var dataToSend = {};
    var dataTable;

    // Set Data To Send
    dataToSend = {
        "regionId": "@Model.RegionId"
    }

    // Get Column Defintions
    var dtColumns = @Html.Raw(Json.Serialize(listOfDefintions));

    // DataTable
    $(function () {
        dataTable = {
            dt: null,

            init: function () {
                dt = $("#dataTable").DataTable({
                    ajax: {
                        type: "GET",
                        url: "@Url.Action("GetDataForGrid", "Contact")",
                        data: function () {
                            return dataToSend;
                        },
                        datatype: "json",
                        dataSrc: ""
                    },
                    columns: dtColumns,
                    lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
                });
            },
            refresh: function () {
                dt.ajax.reload();
            }
        }

        dynaGridDataTable.init();


        // DataTable Buttons
        $("#dataTable").on("click", ".js-action", function (event) {
            var btnId = $(this).attr("id");
            var recordId = getRecordId($(this));

            if (btnId !== undefined && btnId == "btnEdit") {
                // Create Edit URL
                var href = '@Url.Action("Popup", "DynaGrid")?appGridName=@Model.AppGrid.GridName&masterRecordId=@Model.AppGrid.MasterRecordFKId&id=' + recordId + '';
                
                renderModalForDataTableButton(href);
            } else if (btnId !== undefined && btnId == "btnDelete") {
                // Code 
                
            } else {
                alert("Something Went Wrong - Unable To Redirect");
            }
        });

        // Get Record Id Of Current Row
        function getRecordId(selectedRow) {
            var data = $("#dataTable").DataTable().row((selectedRow).parents("tr")).data();
            return data.id;
        }

        function renderModalForDataTableButton(href) {
            $.get(href, function (data) {
                $('#myModalContent').html(data);
                $('#myModal').modal('show');
            });
        }
    });
</script>

推荐阅读