disable pagination if there is only one page in datatables

Question

I am implementing datatbales and according to my requirement, most of the things have been resolved except the pagination issue. In my case for every time pagination navigation is displaying. I want to disable the pagination navigation if there is only one page at all.How to do that? My code is like:

JS

<script>
  function fnFilterColumn(i) {

    $('#example').dataTable().fnFilter(
      $("#col" + (i + 1) + "_filter").val(),
      i
    );
  }
  $(document).ready(function() {


    $('#example').dataTable({
      "bProcessing": true,
      "sAjaxSource": "datatable-interestdb.php",
      "bJQueryUI": true,
      "sPaginationType": "full_numbers",
      "sDom": 'T<"clear">lfrtip',
      "oTableTools": {
        "aButtons": [

          {
            "sExtends": "csv",
            "sButtonText": "Save to CSV"
          }
        ]
      },
      "oLanguage": {
        "sSearch": "Search all columns:"
      }


    });


    $("#example").dataTable().columnFilter({
      aoColumns: [
        null,
        null,
        null,
        null
      ]
    });


    $("#col1_filter").keyup(function() {
      fnFilterColumn(0);
    });

  });
</script>

HTML

<table cellpadding="3" cellspacing="0" border="0" class="display userTable" aria-describedby="example_info">

  <tbody>
    <tr id="filter_col1">
      <td>Interest:</td>
      <td>
        <input type="text" name="col1_filter" id="col1_filter">
      </td>
    </tr>
  </tbody>
</table>


<table width="100%" border="0" align="center" cellpadding="2" cellspacing="1" class="form_table display" id="example">

  <thead>
    <tr>
      <th class="sorting_asc" width="25%">Interest</th>
      <th width="25%">Name</th>
      <th width="25%">Email</th>
      <th width="25%">Contact No</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td colspan="4" class="dataTables_empty">Loading data from server</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </tfoot>


</table>

Did you want to disable (developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/…) the pagination buttons, or hide them? All the answers below hide/show. — Jeromy French
– Jeromy French, Commented Mar 13, 2015 at 13:33

Raj · Accepted Answer · 2020-10-20 07:02:30Z

91

Building off of Nicola's answer, you can use the fnDrawCallback() callback and the oSettings object to hide the table pagination after it's been drawn. With oSettings, you don't need to know anything about the table settings (records per page, selectors specific to the table, etc.)

The following checks to see if the per-page display length is greater than the total records and hides the pagination if it is:

$('#your_table_selector').dataTable({
    "fnDrawCallback": function(oSettings) {
        if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
            $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
        } else {
             $(oSettings.nTableWrapper).find('.dataTables_paginate').show();
        }
    }
});

Documentation

edited Oct 20, 2020 at 7:02

Raj

23.1k14 gold badges105 silver badges148 bronze badges

answered Sep 12, 2012 at 17:12

sina

1,1111 gold badge8 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dmitry Chornyi Over a year ago

Shouldn't it be oSettings._iDisplayLength >= oSettings.fnRecordsDisplay() ?

GuiSim Over a year ago

If you use the filter to get 1 page, the controls disappear as expected. However once you clear the filter and end up with more than one 1 page, the controls do not reappear. This can be fixed by calling .show() on the JQuery elements inside the condition's else.

dev_row Over a year ago

@DmitryChornyi: >= would show the navigation if 10 results were returned on a 10 result page size. We don't want it to show unless there are page+1, so > is correct.

algorhythm Over a year ago

Please add || oSettings._iDisplayLength == -1 to your if-clause. So you can use the 'all' option in lengthmenu and there you also don't need the pagination. And like @OMG said, the else part... See also my improved version.

mark.monteiro Over a year ago

This code is outdated. See my answer for how to do this in V1.10

|

Mathias Müller · Accepted Answer · 2014-12-31 11:33:23Z

43

You must hide them dynamically I think, you can use fnDrawCallback()

$('#example').dataTable({
    "fnDrawCallback": function(oSettings) {
        if ($('#example tr').length < 11) {
            $('.dataTables_paginate').hide();
        }
    }
});

EDIT - another way found here could be

