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 @ 
 
韭菜茄子 
阅读(7516) 
评论(1) 
编辑 
收藏 
举报


        

	    
	    
    









    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
    

· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
    

· 基于Microsoft.Extensions.AI核心库实现RAG应用
    

· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
    

· 开发者必知的日志记录最佳实践
    



    

    阅读排行：
    

 ·          winform 绘制太阳，地球，月球 运作规律
        

 ·          超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
        

 ·          上周热点回顾（3.3-3.9）
        

 ·          TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
        

 ·          AI 智能体引爆开源社区「GitHub 热点速览」
        



    

    



	

	

	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示