Добавить новый столбец для редактирования / удаления при загрузке данных в библиотеку dataTables - PullRequest
Новая
       17

Добавить новый столбец для редактирования / удаления при загрузке данных в библиотеку dataTables

0 голосов
/ 04 ноября 2018

У меня есть таблица 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 , как я могу добавить Удалить / Редактировать для каждой строки в столбце операции ?

1 Ответ

0 голосов
/ 05 ноября 2018

Я решил проблему. Чтобы добавить данные в дополнительный столбец, вам нужно набрать

  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>");
                    }
                });
...