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

时间:2018-04-16 08:31:11

标签: javascript jquery datatables

我有一个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 },

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

您可以使用columnDefs方法,然后使用render

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

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