CODEWITHSUNDEEP
javascriptcsshtml-tabledatatabledatatables
Rainbow Unicorn
Rainbow Unicorn

Reputation: 13

Custom paginations in DataTables js

How can I add a custom pagination in datatables.js as per the below illustration?

the attached image

Upvotes: 1

Views: 884

Answers (1)

Mario Boss
Mario Boss

Reputation: 1975

The quickest way to add pagination is to add parameter 'paging' to your initial options, like that:

$('#your_table_id').dataTable( {
    "paging": true
});

Parameter 'paging' is set to true by default.

You can also add parameter pagingType and set it to full_numbers, like that:

$('#your_table_id').dataTable( {
    "paging": true,
    "pagingType": "full_numbers"
});

To display other pagination buttons (first, last) and add custom names to them you should use below code:

$('#myTable').DataTable({
  "pagingType": "full_numbers",
  "language": {
    "paginate": {
      "first":    "«",
      "previous": "‹",
      "next":     "›",
      "last":     "»"
    }
  }
});

and to add the style you can override some CSS rules like that:

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border: 1px solid blue !important;
  /* other rules */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  border: 1px solid red !important;
  /* other rules */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  border: 1px solid grey !important;
  /* other rules */
}

Unfortunately, it is ugly because you have to use the flag !important.

The other more difficult way is to write own plugin.

Upvotes: 1

Related Questions