A very useful jquery table paging plug-in -- jpages

Plug-in: https://github.com/luis-almeida/jPages

I have found many paging plug-ins on the Internet, but their usage is complicated, which is not conducive to the learning of new users. The following Code shows that it is convenient and concise to use. The biggest benefit of this plug-in is that no matter whether the table is statically generated or dynamically generated by the program, it can be paged and used very well.

Since the principle is to first load all the tables to the client at a time, and then split the complete table into multiple pages for display, I think for tables with a very large number of rows, this plug-in is not applicable and may cause slow loading.

<LINK rel = "stylesheet" href = "CSS/jpages.css"> <SCRIPT type = "text/JavaScript" src = "JS/jquery-1.8.2.min.js"> </SCRIPT> <SCRIPT src = "JS/jpages. JS "> </SCRIPT> <SCRIPT> $ (function () {$ (" Div. holder "). jpages ({containerid: "Movies", // The Window tag ID previous: "yellow", // specifies the homepage button next: "→ ", // indicates the last page's button perpage: 15, // The number of rows in the table displayed on each page. Delay: 20 // animation duration during paging, 0 indicates no animation });}); </SCRIPT>
<Div class = "Holder"> </div> // The page navigation is displayed. <Table border = "1"> <thead> <tr> <TH> rank </Th> <TH> rating </Th> <TH> title </Th> <TH> votes </Th> </tr> </thead> <tbody id = "Movies"> <SCRIPT> for (I = 1; I <= 100; I ++) {$ ("# movies "). append ("<tr> <TD> I </TD> </ tr> ");} </SCRIPT> </tbody> </table> </div> <! --! End of # Content --> </div> <! --! End of # container -->
Final result: