Adding an element within a td in jQuery datatable

Question

I have a js data table that I have implemented for pagination of data. It uses the jQuery data table. The data is being displayed correctly. However, I want to add an element within the first row of the data table.

Before I added it like this : <td>@Html.ActionLink(item.CarId, "Detail", "Cars", new { id = item.CarId},null) <span class="dt-expand-btn js-expand-btn">+</span></td>

What I want to add within the td of the js is : <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 },

Could someone please help me to achieve this ? Also, paginate icons are not appearing. Please help.

Answer 1

jQuery DataTable has a function of render it accepts 4 parameters function(data, type, row) which you can control the rendering of your rows. You can now check the rows of a table and add your element in it.

Answer 2

You can use columnDefs method and then render :

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

targets refers to the index of the table column (since you are referring to the 1st column) set it to 0