javascriptjquerydatatables

Can't hide items per page and pagination in datatable when less then number displayed

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:

enter image description here

Filtered table info:

enter image description here

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:

enter image description here

Filtered table:

enter image description here

Solution

  • 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
}