Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In datatable more than 10 records show pagination otherwise not display pagination using datatables

Tags:

datatables

In My website I am using data tables for display data. Now The issue is If there are 10 records than the default pagination is not display but when there are more than 10 records the pagination of data table should display.

This is how I initialize datatable

$(document).ready(function(){
        $('#tbl_member').dataTable({
            "iDisplayLength": 10,
            "bAutoWidth": false,
            "aoColumnDefs": [
                {"bSortable": true, "aTargets": [0,2]}
            ]
        });
});

This datatable code is when I done server side processing:-

var save_method; 
var table;
    $(document).ready(function() {
      table = $('#table').DataTable({ 
        oLanguage: {
        sProcessing: "<img src='<?php echo base_url();?>assets/img/loader.gif'>"
        },
        "processing": true, 
        "serverSide": true,     
        // Load data for the table's content from an Ajax source
        "ajax": {
            "url": "<?php echo base_url();?>Technology/technology_list",
            "type": "POST"
        },

       "columnDefs": [
        { 
          "targets": [ -1 ], 
          "orderable": false, 
        },
        ],
      });
    });
like image 866
Kim Jones Avatar asked Nov 02 '15 13:11

Kim Jones


1 Answers

Use bPaginate (old hungarian notation style) or paginate to turn pagination on or off. You can use expressions to determine the options :

$('#tbl_member').dataTable({
   "bPaginate" : $('#tbl_member tbody tr').length>10,
   "iDisplayLength": 10,
   "bAutoWidth": false,
   "aoColumnDefs": [
       {"bSortable": true, "aTargets": [0,2]}
   ]
});

This works in both 1.9.x and 1.10.x versions of dataTables. Demo showing two tables with the one having less than 10 records, the other a lot more -> http://jsfiddle.net/t2xcfLap/3/


Hide pagination controls after an AJAX update. Assuming the JSON reponse is on the form

{
  "draw": 1,
  "recordsTotal": 3,
  "recordsFiltered": 3,
  "data": [
    [...],
  ]
}

then

table.on('xhr', function(e, settings, json, xhr) {
    if (json.recordsTotal<10) {
        $("#example_paginate").hide();
        $("#example_length").hide();
    } else {
        $("#example_paginate").show();
        $("#example_length").show();
    }        
})

demo -> http://jsfiddle.net/yyo5231z/

The injected controls is named on the form <tableId>_length, <tableId>_paginate. So if your table have the id table, then the above should be $("#table_paginate").hide(); and so on.

The reason for the different approach compared to the first answer with a static table is, that you cannot change pagination on the fly without re-initialising the table.

like image 75
davidkonrad Avatar answered Oct 23 '22 05:10

davidkonrad