"fnDrawCallback":function(){
      if ( $('#example_paginate span span.paginate_button').size()) {
      $('#example_paginate')[0].style.display = "block";
     } else {
     $('#example_paginate')[0].style.display = "none";
   }
}

edited Dec 31, 2014 at 11:33

Mathias Müller

22.7k13 gold badges62 silver badges78 bronze badges

answered Jun 15, 2012 at 12:51

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

9 Comments

Bappa Over a year ago

thanks a lot. But I think one extra bracket is there "if( $('#example tr').length < 11 ) ) ". Anyway I resolve the issue. Thanks a lot once again. But one issue, as in the datatables, we can select the record limit as 10,25,50,100. Then if I select other than default(10)then how can we fix that?

Nicola Peluchetti Over a year ago

@Bappa You should get the pagination from oSettings and dynamically set the value

Bappa Over a year ago

please tell how to get from oSettings and dynamically set the value

Nicola Peluchetti Over a year ago

@Bappa maybe you can simply get them from the select that does the pagination $('select[name=example_length]').val();

Bappa Over a year ago

let us continue this discussion in chat

|

mark.monteiro · Accepted Answer · 2016-08-07 18:17:08Z

36

This is the correct approach when working in V1.10+ of JQuery Datatables. The process is generally the same as in previous versions but the event names and API methods are slightly different:

$(table_selector).dataTable({
    preDrawCallback: function (settings) {
        var api = new $.fn.dataTable.Api(settings);
        var pagination = $(this)
            .closest('.dataTables_wrapper')
            .find('.dataTables_paginate');
        pagination.toggle(api.page.info().pages > 1);
    }
});

Documentation

edited Aug 7, 2016 at 18:17

answered Oct 27, 2015 at 20:14

mark.monteiro

2,9882 gold badges39 silver badges41 bronze badges

3 Comments

Peter Jacoby Over a year ago

Not as easy to read, but same functionality in one line: preDrawCallback: function (settings) { $(this).closest('.dataTables_wrapper').find('.dataTables_paginate').toggle((new $.fn.dataTable.Api(settings)).page.info().pages > 1); }

Juergen Over a year ago

Great solution! Unlike the fnDrawCallback and css("display", "none") solution this worked for me also when changing the page size or filtering. Don't know why that is, but I guess it's due to the event not being fired.

Tadeu Sampaio Over a year ago

In order to hide the lengthMenu too I use this code at the end:

$(this).closest('.dataTables_wrapper').find('.dataTables_length').toggle(settings.aLengthMenu[0][0] != -1 && settings.aLengthMenu[0][0] < api.page.info().recordsTotal);

mjhasbach · Accepted Answer · 2015-04-15 00:31:30Z

33

See my feature plugin conditionalPaging.

Usage:

$('#myTable').DataTable({
    conditionalPaging: true
});

or

$('#myTable').DataTable({
    conditionalPaging: {
        style: 'fade',
        speed: 500 // optional
    }
});

answered Apr 15, 2015 at 0:31

mjhasbach

9069 silver badges18 bronze badges

1 Comment

webb Over a year ago

It took a minute to find the correct CDN for conditionalPaging. In DataTables jargon, It's not a regular Plugin, nor an Extension , but a "feature plugin". Perhaps this will save someone a minute. Here's a current link to feature plugins CDN links cdn.datatables.net/plug-ins/1.10.19/features

DreamTeK · Accepted Answer · 2020-02-04 08:36:11Z

7

Add this code to your datatables initialisation request.

JQUERY

Apply to single datatable:

"fnDrawCallback": function (oSettings) {
  var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate')
  if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
    pgr.hide();
  } else {
    pgr.show()
  }
}

Apply to all datatables:

"fnDrawCallback": null

Edit datatables.js to apply the code site wide.

edited Feb 4, 2020 at 8:36

answered Jun 6, 2014 at 8:37

DreamTeK

34.6k30 gold badges127 silver badges180 bronze badges

Comments

Faisal Janjua · Accepted Answer · 2018-12-26 08:43:28Z

5

I'm doing following to achieve this goal, as it is more dynamic solution that is not expressed above. as first it is getting total number of pages and then decide to show/hide pagination. Beauty of this code is only if user change page length then it will not effected.

