Using JS to make HTML table page pagination example (JS implementation paging)

Sometimes table column number is too long, not conducive to user query, so the use of JS made a table page, the following is the relevant code

One, JS code

<script type="Text/javascript">varPageSize = the;//number of records displayed per page             varCurpage=0;//Current Page             varLastPage;//last page             vardirect=0;//direction            varLen//total number of rows            varPage//Total Pages            varbegin; varend; $ (document). Ready (function display () {Len=$("#mytable TR"). Length-1;//find the total number of rows in this table, excluding the first linePage=len% pagesize==0? Len/pagesize:math.floor (len/pagesize) +1;//Count pages According to the number of records//alert ("page===" +page);Curpage=1;//set Current to first pageDisplaypage (1);//Show First Pagedocument.getElementById ("Btn0"). innerhtml="Current"+ Curpage +"/"+ page +"Page per page";//show current how many pagesdocument.getElementById ("Sjzl"). innerhtml="Total Data"+ len +"";//display the amount of datadocument.getElementById ("pageSize"). Value =pageSize; $("#btn1"). Click (function FirstPage () {//Home PageCurpage=1; Direct=0;                Displaypage ();                }); $("#btn2"). Click (function FrontPage () {//Previous Pagedirect=-1;                Displaypage ();                }); $("#btn3"). Click (function NextPage () {//Next Pagedirect=1;                Displaypage ();                }); $("#btn4"). Click (function LastPage () {//last pageCurpage=page; Direct=0;                Displaypage ();                }); $("#btn5"). Click (function Changepage () {//Turn PageCurpage=document.getelementbyid ("Changepage"). Value *1; if(!/^[1-9]\d*$/. Test (Curpage)) {Alert ("Please enter a positive integer"); return ; }                    if(Curpage >page) {Alert ("Beyond the data page"); return ; } Direct=0;                Displaypage ();                               }); $("#pageSizeSet"). Click (function SetPageSize () {//set how many records are displayed per pagePageSize = document.getElementById ("pageSize"). Value;//number of records 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 pages According to the number of recordsCurpage=1;//Current Pagedirect=0;//directionFirstPage ();            });            }); function Displaypage () {if(Curpage <=1&& direct==-1) {Direct=0; Alert ("It's already the first page."); return; } Else if(curpage >= page && direct==1) {Direct=0; Alert ("It's the last page."); return ; } lastpage=Curpage; //fixed a bug that Curpage calculated 0 when Len=1                if(Len >pageSize) {Curpage= ((curpage + direct + len)%Len); } Else{curpage=1; } document.getElementById ("Btn0"). innerhtml="Current"+ Curpage +"/"+ page +"Page per page";//show current how many pagesbegin= (curpage-1) *pagesize +1;//Start record numberEnd = 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, the condition determines whether the bank resumes the display                    if((I>=begin && i<=end) | | i==0)//Show records for Begin<=x<=end$( This). Show ();             }); }    </script>

Second, HTML code

<a id="Btn0"></a><input id="pageSize"Type="text"Size="1"Maxlength="2"Value="Getdefaultvalue ()"/><a> Bar </a> <a href="#"Id="Pagesizeset"> Settings </a> <a id="Sjzl"></a> <a href="#"Id="BTN1"> Home </a><a href="#"Id="btn2"> Prev </a><a href="#"Id="Btn3"> Next </a><a href="#"Id="Btn4"> Last </a> <a> go to </a><input id="Changepage"Type="text"Size="1"Maxlength="4"/><a> page </a><a href="#"Id="Btn5"> Jump </a><table id="mytable"align="Center">... The remaining table code

The last example results

Using JS to make HTML table page pagination example (JS implementation paging)