Sometimes the table's column number is too long, not conducive to user inquiries, so use JS to do a table page, the following is the relevant code
<script type= "Text/javascript" >
var pageSize = 15; The number of record bars displayed per page
var curpage=0; Current page
var lastpage; Last page
var direct=0; Direction
var Len; Total number of rows
var page; Total pages
var begin;
var end;
$ (document). Ready (function display () {
Len =$ ("#mytable tr"). Length-1; To find the total number of rows in this table, remove the first row
Page=len% pagesize==0? Len/pagesize:math.floor (len/pagesize) +1;//count the number of pages according to the record bar
Alert ("page===" +page);
curpage=1; Set Current as first page
Displaypage (1);//Show First page
document.getElementById ("Btn0"). Innerhtml= "Current" + Curpage + "/" + page + "pages per page"; Show how many pages are currently
document.getElementById ("Sjzl"). Innerhtml= "Total data" + len + ""; Display the amount of data
document.getElementById ("PageSize"). Value = PageSize;
$ ("#btn1"). Click (function FirstPage () {//home
curpage=1;
Direct = 0;
Displaypage ();
});
$ ("#btn2"). Click (function FrontPage () {//prev
Direct=-1;
Displaypage ();
});
$ ("#btn3"). Click (function NextPage () {//Next page
Direct=1;
Displaypage ();
});
$ ("#btn4"). Click (function LastPage () {//Last page
Curpage=page;
Direct = 0;
Displaypage ();
});
$ ("#btn5"). Click (function Changepage () {//goto page
Curpage=document.getelementbyid ("Changepage"). Value * 1;
if (!/^[1-9]\d*$/.test (curpage)) {
Alert ("Please enter a positive integer");
return;
}
if (Curpage > page) {
Alert ("Beyond data page");
return;
}
Direct = 0;
Displaypage ();
});
$ ("#pageSizeSet"). Click (function SetPageSize () {//Set how many records to display per page
PageSize = document.getElementById ("PageSize"). Value; The number of record bars displayed per page
if (!/^[1-9]\d*$/.test (pageSize)) {
Alert ("Please enter a positive integer");
return;
}
Len =$ ("#mytable tr"). Length-1;
Page=len% pagesize==0? Len/pagesize:math.floor (len/pagesize) +1;//count the number of pages according to the record bar
curpage=1; Current page
direct=0; Direction
FirstPage ();
});
});
function Displaypage () {
if (curpage <=1 && direct==-1) {
direct=0;
Alert ("Already the first page");
Return
else if (curpage >= page && direct==1) {
direct=0;
Alert ("Already the last page");
return;
}
LastPage = Curpage;
Fix a bug that Curpage calculates 0 when Len=1
if (Len > PageSize) {
Curpage = ((curpage + direct + len)% len);
} else {
Curpage = 1;
}
document.getElementById ("Btn0"). Innerhtml= "Current" + Curpage + "/" + page + "pages per page"; Show how many pages are currently
Begin= (curPage-1) *pagesize + 1;//start record number
End = begin + 1*pagesize-1; Record number at the end
if (End > Len) end=len;
$ ("#mytable tr"). Hide (); First, set this behavior to hide
$ ("#mytable tr"). each (function (i) {//Then, determine whether the bank resumes display by conditional judgment
if ((I>=begin && i<=end) | | | i==0)//Show Begin<=x<=end Records
$ (this). Show ();
});
}
</script>