jQuery('#example').DataTable({
    fnDrawCallback: function(oSettings) {
        var totalPages = this.api().page.info().pages;
        if(totalPages == 1){ 
            jQuery('.dataTables_paginate').hide(); 
        }
        else { 
            jQuery('.dataTables_paginate').show(); 
        }
    }
});

edited Dec 26, 2018 at 8:43

answered Dec 20, 2018 at 12:59

Faisal Janjua

8661 gold badge9 silver badges18 bronze badges

Comments

Bùi Đức Khánh · Accepted Answer · 2023-04-26 04:24:07Z

5

jQuery

I tried with the following options, it worked for me

  $("#your_tbl_selector").dataTable({
  "pageLength": 3,
  "autoWidth": false,
  "fixedHeader": {"header": false, "footer": false},
  "columnDefs": [{ "width": "100%", "targets": 0 }],
  "bPaginate": true,
  "bLengthChange": false,
  "bFilter": true,
  "bInfo": false,
  "bAutoWidth": false,
  "oLanguage": {
   "oPaginate": {
     "sNext": "",
     "sPrevious": ""
   }
 },
 "fnDrawCallback": function(oSettings) {                 
      if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay()) {
        $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
      }
  }

});

DataTable Output View

edited Apr 26, 2023 at 4:24

Bùi Đức Khánh

4,6987 gold badges32 silver badges46 bronze badges

answered Nov 20, 2016 at 16:02

Aravind

511 silver badge1 bronze badge

Comments

algorhythm · Accepted Answer · 2015-04-02 01:17:14Z

3

I prefer @sina's solution. Good job.

But my one comes with some neccessary improvements. @sina forgot the else part to show the pagination again if neccesary. And I added the possibility to define the all option in the lengthMenu like following:

jQuery('#your_table_selector').dataTable({
    "lengthMenu": [[10, 25, 50, 100, 250, 500, -1], [10, 25, 50, 100, 250, 500, "All"]],

    "fnDrawCallback": function(oSettings) {
        if (oSettings._iDisplayLength == -1
            || oSettings._iDisplayLength > oSettings.fnRecordsDisplay())
        {
            jQuery(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
        } else {
            jQuery(oSettings.nTableWrapper).find('.dataTables_paginate').show();
        }
    }
});

edited Apr 2, 2015 at 1:17

answered Mar 12, 2015 at 13:07

algorhythm

8,7883 gold badges40 silver badges48 bronze badges

Comments

Agu Dondo · Accepted Answer · 2017-04-13 02:23:10Z

2

This callback function works generically with any datatable without having to hardcode the table ID:

$('.data-table').dataTable({
    fnDrawCallback: function(oSettings) {
       if(oSettings.aoData.length <= oSettings._iDisplayLength){
         $(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
       }
    }
});

answered Apr 13, 2017 at 2:23

Agu Dondo

13.7k7 gold badges63 silver badges71 bronze badges

Comments

Nikita · Accepted Answer · 2015-08-19 13:32:41Z

1

Just add the following to your stylesheet:

.dataTables_paginate .paginate_button.disabled {
    display: none;
}

answered Aug 19, 2015 at 13:32

Nikita

111 bronze badge

Comments

Cleb · Accepted Answer · 2015-08-19 14:23:35Z

1

I know this is an old post but for those of us that will be using this, and have OCD just like me, a change is needed.

Change the if statement,

if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay())

to

if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay())

With this little change you will see the pagination buttons for records lengths greater than 10, 25, 50, 100 instead of presenting the pagination buttons with only 10 records, technically 10, 25, etc records is still a one page view.

edited Aug 19, 2015 at 14:23

Cleb

26.3k23 gold badges129 silver badges164 bronze badges

answered Dec 26, 2014 at 3:43

Ray

5436 silver badges22 bronze badges

Comments

sreekanth kuriyala · Accepted Answer · 2015-08-25 06:26:51Z

1

You can follow this way also.

"fnDrawCallback":function(){
      if(jQuery('table#table_id td').hasClass('dataTables_empty')){
            jQuery('div.dataTables_paginate.paging_full_numbers').hide();
      } else {
            jQuery('div.dataTables_paginate.paging_full_numbers').show();
      }
 }

