Implement Datatables responsive details display with Ajax data - datatables

Question

I want to implement Datatable's responsive details with Bootstrap modal but it doesn't work for me. The first thing I noticed is that the "plus-sign" does not appear on the first column of my table. I'm not sure if this is because I'm using ajax data and need additional parameters that the example doesn't show or because I've added an auto number as my first column.
Here is the table HTML:
<table id="users" class="table table-striped table-bordered nowrap" data-conf="#Model.ExtraVM.DialogMsg" data-title="#Model.ExtraVM.DialogTitle" data-btnok="#Model.ExtraVM.Button1" data-btncancel="#Model.ExtraVM.Button2">
<thead>
<tr>
<th>#Model.HeadingVM.Col1</th>
<th>#Model.HeadingVM.Col2</th>
<th>#Model.HeadingVM.Col3</th>
<th>#Model.HeadingVM.Col4</th>
<th>#Model.HeadingVM.Col5</th>
</tr>
</thead>
<tbody></tbody>
</table>
Here is the jquery code:
<script>
$(document).ready(function () {
var t = $("#users").DataTable({
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return 'Details for ' + data[0] + ' ' + data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
},
columnDefs: [{
"searchable": false,
"orderable": false,
"targets": 0
}],
order: [[1, 'asc']],
ajax: {
url: "/api/users",
dataSrc: ""
},
columns: [
{
data: "id"
},
{
data: "firstName"
},
{
data: "lastName"
},
{
data: "userName"
},
{
data: "id",
render: function (data) {
return "<a href='#'><i class='fa fa-eye' data-id='" + data + "' data-toggle='modal' data-target='#dataPopup'></i></a> | <a href='#'><i class='fa fa-pencil js-edit' data-id='" + data + "'></i></a> | <a href='#'><i class='fa fa-trash js-delete' data-id='" + data + "'></i></a>";
}
}
]
});
t.on('order.dt search.dt', function () {
t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
$("#users").on("click", ".js-delete", function () {
var btn = $(this);
var confirm = btn.parents("table").attr("data-conf");
var dialogTitle = btn.parents("table").attr("data-title");
var btnOK = btn.parents("table").attr("data-btnOk");
var btnCancel = btn.parents("table").attr("data-btnCancel");
bootbox.dialog({
message: confirm,
title: dialogTitle,
buttons: {
main: {
label: btnCancel,
className: "btn-default",
callback: function () {
var result = "false";
}
},
success: {
label: btnOK,
className: "btn-primary",
callback: function () {
$.ajax({
url: "/api/users/" + btn.attr("data-id"),
method: "DELETE",
success: function () {
btn.parents("tr").remove();
}
});
}
}
}
});
});
});
</script>
}
This is how my tables looks (as you can see, the plus-sign is missing):

Answer 1

Your code seems to be fine. Plus sign only appears when viewing area is small enough and one of the columns become hidden.
There is no setting to force (+) sign to appear but you can use a trick with extra empty column and class none on it which will force column to always be hidden. See Class logic for more details.
See this jsFiddle for code and demonstration.