How to add a custom independent button next to pagination (on the same row)

olusia454

Hi everyone,

I have a DataTable with pagination displayed below the table (showing page numbers like 1, 2, 3, etc.). The pagination area stretches across the full width of the container.

I’d like to add my own independent button (for example, “Add new order”) to the right side of the pagination, on the same horizontal line.

However, since the pagination takes up the full width, I’m not sure what’s the best way to place my button next to it — without modifying the DataTables HTML structure directly (I’d prefer to handle it via CSS or JS).

What’s the recommended approach to:

insert a custom button next to the pagination controls,

keep it responsive, so it stays aligned even if the table width changes?

Thanks in advance!

allan

The DataTables pager is responsive (as of v2) - i.e. it will remove page number buttons until it fits into the area available to it. Try it out by resizing the browser window.

To add a custom button, use the layout option with an area and a function to create your element: https://live.datatables.net/kaxuwifa/1/edit .

Note that the custom button will be dropped onto its own line on small screens. CSS can be used to stop that if you need.

Allan