jQuery前台分页

jQuery前台分页

纯 jQuery 分页,不夹杂分页插件

主要用于自己定义分页,可用于除表格以外的分页(分页插件包主要只针对于表格),注释详细均可自己微调：

• 1.样式引用为bootstrap的样式与自加的样式

<style>
    button{width: 100px;height: 30px;border-radius: 15px;background: #ffffff;float: right;margin-right: 20px;}
        .buttonTure{border: 1px solid #38AAE7;color: #38AAE7;}
        .buttonFalse{border: none;}
        #myTable td{line-height: 30px;}
        .pagination>li>a:hover .pagination>li>a>span:hover{
            color: #ffffff;
            background-color: #337AB7;
            border-color: #dddddd;
        }
        .pagination>li>a:focus {
            color: #ffffff;
            background: #337AB7;
            border-color: #dddddd;
        }
        .pagination>li .aactive{
            color: #ffffff;
            background-color: #337AB7;
            border-color: #dddddd;
        }     
</style>

---

• 2.html部分

<table id = "myTable" class="table table-striped warning-table-expandable">
    <thead>
        <tr>
            <th class="text-center">编号</th>
            <th class="text-center">内容</th>
            <th class="text-center">操作</th>
       </tr>    
        </thead>
        <tbody class="table table-striped warning-table-expandable">

        </tbody>
</table>

    <!-- 页码部分 -->
    <nav aria-label="Page navigation" align="center">
        <ul class="pagination" style="margin: 0px;">
            <li id="pages">
                <span aria-hidden="true" id="prev" style="cursor: pointer;">上一页</span>
            </li>
            <li>
                <span aria-hidden="true" id="next" style="cursor: pointer;">下一页</span>
            </li>
        </ul>
    </nav>

• jq部分

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    var pageSize = 5;    //每页显示条数
    var curPage=0;       //当前页
    var lastPage;        //最后页
    var direct=0;        //方向
    var len;             //总行数
    var page;            //总页数
    var begin;           //每页第一条为总数的第几条
    var end;             //每页第最后条为总数的第几条
    $(document).ready(function () {
    for (var i = 1; i <= 20; i++) {
        $("tbody").append("<tr><th  class='text-center'>"+i+"</th><th  class='text-center'>整理简便知识"+i+"</th><th  class='text-center'>赞</th></tr>");
        };
    len =$("#myTable tr").length-1;    // 求这个表的总行数，剔除第一行介绍
    console.log($("#myTable tr"));
    page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数
    curPage=1;                         // 设置当前为第一页
    displayPage(1);                    //显示第一页

    $("#prev").click(function frontPage(){    // 上一页
        direct=-1;
        displayPage();
    });
    $("#next").click(function nextPage(){     // 下一页
        direct=1;
        displayPage();
    });
    for(var i=page;i>0;i--){  //根据总页数 生成对应的页码
        $("#pages").after("<li><a href=\"#\" onclick='changeCurPage(event)'>"+i+"</a></li>");
    }
    $(".pagination a").each(function(i){    //给当前页码增加样式
        if($(this).text()==curPage){
            $(this).attr("class","aactive");
        }else if($(this).text()!=curPage){
            $(this).removeClass();
        }
    });
});

function changeCurPage(ev){     //点击分页页码,显示该页的行
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    curPage=$(target).text()*1;
    direct = 0;
    displayPage();
}

function displayPage() {     //分页的显示主函数
    if (curPage <= 1 && direct == -1) {   //对上一页与下一页进行处理,如果到达第一页与最后一页不可按
        direct = 0;
        $(".pagination").find("li:first").attr("class","disabled");
        return;
    } else if (curPage >= page && direct == 1) {
        direct = 0;
        $(".pagination").find("li:last").attr("class","disabled");
        return;
    }else{
        $(".pagination").find("li:first").removeClass();
        $(".pagination").find("li:last").removeClass();
    }
    // 修复当len=1时，curPage计算得0的bug
    if (len > pageSize) {
        curPage = ((curPage + direct + len) % len);
    } else {
        curPage = 1;
    }

    begin=(curPage-1)*pageSize + 1;// 起始记录号(当前页 页条数)
    end = begin + 1*pageSize - 1;    // 末尾记录号
    if(end > len ) end=len;

    $(".pagination a").each(function(i){   //点击换页,页码样式的跟随
        console.log($(this).text());
        if($(this).text()==curPage){
            $(this).attr("class","aactive");
        }else if($(this).text()!=curPage){
            $(this).removeClass();
        }
    });

    $("#myTable tr").hide();
    $("#myTable tr").each(function(i){    // 然后，通过条件判断决定本行是否恢复显示
        if((i>=begin && i<=end || i==0) ){
            $(this).show();
        }//显示begin<=x<=end的记录

    });
}

效果图

思维导图:

注意：代码中有的段落为样式,与分页无关,已注明。

浏览器兼容

1. 测试为Chrome。
2. 不支持离线功能:bootstrap 和 jq 均为CDN
3. 省去下载bootstrap包和jq的过程,主要掌握该技巧