Search code examples
javascripthtmlhtml-tabletable-footer

Creating a table footer line to display results 1 to n

Let's say I had a table with 100 results in it. How would i use JS to add a footer line to the table that contains something like:

Displaying results 26-50 out of 100

And then have something like:

Page: 1 2 3 4

I'd like to be able to just click on the page numbers and have it toggle between which set of results to show me. I.e. if i click on the number 1 it will display results 1-25, and if i click on the number 3 it will display results 51-75. I'd like to do this without forcing the page to reload.

I was thinking that basically you would somehow use onclick to change the class of the items from display: none to display: block but I'm not really sure

Solution

  • Did you see the Jquery Datatable plugin ?

    https://datatables.net/

    It does the job.