disable pagination if there is only one page in datatables

JavascriptDatatablesPagination

Javascript Problem Overview

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>

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

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";
   }
}

Solution 3 - Javascript

See my feature plugin [conditionalPaging][1].

Usage:

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

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

[1]: https://github.com/DataTables/Plugins/blob/master/features/conditionalPaging/dataTables.conditionalPaging.js "DataTables conditionalPaging plugin"

Solution 4 - Javascript

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

Solution 5 - Javascript

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.

Solution 6 - Javascript

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(); 
        }
    }
});

Solution 7 - Javascript

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

Solution 8 - Javascript

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();
		}
    }
});

Solution 9 - Javascript

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();
	   }
	}
});

Solution 10 - Javascript

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.

Solution 11 - Javascript

Just add the following to your stylesheet:

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

Solution 12 - Javascript

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.

Solution 13 - Javascript

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();
		}
	});
},

Solution 14 - Javascript

$('#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");
    }

    }
   });

Solution 15 - Javascript

This isn't directly possible as DataTables doesn't support enabling and disabling features are run time. However, what you could do is make use of the fnDrawCallback() function to check to see if there is only one page, and if so hide the pagination controls.

Solution 16 - Javascript

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 ...
});

Solution 17 - Javascript

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();
        }
    }

Solution 18 - Javascript

This Solved my issues:

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

Hope it helps you all

Solution 19 - Javascript

    $("#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();
            }
        }
    });

Solution 20 - Javascript

this worked for me:

if ($('#dataTableId_paginate').find('li').length < 4) {
    $('#segment-list_paginate').html('');
}
Categories
Recommended Javascript Solutions
Recommended Datatables Solutions
Recommended Pagination Solutions

Previous Solution:

Android - adb logcat without debug logs

AndroidAdb

Next Solution:

RegEx that will match the last occurrence of dot in a string

JavascriptJqueryRegexString

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionBappaView Question on Stackoverflow
Solution 1 - JavascriptsinaView Answer on Stackoverflow
Solution 2 - JavascriptNicola PeluchettiView Answer on Stackoverflow
Solution 3 - JavascriptmjhasbachView Answer on Stackoverflow
Solution 4 - Javascriptmark.monteiroView Answer on Stackoverflow
Solution 5 - JavascriptDreamTeKView Answer on Stackoverflow
Solution 6 - JavascriptFaisal JanjuaView Answer on Stackoverflow
Solution 7 - JavascriptAravindView Answer on Stackoverflow
Solution 8 - JavascriptalgorhythmView Answer on Stackoverflow
Solution 9 - JavascriptAgu DondoView Answer on Stackoverflow
Solution 10 - JavascriptRayView Answer on Stackoverflow
Solution 11 - JavascriptNikitaView Answer on Stackoverflow
Solution 12 - Javascriptsreekanth kuriyalaView Answer on Stackoverflow
Solution 13 - JavascriptKamal KishorView Answer on Stackoverflow
Solution 14 - JavascriptMatoeilView Answer on Stackoverflow
Solution 15 - JavascriptShivenView Answer on Stackoverflow
Solution 16 - JavascriptJulian LettnerView Answer on Stackoverflow
Solution 17 - JavascriptYacineView Answer on Stackoverflow
Solution 18 - JavascriptNageshwar JhaView Answer on Stackoverflow
Solution 19 - Javascriptuser12546105View Answer on Stackoverflow
Solution 20 - JavascriptFahimView Answer on Stackoverflow