bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)

html部分:

1
2
<ul class="pagination"></ul> <!--bootstrap3版本用ul包裹-->
<div class="pagination"></div><!--bootstrap2版本用div包裹-->

  

刷新页面版Bootstrap Paginator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var options = {
        currentPage:'<%= currentPage %>'||1, //设置当前页,默认起始页为第一页
        totalPages:'<%= totalPages %>', //总页数
        numberOfPages:5, //设置控件显示的页码数,跟后台计算出来的总页数没多大关系
        bootstrapMajorVersion:3,//如果是bootstrap3版本需要加此标识,并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本,则DOM包含元素是DIV
        useBootstrapTooltip:'true',//是否显示tip提示框
        pageUrl:function(type,page, current){
         return '?gotoPage='+page //为每个页码设置url访问请求链接,page为页码数
        },
        itemTexts:function(type,page, current){//文字翻译
            switch (type) {
                case "first":
                    return "首页";
                case "prev":
                    return "上一页";
                case "next":
                    return "下一页";
                case "last":
                    return "尾页";
                case "page":
                    return page;
            }
        }
   }
 
$('.pagination').bootstrapPaginator(options);

 

AJAX版Bootstrap Paginator:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function AjaxPaginator(obj) {
    $.ajax({
        type:'POST',
        url: '/getData',
        dataType: 'JSON',
        /*success*/complete: function (data) {
                var currentPage=data.currentPage|1;
                var totalPages=data.totalPages|10;
                var options = {
                    currentPage: currentPage, //当前页
                    totalPages: totalPages, //总页数
                    numberOfPages: 5, //设置控件显示的页码数
                    bootstrapMajorVersion: 3,//如果是bootstrap3版本需要加此标识,并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本,则DOM包含元素是DIV
                    useBootstrapTooltip: false,//是否显示tip提示框
                    itemTexts:function(type,page, current){//文字翻译
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "尾页";
                            case "page":
                                return page;
                        }
                    },
                    onPageClicked: function (event, originalEvent, type, page) {
                        $.ajax({
                            url:'/getData?CurrentPage='+page, //点击分页提交当前页码
                            success:function(data){
                                if(data!=null){
                                    //DOM操作
                                }
                            }
                        })
                    }
                }
                obj.bootstrapPaginator(options);
        }
    })
}
AjaxPaginator($('.pagination'));

 

AJAX版Bootstrap Paginator封装版:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
封装:
 
 var commonFn={};
 
    commonFn.setAjaxPaginator = function (paginatorSelector, data, option) {
        var totals = data.count;//总条数
        var pageSize = option.pageSize; //每页条数
        var totalPages = 1;
        if (totals != 0) {
            if (totals % pageSize == 0) {
                totalPages = totals / pageSize;
            } else {
                totalPages = Math.ceil(totals / pageSize);
            }
        }
        if (totalPages > 1) {
            //当总页数大于1时生成显示分页否则不显示分页
            commonFn.buildAjaxPaginator(paginatorSelector, $.extend(option, {totalPages: totalPages}))
        }
    }
 
    commonFn.buildAjaxPaginator = function (paginatorSelector, option) {
        var _option = {
            currentPage: 1, //当前页
            totalPages: 1, //总页数
            numberOfPages: 5, //设置控件显示的页码数
            bootstrapMajorVersion: 3,//如果是bootstrap3版本需要加此标识,并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本,则DOM包含元素是DIV
            useBootstrapTooltip: false,//是否显示tip提示框
            itemTexts: function (type, page, current) {//文字翻译
                switch (type) {
                    case "first":
                        return "首页";
                    case "prev":
                        return "上一页";
                    case "next":
                        return "下一页";
                    case "last":
                        return "尾页";
                    case "page":
                        return page;
                }
            },
            onPageClicked: function (event, originalEvent, type, page, pageSize) {
            }
        };
        $.extend(_option, option);
        paginatorSelector.bootstrapPaginator(_option);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
调用:
     //HTML
    <span class="query_btn">查询</span>
    <ul class="pagination"></ul>
    <div class="loadPageDataSelector"></div>
 
    //JS
        //点击查询按钮进行查询
    $('.query_btn').click(function(){
        queryOperate(1,10)
    })
 
    var defaultPagination={"page":1,"pageSize":10}; //默认配置的当前页和每页显示条数
 
    //重写点击分页执行的方法 传递当前点击的页面
    function onPageClick(event, originalEvent, type, page) { //点击分页插件时传递的当前页和每页显示条数
       queryOperate(page,defaultPagination.pageSize);
    };
 
    //查询操作
    function queryOperate(page,pageSize){
        var queryData={"name":"leyi"};//其他的表单提交值
        $.extend(queryData, {page: page||1, pageSize: pageSize || 10});//提交查询操作的参数
        $.ajax({
            data:queryData,
            url:'xxx',
            /*success*/complete:function(data){
                var data={data:"返回的数据内容",count:100/*假设总条数100*/}
                //生成分页
                commonFn.setAjaxPaginator($('.pagination'),data,{currentPage: queryData.page, pageSize:queryData.pageSize,onPageClicked: onPageClick});
                //DOM操作显示装载的数据内容
                $('.loadPageDataSelector').html(data.data+queryData.page)
            }
        })
    }

   

如果不使用bootstrap只是单独使用该分页插件需要拷贝下面的样式表  

自定义样式表:


bootstrap-paginator源码备份:


参考资料:http://m.oschina.net/blog/204587  http://www.tuicool.com/articles/ZRfuyi

posted @   韭菜茄子  阅读(7513)  评论(1编辑  收藏  举报
编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
· 程序员常用高效实用工具推荐,办公效率提升利器!
点击右上角即可分享
微信分享提示