DOM is not working in Datatable V2
DOM is not working in Datatable V2
![medinem](https://secure.gravatar.com/avatar/e64cf854ee3acdb23e2ca191654278c7/?default=https%3A%2F%2Fvanillicon.com%2Fe64cf854ee3acdb23e2ca191654278c7_200.png&rating=g&size=120)
Hi, i have a very confusing BUG Right now, DOM did perfectly work with Datatable v1 but now it is broken in version 2, what's wrong? layout is not working.
this is my version 1:
table = $("#user-index").DataTable({
"language": {
"url": "/assets/plugins/custom/datatables/fa.json",
"lengthMenu": "Show_MENU_",
},
// Design Assets
searchDelay: 500,
stateSave: true,
autoWidth: true,
responsive: true,
// ServerSide Setups
processing: true,
serverSide: true,
// Paging Setups
paging: true,
lengthMenu: [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
pageLength: 10,
pagingType: "full_numbers",
// Custom Export Buttons
"dom":
"<'row'" +
"<'col-lg-3 col-md-4 col-sm-6 d-flex align-items-center'l>" + // Page size dropdown
"<'col-lg-5 col-md-4 col-sm-6 d-flex align-items-center justify-content-center'f>" + // Search input centered
"<'col-lg-4 col-md-4 col-sm-12 d-flex align-items-center justify-content-end'B>" + // Buttons taking 3 columns and aligned to the right
">" +
"<'table-responsive'tr>" +
"<'row'" +
"<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i>" +
"<'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>" +
">",
buttons: [
{
extend: 'collection',
text: 'out',
buttons: [
{ text: 'Excel', action: exportToExcel },
{ text: 'CSV', action: exportToCsv },
{ text: 'HTML', action: exportToHtml },
{ text: 'JSON', action: exportToJson },
{ text: 'XML', action: exportToXml },
{ text: 'YAML', action: exportToYaml }
]
}
],
// Searching Setups
searching: { regex: true },
// Ajax Filter using Axios
ajax: function (data, callback, settings) {
axios.post("/AdminArea/User/GetAllUsers", JSON.stringify(data), {
headers: {
'Content-Type': 'application/json',
'RequestVerificationToken': token
}
}).then(response => {
callback(response.data);
}).catch(error => {
console.error('Error fetching data:', error);
});
},
// Columns Setups
columns: [
{
data: "id",
className: "align-middle",
render: function (data, type, row, meta) {
return meta.row + 1;
}
},
{ data: null, render: renderCombinedAvatarAndName, className: "align-middle" },
{ data: "personalCode", className: "align-middle" },
{ data: "phoneNumber", className: "align-middle" },
{ data: "nationalCode", className: "align-middle" },
{ data: "userName", className: "align-middle" },
{
data: "isActive",
className: "align-middle",
render: function (data) {
return data ? '<span class="badge badge-success">active</span>' : '<span class="badge badge-danger">deactive</span>';
}
},
{ data: null, orderable: false, render: renderUserActions, className: "align-middle" }
],
// Column Definitions
columnDefs: [
{ targets: "no-sort", orderable: false },
{ targets: "no-search", searchable: false },
{
targets: "trim",
render: function (data, type) {
if (type === "display") {
return strtrunc(data, 7);
}
return data;
}
},
{ targets: 1, orderable: false, className: "no-sort" },
{ targets: "date-type", type: "date-eu" }
],
order: [[5, 'asc']]
});
table = new DataTable("#user-index", {
layout: {
topStart: 'search',
topEnd: 'pageLength',
bottomStart: 'info',
bottomEnd: 'paging',
},
language: {
url: "/assets/plugins/custom/datatables/fa.json",
lengthMenu: "show_MENU_",
},
searchDelay: 500,
stateSave: true,
autoWidth: true,
responsive: true,
processing: true,
serverSide: true,
paging: true,
lengthMenu: [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
pageLength: 10,
searching: { regex: true },
ajax: {
url: "/AdminArea/User/GetAllUsers",
type: "POST",
data: function (d) {
return JSON.stringify(d);
},
contentType: "application/json",
headers: {
'RequestVerificationToken': token
},
dataSrc: function (json) {
return json.data;
}
},
columns: [
{
data: "id",
className: "align-middle",
render: function (data, type, row, meta) {
return meta.row + 1;
}
},
{ data: null, render: renderCombinedAvatarAndName, className: "align-middle" },
{ data: "personalCode", className: "align-middle" },
{ data: "phoneNumber", className: "align-middle" },
{ data: "nationalCode", className: "align-middle" },
{ data: "userName", className: "align-middle" },
{
data: "isActive",
className: "align-middle",
render: function (data) {
return data ? '<span class="badge badge-success">active</span>' : '<span class="badge badge-danger">deactive</span>';
}
},
{ data: null, orderable: false, render: renderUserActions, className: "align-middle" }
],
columnDefs: [
{ targets: "no-sort", orderable: false },
{ targets: "no-search", searchable: false },
{
targets: "trim",
render: function (data, type) {
if (type === "display") {
return strtrunc(data, 7);
}
return data;
}
},
{ targets: 1, orderable: false, className: "no-sort" },
{ targets: "date-type", type: "date-eu" }
],
order: [[5, 'asc']]
});
This question has an accepted answers - jump to answer
Answers
I built a test case for you with DT 2.0.8, BS 5 and Buttons:
https://live.datatables.net/zoqaciru/1/edit
I used your
dom
option. What behavior is not working?I think Allan is working on the ability to add classes to the![:smile: :smile:](https://datatables.net/forums/resources/emoji/smile.png)
layout
option. In the meantime you will probably want to stick with thedom
option. Thedom
will be removed in DT 3.0 but since 2.0 just came out I suspect 3.0 will be a long time comingKevin
I want to remove the DOM option and use the new layout option in V2, but the layout option is not working. No matter what configuration I write, pagination is shown at the bottom, and the search field does not appear. This configuration:
layout: {
topStart: 'search',
topEnd: 'pageLength',
bottomStart: 'info',
bottomEnd: 'paging',
},
is not working, no matter what changes I make to it.
Additionally, when I upgraded to V2, the DOM option style changed. The titles are no longer inline with their fields; instead, they are positioned on top of the fields.
That configuration appears to work okay: https://live.datatables.net/vibenoge/1/edit .
You do have
bottomEnd: 'paging'
, so I would expect it to show at the bottom right of the table, which it is in the running code.Can you link to a test case showing the issue please.
Allan
My problem has been resolved by downloading min.js and min.css from your website. However, I am experiencing a UI issue. When I set responsive: true, a plus sign (+) appears behind the row numbers, indicating that the responsive feature is not functioning correctly. Why is this happening?
I don't know. That old icon is not the one that Responsive would be displaying. If you link to the page I can take a look.
Allan
Thank you for your response. I found the issue: it's a compatibility problem between my theme's CSS and Datatable version 2's CSS. This is why the problem persisted. I temporarily fixed it by downloading the official Datatable CSS and JS, replacing the theme provider's CSS, and removing their custom CSS written for version 1.