Bootstrap分页功能

基于Bootsrap增加跳转页高亮功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <script>
        
    var previousObj = null;

    $(document).ready(function(){
        var pageMax = 10;
        $("#pageIndex").append("<li onclick=\"jumpToPage(this, -1)\"><a>&laquo;</a><li>");
        for(var i=1; i<pageMax+1; i++) {
            if(1==i) {
                previousObj = $("#pageIndex").append("<li id='firstActive' onclick=\"jumpToPage(this," + (i) + ")\"><a>" + (i) +"</a><li>");
            }
            else {
                $("#pageIndex").append("<li onclick=\"jumpToPage(this," + (i) + ")\"><a>" + (i) +"</a><li>");
            }
        }
        $("#pageIndex").append("<li onclick=\"jumpToPage(this, 101)\"><a>&raquo;</a><li>");
        
        previousObj = $("#firstActive");
        $(previousObj).addClass("active");
    });
    
    function requestBlogs(start, end) {
        console.log("AJAX request");
    }
    
    function jumpToPage(obj, page) {

        console.log("Jump to page: " + page);
        $(previousObj).removeClass("active");
        $(obj).addClass("active");
        previousObj = obj;
        
        requestBlogs();
    }
    </script>

</head>

<body>

<ul id="pageIndex" class="pagination"></ul>

</body>
</html>

 演示结果：

 

posted @ 2017-08-18 13:27  folkzy  阅读(176)  评论(0)  编辑  收藏  举报