CODEWITHSUNDEEP
javascriptdatatablespagination
Bappa
Bappa

Reputation: 799

disable pagination if there is only one page in datatables

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>

Upvotes: 65

Views: 72793

Answers (19)

Aravind
Aravind

Reputation: 51

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

enter image description here

Upvotes: 5

Fahim
Fahim

Reputation: 427

this worked for me:

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

Upvotes: 0

sina
sina

Reputation: 1111

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

Upvotes: 91

DreamTeK
DreamTeK

Reputation: 34307

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.

Upvotes: 7

user12546105
user12546105

Reputation: 11

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

Upvotes: 0

Faisal Janjua
Faisal Janjua

Reputation: 866

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

Upvotes: 5

Nageshwar Jha
Nageshwar Jha

Reputation: 41

This Solved my issues:

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

Hope it helps you all

Upvotes: 0

spielbug
spielbug

Reputation: 1371

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

Upvotes: 0

Agu Dondo
Agu Dondo

Reputation: 13609

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

Upvotes: 2

mark.monteiro
mark.monteiro

Reputation: 2941

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

Upvotes: 36

Matoeil
Matoeil

Reputation: 7309

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

    }
   });

Upvotes: 1

Kamal Kishor
Kamal Kishor

Reputation: 69

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

Upvotes: 1

sreekanth kuriyala
sreekanth kuriyala

Reputation: 1353

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.

Upvotes: 1

Ray
Ray

Reputation: 523

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.

Upvotes: 1

Nikita
Nikita

Reputation: 11

Just add the following to your stylesheet:

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

Upvotes: 1

Julian Lettner
Julian Lettner

Reputation: 3679

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

Upvotes: 0

mjhasbach
mjhasbach

Reputation: 906

See my feature plugin conditionalPaging.

Usage:

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

or

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

Upvotes: 33

algorhythm
algorhythm

Reputation: 8728

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

Upvotes: 3

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

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

Upvotes: 44

Related Questions