码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap分页功能

时间:2017-08-18 14:28:25      阅读:111      评论:0      收藏:0      [点我收藏+]

标签:jquer   dev   har   index   star   增加   add   query   initial   

基于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>

 演示结果:

技术分享

 

Bootstrap分页功能

标签:jquer   dev   har   index   star   增加   add   query   initial   

原文地址:http://www.cnblogs.com/folkzy/p/7389156.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!