Modifying DataTables pagination buttons

Hello, this is Hase from the Web Systems Department

Last time I wrote about how to speed up the display speed of DataTables

Introduction

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

You can actually change the display of these pagination buttons

explained in the official documentation , it is written in English and there are surprisingly few articles introducing it in Japanese, so I would like to take this opportunity to introduce it here.

method

The method is very simple

pagingType as an option and specify the arguments.

■ 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

It consists of "Previous" and "Next" buttons and page numbers

If you do not set the pagingType

■ jQuery

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

■ Display

numbers

It consists of only page number buttons

■ jQuery

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

■ Display

simple

It consists of only "Previous" and "Next" buttons

■ jQuery

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

■ Display

full

It consists of "First", "Previous", "Next", and "Last" buttons

■ jQuery

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

■ Display

full_numbers

It consists of "First", "Previous", "Next", "Last" buttons and page numbers

■ jQuery

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

■ Display

first_last_numbers

It consists of "First" and "Last" buttons and page numbers

■ jQuery

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

■ Display

There are six of these

You can also add plugins to make settings other than those listed above.
Here we will introduce some plugins that may be useful.

input

It consists of "First", "Previous", "Next", and "Last" buttons, and page specification using input tags

■ 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

is specified in the 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

In this way, you can easily change the display of the pagination buttons.
If there are many pages , I think it will be more convenient to switch pages by setting it to
full_numbers Please give it a try.

lastly

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

That's all