jquery+bootstrap分页工具条插件

最新推荐文章于 2025-12-02 15:55:42 发布

原创最新推荐文章于 2025-12-02 15:55:42 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #bootstrap #分页 #插件 #javascript

jquery笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于jQuery和Bootstrap的分页插件实现方法。该插件能够方便地在网页中添加分页导航栏，并支持自定义每页显示数量、当前页等参数。

插件实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Grid Template for Bootstrap</title>
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script>
        //定义全局变量
        var page_size = 0;//总页数
        var current_page_num = 1;//当前页码
        var page_num = 0; //分页工具条最多可以显示的页数
        var temp_current_page_method = null;
        var page_ination_ul = "<ul class='pagination' id='ination_page_ul'></ul>";
        var _front_page = "<li class='' id='front_page'><a href='javascript:void(0)' onclick='${_front_page}' id='front_Page_a'>上一页</a></li>";
        var _next_page = "<li class='' id='next_page'><a href='javascript:void(0)' id='next_Page_a' onclick='${_next_page}'>下一页</a></li>";
        var temp_page = "<li class='' id='${temp_page_li}'><a href='javascript:void(0)' onclick=${temp_page_method} id='${temp_page_a}'>${_page}</a></li>"
        //初始化
        function pageination_init(container,size,pagenum,current_page_method){
            page_size = size;
            page_num = pagenum;
            temp_current_page_method = current_page_method;
            //如果总页数小于1则不显示分页工具条
            if(size<=1){
                return;
            }
            var temp_page_size = 0;
            if(page_size<=page_num){
                temp_page_size = page_size;
            }else{
                temp_page_size = page_num;
            }
            $("#"+container).html(page_ination_ul);
            add_page_ination_li(1,temp_page_size,1);
        }

        //跳转到某一页
        function jump_to(){

        }

        function add_page_ination_li(start,end,page_num){
            //初始化上一页和下一页
            var front_page_html = _front_page;
            var next_page_html = _next_page;
            front_page_html = front_page_html.replace("${_front_page}","get_front_page()");
            next_page_html = next_page_html.replace("${_next_page}","get_next_page()");
            $("#ination_page_ul").append(front_page_html);//先append上一页
            for(var i=start;i<=end;i++){
                var temp_page_html = temp_page;
                temp_page_html = temp_page_html.replace("${_page}",i);
                temp_page_html = temp_page_html.replace("${temp_page_li}","page_li_"+i);
                temp_page_html = temp_page_html.replace("${temp_page_a}","page_a_"+i);
                temp_page_html = temp_page_html.replace("${temp_page_method}","get_current_page('"+i+"')");
                $("#ination_page_ul").append(temp_page_html);
            }
            $("#ination_page_ul").append(next_page_html);
            get_current_page(page_num);

        }

        function get_current_page(page_num){
            /*if(current_page_num == page_num){
             return;
             }*/

            current_page_num = page_num;
            $("li[id^=page_li_]").removeClass("disabled");
            $("#page_li_"+page_num).addClass("disabled");
            if(page_num==1){
                $("#front_page").addClass("disabled");
            }else{
                $("#front_page").removeClass("disabled");
            }
            if(page_num==page_size){
                $("#next_page").addClass("disabled");
            }else{
                $("#next_page").removeClass("disabled");
            }
            //触发获取数据事件
            temp_current_page_method(page_num);
        }

        function get_front_page(){
            if(current_page_num<=1){
                return;
            }
            current_page_num = Number($.trim(current_page_num));
            current_page_num = current_page_num-1;

            if($("#page_li_"+current_page_num).html()!=undefined&&$("#page_li_"+current_page_num).html()!=null){
                get_current_page(current_page_num);
                return;
            }
            var _blog = current_page_num-page_num+1;
            var temp_num = 0
            if(_blog<1){
                temp_num = 1 ;
            }else{
                temp_num = _blog;
            }
            $("#ination_page_ul").html("");
            add_page_ination_li(temp_num,current_page_num,current_page_num);
        }

        function get_next_page(){
            if(current_page_num>=page_size){
                return;
            }
            current_page_num = Number($.trim(current_page_num));
            current_page_num = current_page_num+1;
            if($("#page_li_"+current_page_num).html()!=undefined&&$("#page_li_"+current_page_num).html()!=null){
                get_current_page(current_page_num);
                return;
            }

            var _blog = current_page_num+page_num-1;
            var temp_num = 0
            if(_blog>page_size){
                temp_num =  page_size;
            }else{
                temp_num = _blog;
            }
            $("#ination_page_ul").html("");
            add_page_ination_li(current_page_num,temp_num,current_page_num);
        }

        /*test_current_page_method为获取后台第num页数据并显示到页面上的方法*/
        function test_current_page_method(num){
            //alert(num)
            $("#testdiv1").html("<p>这是第<h3 style='color:red'>"+num+"</h3>页的数据</p>");
        }
        /*你要做的就是将插件激活*/
        $(document).ready(function(){
            pageination_init("testdiv2",23,5,test_current_page_method);
        });
    </script>
