Best way to cycle through pages of data in multiple tables?


I'm aggregating network data from all our Cisco switch ports, plus other stuff from other databases, and am outputting into an HTML file that renders strikingly like this (except I'm an idiot and just realized I drew "tbody" everywhere instead of "thead"): enter image description here

I'm only displaying 10 rows of data for now in each table (which they are HTML tables with tbody, thead, and tfoot tags assigned; No PHP, Javascript, etc. at all yet, just pure HTML) to keep everything neat and similar (some switches have 48 ports, some 24, etc.). I'd like to use those "Prev, 1, 2, [...], Next" buttons to cycle through the data of each switch, preferably without the page refreshing.

What I've used in the past is this setup:

  • Give each possible data set to show up its own "div" id
  • Make their "style.display" attribute = 'none' (except the first page)
  • Have a Javascript function that puts these divs in an array
  • The function can hide and show divs and will show only the div I pass as an argument
  • Tie this function to an HTML button's onClick event

Is this the best way to go? Since I'm creating this HTML dynamically (I'm outputting text from a C++ program to index.html like a boss), it would mean an issue of assigning div ID's to many different sections, and even then could I create the function to update only the div that the button's parent is in?

I'm thinking this is possible and certainly time-consuming, but I'm not a great web programmer. If there is a better way out there, I'd like to hear it before I proceed to spend too much time on this.


Answers:


If you don't mind an additional library, datatables would make paging easy (and, as you mentioned, just pre-populate then let JS do the work).

The downside is it's an included library (which means either directly including it in the HTML within a <script> or find a CDN reference to it). The upside is that the paging is built-in and all you have to worry about is getting the data in there. Then, with a few quick config options, and optionally some .CSS changes, you have the desired result.