CODEWITHSUNDEEP
tabulator
Mufasa
Mufasa

Reputation: 387

Tabulator: How to provide my own custom pagination footer and have Tabulator page the data?

I want Tabulator to perform all the pagination for me locally but want to provide my own custom pagination controls. If set the footerElement to my custom pagination panel Tabulator displays it correctly but does not page the data. I have to also set these additional properties for it to page the data correctly:

pagination: 'local',
paginationSize: 25

However, with these additional properties set, it displays both my custom pagination panel as well as Tabulators own implementation.

Is there a way of achieving what I need?

I am using:

Alternatively, is there a way to include a rows indicator within the Tabulator pagination that displays something like:

1-25 of 80

The above indicates that we are displaying rows 1 to 25 out of a total of 80 rows.

Upvotes: 1

Views: 3356

Answers (1)

Oli Folkerd
Oli Folkerd

Reputation: 8398

You would need to replace the table footer with your own element using the footerElement option:

var table = new Tabulator("#example-table", {
    footerElement:"<div class='table-footer><button>Custom Button</button></div>", //add a custom button to the footer element
});

Checkout the Footer Element Documentation for full details

Alternatively you could use a little CSS to hide the table footer by setting the .tabulator-footer class to display:none;

Upvotes: 1

Related Questions