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

【问题标题】：Add new column for edit/delete when data is loaded in dataTables library在 dataTables 库中加载数据时添加用于编辑/删除的新列
【发布时间】：2018-11-04 12:25:41
【问题描述】：

我有一个 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，我如何在 operations 列中为每一行添加Delete / Edit？

【问题讨论】：

首先，您需要创建一个连接到数据库并删除项目的php函数。然后您需要为删除项创建一个新的表列。 Here 是一个初学者的 SO 帖子。
服务器端已创建，我的问题是创建附加列

标签： javascript datatables server-side

【解决方案1】：

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

初始化时添加一列
在 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>");
                    }
                });

【讨论】：