bootstrap-paginator分页插件的两种使用方式

2018-06-24 00:48:17来源：未知阅读 ()

分页有两种方式：

1. 前台分页：ajax一次请求获取全部数据，适合少量数据（万条数据以下）；

$.ajax({
        type: "GET",
        url: "",//后台接口地址
        dataType: "json",
        success: function (msg) {
            var pages = Math.ceil(msg.data / 5);//data是数据总量  
            var element = $('#id');//对应ul的id 
            element.bootstrapPaginator({
                bootstrapMajorVersion: 3,//bootstrap版本
                currentPage: page,//当前页面  
                numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li）  
                totalPages: pages //总页数 
            });
        }
    });

　　注意：1. bootstrap3中分页的HTML部分要求使用ul标签；2. 前台写分页算法。

2. 后台分页：发送多次ajax，每次获取指定页数的数据（万条数据以上）。

$('#id').bootstrapPaginator({
                bootstrapMajorVersion: 3,//bootstrap版本
                currentPage: 1,//当前页码
                totalPages: data.cn,//总页数（后台传过来的数据）
                numberOfPages: 5,//一页显示几个按钮
                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: '../../interface/xw_zxdt_list.php',
                        type: 'post',
                        data: {page: page},
                        dataType: 'json',
                        success: function (data) {
                            tplData(data);//处理成功返回的数据
                        }
                    });
                }
            });

　　注意：1. bootstrap3中分页的HTML部分要求使用ul标签；2. 后台写分页算法。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有