原生JQUERY html5 分页

来源：互联网发布：单片机8个流水灯程序编辑：程序博客网时间：2024/05/21 17:23

<!DOCTYPE html>
<html>
<head>
    <title>JqueryPage.html</title>
    <script src="js/jquery.js"></script>
   <script type="text/javascript">
            var pageSize = 15;   //每页显示的记录条数
            var curPage   = 0;    //当前页
            var lastPage;        //最后页d
            var page =   0;       //方向
            var totalRows;       //总行数
            var totalPage;       //总页数
            var begin;
            var end;
            $(document).ready(function display(){
                totalRows =$("#mytable tr").length - 1;    // 求这个表的总行数，剔除第一行列头
                totalPage=totalRows % pageSize==0 ? totalRows/pageSize : Math.floor(totalRows/pageSize)+1;//根据记录条数，计算页数
                // alert("totalPage==="+totalPage);
                curPage=1;    // 设置当前为第一页
                displayPage(1);//显示第一页
                document.getElementById("currPage").innerHTML="当前 " + curPage + "/" + totalPage + " 页    每页 ";    // 显示当前多少页
                document.getElementById("tatalrow").innerHTML="数据总量 " + totalRows + "";           // 显示数据量
                document.getElementById("pageSize").value = pageSize;
                $("#fristPage").click(function firstPage(){    // 首页
                    curPage=1;page = 0; displayPage();
                });
                $("#upPage").click(function frontPage(){    // 上一页
                    page=-1;displayPage();
                });
                $("#nextPage").click(function nextPage(){    // 下一页
                    page=1; displayPage();
                });
                $("#lastPage").click(function lastPage(){    // 尾页
                    curPage=totalPage;
                    page = 0;
                    displayPage();
                });
                $("#goto").click(function changePage(){    // 转页
                    curPage=document.getElementById("changePage").value * 1;
                    if (!/^[1-9]\d*$/.test(curPage)) {//alert("请输入正整数");
                        return ;
                    }
                    if (curPage > totalPage) {// alert("超出数据页面");
                        return ;
                    }
                    page = 0;
                    displayPage();
                });
                $("#pageSizeSet").click(function setPageSize(){    // 设置每页显示多少条记录
                    pageSize = document.getElementById("pageSize").value;    //每页显示的记录条数
                    if (!/^[1-9]\d*$/.test(pageSize)) {// alert("请输入正整数");
                        return ;
                    }
                    totalRows =$("#mytable tr").length - 1;
                    totalPage=totalRows % pageSize==0 ? totalRows/pageSize : Math.floor(totalRows/pageSize)+1;//根据记录条数，计算页数
                    curPage=1;        //当前页
                    page=0;        //方向
                });
            });
            function displayPage(){
                if(curPage <=1 && page==-1){
                    page=0;//alert("已经是第一页了");
                    return;
                } else if (curPage >= totalPage && page==1) {
                    page=0;// alert("已经是最后一页了");
                    return ;
                }
                lastPage = curPage;// 修复当totalRows=1时，curPage计算得0的bug
                if (totalRows > pageSize) {
                    curPage = ((curPage + page + totalRows) % totalRows);
                } else {
                    curPage = 1;
                }
                document.getElementById("currPage").innerHTML="当前 " + curPage + "/" + totalPage + " 页    每页 ";        // 显示当前多少页
                begin=(curPage-1)*pageSize + 1;// 起始记录号
                end = begin + 1*pageSize - 1;    // 末尾记录号
                if(end > totalRows ) end=totalRows;
                $("#mytable tr").hide();               // 首先，设置这行为隐藏
                $("#mytable tr").each(function(i){    // 然后，通过条件判断决定本行是否恢复显示
                    if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录
                        $(this).show();
                });
             }
    </script>
</head>

<body>
    <a id="currPage"></a>
   <input id="pageSize" type="text" size="1" maxlength="2" value="getDefaultValue()"/><a> 条 </a> <a href="#" id="pageSizeSet">设置</a>
   <a id="tatalrow"></a>
   <a href="#" id="fristPage">首页</a>
   <a href="#" id="upPage">上一页</a>
   <a href="#" id="nextPage">下一页</a>
   <a href="#" id="lastPage">尾页</a>
   <a>转到 </a>
   <input id="changePage" type="text" size="1" maxlength="4"/>
   <a>页 </a>
   <a href="#" id="goto">跳转</a>
   <table id="mytable" align="center" class="table table-hover table-condensed table-bordered">
   <tr>
       <th>哈哈哈</th>
       <th>哈哈哈</th>
       <th>哈哈哈</th>
       <th>哈哈哈</th>
       <th>哈哈哈</th>
       <th>哈哈哈</th>
   </tr>
       <tr>
           <td>123456</td>
           <td>123456</td>
           <td>123456</td>
           <td>123456</td>
           <td>123456</td>
           <td>123456</td>
       </tr>
       <tr>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>3</td>
           <td>3</td>
           <td>3</td>
           <td>3</td>
           <td>3</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>4</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr><tr>
           <td>5</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>6</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>7</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>8</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>9</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>10</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>11</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>12</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>13</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>14</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>15</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
       <tr>
           <td>16</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
           <td>2234567</td>
       </tr>
   </table>
</body>
</html>

0 0