Modifying DataTables pagination buttons

Hello, this is Hase from the Web Systems Department

Last time,how to speed up the display of DataTablesI wrote about

Introduction

By default, DataTables displays pagination buttons as shown in the image below

You can actually change the display of these pagination buttons

indeedmentioned, it is written in English, and there are surprisingly few articles introducing it in Japanese, so I thought I'd take this opportunity to introduce it here.

method

The method is very simple

`pagingType` as an option and specify the argument.

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // Display pagination buttons "pagingType": "simple_numbers" }); });

In the code above,the `simple_numbers`part.
By changing this, you can change the display of the pagination buttons in various ways.

The arguments that can be specified are listed below

simple_numbers

"Previous" and "Next" buttons, and page numbersIt consists of

the pagingTypeoption is not set, this setting will be used automatically.

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // Display pagination buttons "pagingType": "simple_numbers" }); });

■ Display

numbers

only of page number buttonsIt consists

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // Display pagination buttons "pagingType": "numbers" }); });

■ Display

simple

only of "Previous" and "Next" buttonsIt consists

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // Display pagination buttons "pagingType": "simple" }); });

■ Display

full

"First," "Previous," "Next," and "Last" buttonsIt consists of

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // Display pagination buttons "pagingType": "full" }); });

■ Display

full_numbers

"First," "Previous," "Next," and "Last" buttons, and page numbersIt consists of

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // Display pagination buttons "pagingType": "full_numbers" }); });

■ Display

first_last_numbers

"First" and "Last" buttons, and page numbersIt consists of

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // Display pagination buttons "pagingType": "first_last_numbers" }); });

■ Display

There are six of these

Additionally, you can configure settings other than those mentioned above by adding plugins.
This time, we'll introduce a selection of potentially useful ones.

input

"First," "Previous," "Next," and "Last" buttons, and page selection using input tagsIt consists of

■ Plug-ins

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.20/pagination/input.js"></script>

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // Display pagination buttons "pagingType": "input" }); });

■ Display

listbox

Page selectionis done using a select box.

■ Plug-ins

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.20/pagination/select.js"></script>

■ jQuery

jQuery(function($){ $("table.datatable").DataTable({ // Display pagination buttons "pagingType": "listbox" }); });

■ Display

There are many other plugins available, so please refer to the official documentation:
https://datatables.net/plug-ins/pagination/

summary

This is how easily you can change the display of the pagination buttons.
If you have a large number of pages, `full_numbers`will make page switching easier, making it more convenient.
Please give it a try.

lastly

I have launched "SEKARAKU Lab," a service site for the system development company I belong to.
Beyond offers a one-stop service for everything from server design and construction to operation, so please feel free to contact us if you have any problems with server-side development.
SEKARAKU Lab:[https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

That's all