</head>
<body>
     <div style=''>
      <div id="testdiv1"></div>
      <div id='testdiv2'></div>
     </div>
</body>
</html>

一.适合环境

jquery+bootstrp构建的html页面

二.代码片段

//定义全局变量
var page_size = 0;//总页数
var current_page_num = 1;//当前页码
var page_num = 0; //分页工具条最多可以显示的页数
var temp_current_page_method = null;
var page_ination_ul = "<ul class='pagination' id='ination_page_ul'></ul>";
var _front_page = "<li class='' id='front_page'><a href='javascript:void(0)' onclick='${_front_page}' id='front_Page_a'>上一页</a></li>";
var _next_page = "<li class='' id='next_page'><a href='javascript:void(0)' id='next_Page_a' onclick='${_next_page}'>下一页</a></li>";
var temp_page = "<li class='' id='${temp_page_li}'><a href='javascript:void(0)' onclick=${temp_page_method} id='${temp_page_a}'>${_page}</a></li>"
//初始化
function pageination_init(container,size,pagenum,current_page_method){
    page_size = size;
    page_num = pagenum;
    temp_current_page_method = current_page_method;
    //如果总页数小于1则不显示分页工具条
    if(size<=1){
       return;
    }
    var temp_page_size = 0;
    if(page_size<=page_num){
        temp_page_size = page_size;
    }else{
        temp_page_size = page_num;
    }
    $("#"+container).html(page_ination_ul);
    add_page_ination_li(1,temp_page_size,1);
}

function add_page_ination_li(start,end,page_num){
    //初始化上一页和下一页
    var front_page_html = _front_page;
    var next_page_html = _next_page;
    front_page_html = front_page_html.replace("${_front_page}","get_front_page()");
    next_page_html = next_page_html.replace("${_next_page}","get_next_page()");
    $("#ination_page_ul").append(front_page_html);//先append上一页
    for(var i=start;i<=end;i++){
        var temp_page_html = temp_page;
        temp_page_html = temp_page_html.replace("${_page}",i);
        temp_page_html = temp_page_html.replace("${temp_page_li}","page_li_"+i);
        temp_page_html = temp_page_html.replace("${temp_page_a}","page_a_"+i);
        temp_page_html = temp_page_html.replace("${temp_page_method}","get_current_page('"+i+"')");
        $("#ination_page_ul").append(temp_page_html);
    }
    $("#ination_page_ul").append(next_page_html);
    get_current_page(page_num);

}

function get_current_page(page_num){
    current_page_num = page_num;
    $("li[id^=page_li_]").removeClass("disabled");
    $("#page_li_"+page_num).addClass("disabled");
    if(page_num==1){
       $("#front_page").addClass("disabled");
    }else{
        $("#front_page").removeClass("disabled");
    }
    if(page_num==page_size){
        $("#next_page").addClass("disabled");
    }else{
        $("#next_page").removeClass("disabled");
    }
    //触发获取数据事件
    temp_current_page_method(page_num);
}

function get_front_page(){
   if(current_page_num<=1){
        return;
   }
   current_page_num = Number($.trim(current_page_num));
   current_page_num = current_page_num-1;

   if($("#page_li_"+current_page_num).html()!=undefined&&$("#page_li_"+current_page_num).html()!=null){
       get_current_page(current_page_num);
       return;
   }
   var _blog = current_page_num-page_num+1;
   var temp_num = 0
   if(_blog<1){
       temp_num = 1 ;
   }else{
       temp_num = _blog;
   }
   $("#ination_page_ul").html("");
   add_page_ination_li(temp_num,current_page_num,current_page_num);
}

function get_next_page(){
    if(current_page_num>=page_size){
        return;
    }
    current_page_num = Number($.trim(current_page_num));
    current_page_num = current_page_num+1;
    if($("#page_li_"+current_page_num).html()!=undefined&&$("#page_li_"+current_page_num).html()!=null){
        get_current_page(current_page_num);
        return;
    }
    var _blog = current_page_num+page_num-1;
    var temp_num = 0
    if(_blog>page_size){
        temp_num =  page_size;
    }else{
        temp_num = _blog;
    }
    $("#ination_page_ul").html("");
    add_page_ination_li(current_page_num,temp_num,current_page_num);
}

