1

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

the attached image

1 Answer 1

1

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.

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

6 Comments

not at all, maybe u know how to add how to this symbol << 1 2 3 4 >> for changing page of table
@Rainbow Unicorn - please show me your HTML and JS code.
OK.. thanks.. so we have default pagination here and you wanna style the pagination..?
yes i want pagination such on image i.sstatic.net/KOflu.png
@Rainbow Unicorn - I have edited my above answer to help you.. please review a new way and let me know
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.