时间戳

首页 > 解决方案 > 在 dataTables 库中加载数据时添加用于编辑/删除的新列

javascript - 在 dataTables 库中加载数据时添加用于编辑/删除的新列

问题描述

我有一个dataTables表，它的数据是通过 ajax 调用加载的。每行有 5 列。配置如下：

<table id="table" class="table table-bordered table-hover" style="width: 100%">
  <thead>
    <tr>
      <th>@Html.DisplayNameFor(model => model.FirstName)</th>
      <th>@Html.DisplayNameFor(model => model.LastName)</th>
      <th>@Html.DisplayNameFor(model => model.PersonnelId)</th>
      <th>@Html.DisplayNameFor(model => model.NationalId)</th>
      <th>@Html.DisplayNameFor(model => model.Companies)</th>
      <th>Operations</th>
    </tr>
  </thead>
</table>

对于初始化我使用：

var table = $('.table').DataTable({
    "proccessing": true,
    "serverSide": true,
    "ajax": {
        url: "server_api.php",
        type: 'POST'
    },
    "columns": [
        { "data": "FirstName" },
        { "data": "LastName" },
        { "data": "PersonnelId" },
        { "data": "NationalId" },
        { "data": "Companies" }
    ]
});

考虑到每一行都有一个Id，我如何为操作列中的每一行添加删除/编辑？

标签： javascriptdatatablesserver-side

解决方案

我解决了这个问题。要将数据添加到其他列，您需要

  1. 初始化时添加一列
  2. 填充rowCallback函数中的列单元格。

代码是：

var table = $('.table')
                .DataTable({
                    "proccessing": true,
                    "serverSide": true,
                    "ajax": {
                        url: "server_api.php",
                        type: 'POST'
                    },
                    "columns": [
                        { "data": "FirstName" },
                        { "data": "LastName" },
                        { "data": "PersonnelId" },
                        { "data": "NationalId" },
                        { "data": "Companies" },
                        { "render" : function() {return ""; }
                    ],
                    "rowCallback": function (row, data) {
                        var additionalColIdx = 5; // Index of new column
                        $(`td:eq({additionalColIdx})`, row).html("<a href=\"edit.php/" + data.Id "\">Edit</a>" + " / " +
                                "<a href=\"delete.php/" + data.Id + "/" + "\">Delete</a>");
                    }
                });

推荐阅读