//测试
function test_pageination(){
    pageination_init("test_pageination",23,5,test_current_page_method);
}

function test_current_page_method(num){
    //alert(num)
}

三.使用方法:

1,创建一个js文件，将上面的代码复制进去，然后在页面引入（前提是必须引入jquery和bootstrp）

2，自己再写一个js文件，用来取后台数据，首先需要一个方法获取要展示的数据的总条数，然后调用初始化方法

pageination_init(container,size,pagenum,current_page_method);

参数说明：container是包裹分页工具条的div的id（注意不要加#），size是需要展示的数据的总数目，pageunm是分页工具条最多显示的页数（比喻说你要显示页号不大于5，显示的效果就是1,2,3,4,5.第六叶开始隐藏了），current_page_method是你根据指定的页号获取后台数据的方法名字

四.刚写完没好好测试，如果使用过程有什么问题可以小纸条...

------------------------------------------------------------------------------如果你看到这里，恭喜你，现在有一个比较完美的更新提供给你---------------------------------------------------------------------

这一次，我将分页写成一个jquery插件的方式，这样你可以在同一个页面设置多个分页工具条

(function ($) {
            var pageination = function(options){
                var config={}
                config.container = options.container==undefined?this.defaults.container:options.container
                config.current_page_num = options.current_page_num==undefined?this.defaults.current_page_num:options.current_page_num
                config.page_size = options.page_size==undefined?this.defaults.page_size:options.page_size
                config.allow_size = options.allow_size==undefined?this.defaults.allow_size:options.allow_size
                config.return_method = options.return_method==undefined?this.defaults.return_method:options.return_method
                var opts=config
                render_pageination()
                function render_pageination(){
                    if(opts.page_size<1){
                        return;
                    }
                    var a=Math.floor(opts.allow_size/2),
                            o=opts.current_page_num,
                            b=o - a,
                            c=o + a,
                            d=o>a?c:opts.allow_size,
                            e=o>a?b: 1,
                            f=d>opts.page_size?opts.page_size: d,
                            g=e+opts.allow_size>opts.page_size?opts.page_size-opts.allow_size+1: e,
                            h=opts.allow_size%2==0?f:f+1
                    var start = g<1?1:g
                    var end = h
                    //拼接html
                    var ht = "<ul class='pagination'><li ><a href='#' name='to_front'>«</a></li><li ><a href='#' name='1'>第1页</a></li>"
                    for(var i=start;i<end;i++){
                        if(i==opts.current_page_num){
                            ht +="<li class='active'><a href='#' name="+i+">"+i+"</a></li>"
                        }else{
                            ht +="<li><a href='#' name="+i+">"+i+"</a></li>"
                        }
                    }

                    ht +="<li><a href='#' name='"+opts.page_size+"'>第"+opts.page_size+"页</a></li><li><a href='#' name='to_next'>»</a></li></ul>"
                    var _container = opts.container.split("&")
                    for(var i=0;i<_container.length;i++){
                        $("#"+_container[i]).html(ht)
                        $("#"+_container[i]).children("ul").children("li").children("a").bind("click",clickmethod)
                    }
                    $("#homepage_pagination").children("ul").addClass("pagination-sm")
                }

                function clickmethod(event){
                    //上一页
                    if(event.target.name=='to_front'){
                        opts.current_page_num=opts.current_page_num-1<1?1:opts.current_page_num-1
                        opts.return_method(opts.current_page_num)
                        render_pageination()
                        return;
                    }

                    //下一页
                    if(event.target.name=='to_next'){
                        opts.current_page_num=opts.current_page_num+1>opts.page_size?opts.page_size:opts.current_page_num+1
                        opts.return_method(opts.current_page_num)
                        render_pageination()
                        return;
                    }
                    opts.current_page_num = parseInt(event.target.name)
                    opts.return_method(opts.current_page_num)
                    render_pageination()
                }
            };
            pageination.prototype = {
                defaults :{
                    'container':"body",
                    'current_page_num':1,
                    'page_size' : 18,
                    'allow_size':5,
                    'return_method':""
                }
            };
            window.pageination = pageination;
        })(jQuery);

跟上面的一样，要使用它，你必须要引入jquery.min.js和bootstrap.min.css

使用方法

function tt(num){
            //alert(num)
        }

        $(function(){
            var p1 = new pageination({
                container:"homepage_pagination_top",
                page_size:19,
                allow_size:7,
                return_method:tt
            })

            var p2 = new pageination({
                container:"homepage_pagination",
                page_size:30,
                return_method:tt
            })
        })