The first one: It is very common and simple to display the number of pages.
Reproduction image:
•This is HTML code, very simple (I seem to see the little look of being disliked)
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-"><script src="js/jquery-...js"></script><script src="js/demo.js"></script><link rel="stylesheet" href="js/demo.css"/><title></title></head><body><table><thead><tthead><tr><th>Name</th><th>Gender</th><th>Number</th><th>Age</th></tr></thead><tbody><tr><td>Zhang San</td><td>Male</td><td></td><td></tr><tr><td>tom</td><td>Male< /td><td></td><td></td></tr><td>Li Si</td><td>Male</td><td></td><td></td></tr><td>Edang</td><td>Male</td><td></td></tr><td>Eya</td><td>Female</td><td></td></tr><td></tr></tbody></html>
•The following is the JS code
$(function(){var $table=$('table');//Get the table object var currentPage=;//Set the default value of the current page to var pageSize=;//Set the number of displayed pages for each page $table.bind('paging', function () {$table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+)*pageSize).show();//Hide all rows in the tbody first, and then display the data through slice combined with the current number of pages and the number of pages displayed});var sumRows=$table.find('tbody tr').length;//Get the total number of data rows var sumPages=Math.ceil(sumRows/pageSize);//Get the total number of pages var $pager=$('<div></div>');for(var pageIndex=;pageIndex<sumPages;pageIndex++){$('<a href="#"><span>'+(pageIndex+)+'</span></a>').bind("click",{"newPage":pageIndex},function(event){currentPage=event.data["newPage"];$table.trigger("paging");//Add a trigger paging function for each page to be displayed}).appendTo($pager);$pager.append(" ");}$pager.insertAfter($table);$table.trigger("paging");});The second: Implement forward page and back page
Reproduction image:
•This is all the code, and it is still very simple to use native JS (it seems to have an inexplicable love for native JS, is there any)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-" /><title>table pagination</title></head><body><style type="text/css">.tablebox{border:solid px #ddd;}.tablebox td{text-align:center;border:solid px #ddd;padding:px;}</style><div><table cellpadding="" cellpacing=""><tbody id="table"><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></ td><td></td></tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td></tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td ></td><td></td><td></td></tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tbody></table><div style="height:px;margin:px ;"><span id="spanFirst">First Page</span><span id="spanPre">Previous Page</span><span id="spanNext">Next Page</span><span id="spanLast">Last Page</span>Page</span>Page/Total<span id="spanTotalPage"></span>page</div></div><script type="text/javascript">var theTable = document.getElementById("table");var totalPage = document.getElementById("spanTotalPage");var pageNum = document.getElementById("spanPageNum");var spanPre = document.getElementById("spanPre");var spanNext = document.getElementById("spanNext");var spanFirst = document.getElementById("spanFirst");var spanLast = document.getElementById("spanLast");var numberRowsInTable = theTable.rows.length;var pageSize = ;var page = ;//Next page function next() {hideTable();currentRow = pageSize * page;maxRow = currentRow + pageSize;if ( maxRow > numberRowsInTable )maxRow = numberRowsInTable;for ( var i = currentRow; i< maxRow; i++ ) {theTable.rows[i].style.display = '';}page++;if ( maxRow == numberRowsInTable ){nextText();lastText();}showPage();preLink();firstLink();}//Previous page function pre() {hideTable();page--;currentRow = pageSize * page;maxRow = currentRow - pageSize;if ( currentRow > numberRowsInTable )currentRow = numberRowsInTable; for ( var i = maxRow; i< currentRow; i++ ) {theTable.rows[i].style.display = '';}if ( maxRow == ) {preText();firstText();}showPage();nextLink();lastLink();}//First page function first() {hideTable();page = ;for ( var i = ; i<pageSize; i++ ) {theTable.rows[i].style.display = '';}showPage();preText();nextLink();lastLink();}//First page function last() {hideTable();page = pageCount();currentRow = pageSize * (page - );for ( var i = currentRow; i<numberRowsInTable; i++ ) {theTable.rows[i].style.display = '';}showPage();preLink();nextText();firstLink();}function hideTable() {for ( var i = ; i<numberRowsInTable; i++ ) {theTable.rows[i].style.display = 'none';}}function showPage() {pageNum.innerHTML = page;}//Total number of pages function pageCount() {var count = ;if ( numberRowsInTable%pageSize != ) count = ; return parseInt(numberRowsInTable/pageSize) + count;}//Show link function preLink() { spanPre.innerHTML = "<a href='javascript:pre();'>Previous page</a>"; }function preText() { spanPre.innerHTML = "Previous page"; }function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>Next page</a>"; }function preText() { spanPre.innerHTML = "<a href='javascript:next();'>Next page</a>"; }function nextLink() { spanNext.innerHTML = "<a href='javascript:next();'>Next page</a>"; }function nextText() { spanNext.innerHTML = "Next page"; }function firstLink() { spanFirst.innerHTML = "<a href='javascript:first();'>First page</a>"; }function firstText() { spanFirst.innerHTML = "First page"; }function lastLink() { spanLast.innerHTML = "<a href='javascript:last();'>Last page</a>"; }function lastText() { spanLast.innerHTML = "Last page"; }//Hide table function hide() {for ( var i = pageSize; i<numberRowsInTable; i++ ) {theTable.rows[i].style.display = 'none';}totalPage.innerHTML = pageCount();pageNum.innerHTML = '';nextLink();lastLink();}hide();</script></body></html>The above content is the JS code introduced by the editor to realize the effect of table data paging. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time. Thank you very much for your support to the Wulin Network website!