- <html>
- <head>
- <meta charset='utf-8'>
- <style type="text/CSS">
- #idData {color: red;border: solid;text-align: center;}
- a{text-decoration: none;}
- .on{background-color: red;}
- </style>
- </head>
- <body onLoad="goPage(1,2);">
- <tr><td>liujinzhong1</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <table id="idData" width="70%">
- <tr><td>liujinzhong1</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong2</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong3</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong4</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong5</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong6</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong7</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong8</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong9</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong10</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong11</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong12</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong13</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong14</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong15</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong16</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong17</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong18</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong19</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong20</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong21</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong22</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong23</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong24</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong25</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong26</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong27</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong28</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong29</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong30</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong31</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong32</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong33</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong34</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong35</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong36</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong37</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong38</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong39</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong40</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong41</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong42</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong42</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong42</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- <tr><td>liujinzhong42</td><td>25</td><td > 男 </td><td > 山西吕梁 </td></tr>
- </table>
- <table width="60%" align="right">
- <tr><td><div id="barcon" name="barcon"></div></td></tr>
- </table>
- <script>
- //goPage(pno,psize) pno 当前页码 psize 每页显示个数
- function goPage(pno,psize){
- var itable = document.getElementById("idData");
- var num = itable.rows.length;// 表格所有行数 (所有记录数)
- console.log(num);
- var totalPage = 0;// 分多少页
- var pageSize = psize;// 每页显示行数
- console.log(psize);
- // 总共分几页
- if(num%pageSize!=0){
- totalPage=parseInt(num/pageSize)+1;
- }else{
- totalPage=parseInt(num/pageSize);
- }
- var currentPage = pno;// 当前页数
- var startRow = (currentPage - 1) * pageSize+1;// 每页开始的第一条数据
- var endRow = currentPage * pageSize;// 每页的结束的一条数据
- endRow = (endRow> num)? num : endRow;
- var irow=itable.getElementsByTagName('tr');
- for(var j=0;j<num;j++){
- irow[j].style.display = "none";
- for(var i=startRow-1;i<endRow;i++){
- irow[i].style.display = "block";
- }
- }
- var pageEnd = document.getElementById("pageEnd");
- var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
- if(currentPage>1){
- tempStr += "<a href=\"#\"onClick=\"goPage("+(1)+","+psize+")\"> 首页 </a>";
- tempStr += "<a href=\"#\"onClick=\"goPage("+(currentPage-1)+","+psize+")\">< 上一页 </a>"
- }else{
- tempStr += "首页";
- tempStr += "< 上一页"
- }
- if(currentPage>0&¤tPage<4){
- for(var pageIndex=1;pageIndex<6;pageIndex++){
- // 如果当前页数和 pageIndex 相等就加 on
- if(pageIndex==currentPage){
- tempStr += "<a class=\"on\"onclick=\"goPage("+pageIndex+","+psize+")\"><span>"+ pageIndex +"</span></a>";
- }else{
- tempStr += "<a onclick=\"goPage("+pageIndex+","+psize+")\"><span>"+ pageIndex +"</span></a>";
- }
- }
- }
- if(totalPage-2>=currentPage&¤tPage>3){
- tempStr += "...";
- tempStr += "<a onclick=\"goPage("+(currentPage-2)+","+psize+")\"><span>"+ (currentPage-2) +"</span></a>";
- tempStr += "<a onclick=\"goPage("+(currentPage-1)+","+psize+")\"><span>"+ (currentPage-1) +"</span></a>";
- tempStr += "<a class=\"on\"onclick=\"goPage("+(currentPage)+","+psize+")\"><span>"+ currentPage +"</span></a>";
- tempStr += "<a onclick=\"goPage("+(currentPage+1)+","+psize+")\"><span>"+ (currentPage+1) +"</span></a>";
- tempStr += "<a onclick=\"goPage("+(currentPage+2)+","+psize+")\"><span>"+ (currentPage+2) +"</span></a>";
- if(currentPage+2<totalPage){
- tempStr += "...";
- }
- }
- if(totalPage-1>=currentPage&¤tPage>totalPage-2){
- tempStr += "<a onclick=\"goPage("+(currentPage-3)+","+psize+")\"><span>"+ (currentPage-3) +"</span></a>";
- tempStr += "<a onclick=\"goPage("+(currentPage-2)+","+psize+")\"><span>"+ (currentPage-2) +"</span></a>";
- tempStr += "<a onclick=\"goPage("+(currentPage-1)+","+psize+")\"><span>"+ (currentPage-1) +"</span></a>";
- tempStr += "<a class=\"on\"onclick=\"goPage("+(currentPage)+","+psize+")\"><span>"+ currentPage +"</span></a>";
- tempStr += "<a onclick=\"goPage("+(currentPage+1)+","+psize+")\"><span>"+ (currentPage+1) +"</span></a>";
- }
- if(currentPage+1>totalPage){
- tempStr += "<a onclick=\"goPage("+(currentPage-4)+","+psize+")\"><span>"+ (currentPage-4) +"</span></a>";
- tempStr += "<a onclick=\"goPage("+(currentPage-3)+","+psize+")\"><span>"+ (currentPage-3) +"</span></a>";
- tempStr += "<a onclick=\"goPage("+(currentPage-2)+","+psize+")\"><span>"+ (currentPage-2) +"</span></a>";
- tempStr += "<a onclick=\"goPage("+(currentPage-1)+","+psize+")\"><span>"+ (currentPage-1) +"</span></a>";
- tempStr += "<a class=\"on\"onclick=\"goPage("+(currentPage)+","+psize+")\"><span>"+ currentPage +"</span></a>";
- }
- if(currentPage<totalPage){
- tempStr += "<a href=\"#\"onClick=\"goPage("+(currentPage+1)+","+psize+")\"> 下一页 ></a>";
- tempStr += "<a href=\"#\"onClick=\"goPage("+(totalPage)+","+psize+")\"> 尾页 </a>";
- }else{
- tempStr += "下一页 >";
- tempStr += "尾页";
- }
- document.getElementById("barcon").innerHTML = tempStr;
- }
- </script>
- </body>
来源: http://www.bubuko.com/infodetail-2554069.html