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"):
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)
- 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.
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.