This worked for me.

answered Aug 25, 2015 at 6:26

sreekanth kuriyala

1,39912 silver badges11 bronze badges

Comments

Tunaki · Accepted Answer · 2016-05-31 07:29:25Z

1

I tried to make sPaginationType as Dynamic in datatable for every entry but i can't find proper solution for that but what i did was

"fnDrawCallback": function(oSettings) {
    $('select[name="usertable_length"]').on('change', function(e) {
        var valueSelected  = this.value;
        if ( valueSelected < 10 ) {
            $('.dataTables_paginate').hide();
        } else {
            $('.dataTables_paginate').show();
        }
    });
},

edited May 31, 2016 at 7:29

Tunaki

138k46 gold badges370 silver badges443 bronze badges

answered May 31, 2016 at 7:19

Kamal Kishor

693 bronze badges

Comments

Matoeil · Accepted Answer · 2016-07-25 14:01:37Z

1

$('#dataTable_ListeUser').DataTable( {

    //usual pager parameters//

    "drawCallback": function ( settings ) {

    /*show pager if only necessary
    console.log(this.fnSettings());*/
    if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
        $('#dataTable_ListeUser_paginate').css("display", "block");     
    } else {                
        $('#dataTable_ListeUser_paginate').css("display", "none");
    }

    }
   });

answered Jul 25, 2016 at 14:01

Matoeil

7,36711 gold badges58 silver badges87 bronze badges

Comments

Julian Lettner · Accepted Answer · 2015-07-30 16:52:11Z

0

If your data is not dynamic, i.e., server generates HTML table which is then enhanced by DataTables you can render the paging option on the server (I am using razor).

$("#results").dataTable({
  paging: @(Model.ResultCount > Model.PageSize ? "true" : "false"),
  // more ...
});

answered Jul 30, 2015 at 16:52

Julian Lettner

3,8097 gold badges34 silver badges50 bronze badges

Comments

spielbug · Accepted Answer · 2017-05-15 14:03:44Z

0

Here is my solution, it works also if you have multiple tables on the same page. It prevents the colision for example (table A must have pagination, and B must not).

tableId in my code is never undefined. If you haven't defined an ID for your table, dataTable will do it for you by adding something like 'DataTables_Table_0'

    fnDrawCallback: function (oSettings) {
        if ($(this).DataTable().column(0).data().length <= oSettings._iDisplayLength) {
            var tableId = $(this).attr('id');
            $('#' + tableId + '_paginate').hide();
        }
    }

edited May 15, 2017 at 14:03

answered May 15, 2017 at 8:20

spielbug

1,40115 silver badges18 bronze badges

Comments

Nageshwar Jha · Accepted Answer · 2018-01-11 05:50:43Z

0

This Solved my issues:

.dataTables_paginate .disabled {
   display:none;
}   
dataTables_paginate .disabled + span {
   display:none;
}

Hope it helps you all

edited Jan 11, 2018 at 5:50

answered Oct 7, 2017 at 15:16

Nageshwar Jha

4111 bronze badges

Comments

user12546105 · Accepted Answer · 2019-12-16 14:16:35Z

0

    $("#datatable").DataTable({
        "fnDrawCallback": function (oSettings) {
            if ($(oSettings.nTBody).find("tr").length < $(oSettings.nTableWrapper).find("select[name=fileList_length]").val()) {
                $(oSettings.nTableWrapper).children(".dataTables_paginate").hide();
            }
        }
    });

answered Dec 16, 2019 at 14:16

user12546105

11

1 Comment

Aleksey Potapov Over a year ago

please, explain your code. If not sure, please read How to Answer

Fahim · Accepted Answer · 2021-08-12 16:49:47Z

0

this worked for me:

if ($('#dataTableId_paginate').find('li').length < 4) {
    $('#segment-list_paginate').html('');
}

answered Aug 12, 2021 at 16:49

Fahim

4274 silver badges11 bronze badges

Collectives™ on Stack Overflow

disable pagination if there is only one page in datatables

19 Answers 19

6 Comments

9 Comments

Documentation

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

19 Answers 19

6 Comments

9 Comments

Documentation

3 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related