動態呈現資料表中的列-Column.Render屬性

我正在開發一個動態資料表，其中資料源是用 [n] 列動態生成的，其中資料源可能包含 4 列或 6 列作為示例。根據 DataTables 論壇上的這篇文章（

渲染表：

My question regards the empty final column of the table, in which I need to render a button. I would have normally written something along the lines of the code below, if I had been wanting to render a table with known column values, in which I would use the DataTable property column.Render. As you can see below, using the data property of the column, I can use create a function to render a button, which can be used to quick navigate to the Contact/Edit page passing the "id" as a Url route value, meaning that it is possible to edit the specific details of the choosen contact.

 <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    '" ><i ></i></a>&nbsp;'

                                buffer  = '<a href="@Url.Action("Delete", "Contact")/'   data   '" ><i ></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>

How can I achieve the same principle of rendering a button in my table if I am defining and building my column defintion variable before passing this to my DataTable intialization?

Any help would be great.

uj5u.com熱心網友回復：

給定問題的一個簡單解決方案是使用Column.defaultContent屬性和onClick可用于構建所需相關 URL的自定義事件。

在下面的示例中，我修改了我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 Modal 的函式中。

    <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")[email protected]&[email protected]&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>

標籤：jquery json asp.net-mvc datatables

上一篇：使用PDFsharp在服務器上將影像流轉換為PDF時出錯

下一篇：單動作路由混淆