I have a Datatable
which if 1 page is returned I want to hide the 'Items per pages' dropdown
list and also the pagination
. This also needs to work when filtering the table.
I am using the:
.DataTable().page.info()
Below is the code I have
"fnDrawCallback": function () {
var accountSearchDataTableInfo = $('#accountSearchDataTable').DataTable().page.info();
if (accountSearchDataTableInfo.pages == '1') {
console.log(accountSearchDataTableInfo.pages == '1')
$('#accountSearchDataTable_length').hide();
$('#accountSearchDataTable_paginate').hide();
}
if (accountSearchDataTableInfo.pages == 1) {
console.log(accountSearchDataTableInfo.pages == 1)
$('#accountSearchDataTable_length').hide();
$('#accountSearchDataTable_paginate').hide();
}
}
And this gives...
Initial table load table info:
Filtered table info:
As you can see from my if
I have tried a number and string but when I do console.log
on these it comes back true
but the items are still displayed.
I have tried .hide()
and also .css('display', 'none')
but nothing seems to be working and I'm at a loss what else to try.
When I look at the element
in Dev Tools the style
attribute is added but nothing after it:
Initial table load:
Filtered table:
Found the solution. I was looking for the parent DIV
but it appear that if i used each individual identifier i can hide them. so my IF
now look like
if (accountSearchDataTableInfo.pages == '1') {
$('.mb-2').hide(); // Items per page DD
$('#accountSearchDataTable_previous').hide(); // Pagintator 'Previous' button
$('#accountSearchDataTable_next').hide(); // Pagintator 'Next' button
$('.paginate_button').hide(); // Pagintator page '1' button
}