JS--Paging function

HTML code

'Utf-8'><script type="Text/javascript"Src="Page.js"></script> <style type="Text/css">#idData {color:red;border:solid;text-Align:center;} A{text-Decoration:none;} </style>"gopage (1,10);"> <table id="Iddata"Width="70%"> <tr><td>liujinzhong1</td><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong2</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong3</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong4</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong5</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong6</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong7</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong8</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong9</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong10</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong11</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong12</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong13</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong14</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong15</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong16</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong17</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong18</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong19</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong20</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong21</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong22</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong23</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong24</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong25</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong26</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong27</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong28</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong29</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong30</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong31</td ><td> -</td><td> men </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong32< /td><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong33</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong34</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong35</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong36</td ><td> -</td><td> male </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong37</td ><td> -</td><td> men </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong38< /td><td> -</td><td> men </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong39< /td><td> -</td><td> men </td><td> Shanxi Luliang </td></tr> <tr><td>liujinzhong40< /td><td> -</td><td> men </td><td> Shanxi luliang </td></tr> </table> <table width="60%"align=" Right"> <tr><td><div id="Barcon"Name="Barcon"></div></td></tr> </table></body> 

JS Paging

/** * Pagination function * pno--pages * psize--number of records per page * Pagination part is starting from the real data row, so there is a constant added and minus to determine the true number of records * Pure JS paging is essentially a data row full load, to complete the paging function by displaying the properties **/function Gopage (pno,psize) {varitable = document.getElementById ("Iddata"); varnum = itable.rows.length;//table All rows (All records)console.log (num); varTotalpage =0;//Total Pages    varPageSize = psize;//number of rows displayed per page//a total of several pages    if(Num/pagesize > parseint (num/pageSize)) {Totalpage=parseint (num/pagesize) +1; }Else{totalpage=parseint (num/pageSize); }       varCurrentPage = pno;//Current Page    varStartRow = (CurrentPage-1) * pagesize+1;//start displayed line to       varEndrow = CurrentPage * pageSize;//end the displayed lineEndrow = (Endrow > num)? Num:endrow; +Console.log (Endrow); //traversing display data for paging     for(varI=1;i< (num+1); i++){            varIRow = itable.rows[i-1]; if(I>=startrow && i<=Endrow) {Irow.style.display="Block"; }Else{Irow.style.display="None"; }    }    varPageend = document.getElementById ("Pageend"); varTempStr ="Total"+num+"Record points"+totalpage+"page Current Section"+currentpage+"page"; if(currentpage>1) {TempStr+="<a href=\ "#\" onclick=\ "Gopage ("+(1)+","+psize+") \ "> Home </a>"; TempStr+="<a href=\ "#\" onclick=\ "Gopage ("+ (currentpage-1)+","+psize+") \ >< prev </a>"    }Else{tempstr+="Home Page"; TempStr+="< Previous page"; }    if(currentpage<totalpage) {TempStr+="<a href=\ "#\" onclick=\ "Gopage ("+ (currentpage+1)+","+psize+") \ > Next ></a>"; TempStr+="<a href=\ "#\" onclick=\ "Gopage ("+ (Totalpage) +","+psize+") \ "> Last </a>"; }Else{tempstr+="Next page >"; TempStr+="last page"; } document.getElementById ("Barcon"). InnerHTML =TempStr; }

JS--Paging function