Question

我有一个js数据表，我已经实现了数据的分页。它使用jQuery数据表。数据正确显示。但是，我想在数据表的第一行中添加一个元素。

在我添加之前：<td>@Html.ActionLink(item.CarId, "Detail", "Cars", new { id = item.CarId},null) <span class="dt-expand-btn js-expand-btn">+</span></td>

我想在js的td内添加：<span class="dt-expand-btn js-expand-btn">+</span>

var carsDataTable = $('.js-cars-lists').DataTable({
                "ajax": {
                    "url": "/Cars/CarsPagination",
                    "processing": true,
                    "serverSide": true,
                    "language": {
                        "paginate": {
                            "previous": '<i class="material-icons">chevron_left</i>',
                            "next": '<i class="material-icons">chevron_right</i>'
                        }
                    },
                    "order": [0, "asc"],
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": [
                    {
                        "data": "CarId", "name": "CarId", "autowidth": true,
                        "render": function (data, type, row, meta) {
                            $(row.CarId).css('color', 'red');
                            return '<a href="/Cars/Detail/' + row.CarId +'">' + row.CarId + '</a>';
                        }
                    },
                    { "data": "CarName", "name": "CarName", "autowidth": true },

有人可以帮助我实现这个目标吗？此外，没有出现分页图标。请帮忙。

Answer 1

jQuery DataTable的函数为render，它接受4个参数function(data, type, row)，您可以控制行的呈现。您现在可以检查表格的行并在其中添加元素。

Answer 2

您可以使用columnDefs方法，然后使用render：

...
columnDefs: [{
  "render": function(data, type) {
    return '<span class="dt-expand-btn js-expand-btn">+</span>';
  },
  "targets": 0
}]
...

targets引用表格列的索引（因为您指的是第1列）将其设置为0

在jQuery数据表中的td中添加元素

2 个答案: