bootstrap-paginator + ajax 实现动态翻页功能

Posted 2020-10-24 三体

1、下载http://plugins.jquery.com/bootstrap-paginator/

2、引用<script src="/static/bootstrap/js/bootstrap-paginator.min.js"></script>

3、首先定义一个html标签ul用以显示分页<ul style="margin: 0;" id="bp-3-Paginator-sm"></ul>

4、定义一个公共的js方法用来控制分页信息

//显示分页信息
function pageInfo(totalNum, page_size, currentPage){
    //分页显示数据
    var options = {
        size                  : "small",//设置显示大小
        bootstrapMajorVersion : 3,
        currentPage           : currentPage||1,//设置当前页，默认起始页为第一页
        numberOfPages         : 5,//每次展示多少页
        totalPages            : Math.ceil(totalNum/page_size),//总页数
        alignment             : "left",//显示位置
        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(e,originalEvent,type,page){//点击页数时，触发该方法
            var page_size = $("#page_size").val();
            test(page_size, page);//调用ajax方法,如果这里还需要校验查询条件的话，可以写个单独的js方法，在此处调用该方法，在校验方法中去调用ajax方法
        },  
    };
    $(‘#bp-3-Paginator-sm‘).bootstrapPaginator(options);
}

5、页面加载的时候显示方式

$(function() {
    pageInfo(totalNum, page_size, 1);//默认显示第一页
});

6、ajax方式显示

function test(page_size, page_index){
    $.ajax({
        url:"",//请求URL
        type:‘GET‘, //请求方法
        data:{"param1" : value1},//请求参数
        dataType:"json", //返回的数据格式：json/xml/html/script/jsonp/text
        beforeSend:function(xhr){
            //请求之前要做的事情,此操作的结果不会影响下面方法的执行
        },
        success:function(data,textStatus,jqXHR){
            //请求成功要做的事情
            //关于总数据多少，每页显示多少数据，总工多少页，这些数据在这边更新
            pageInfo(data.totalNum, page_size, page_index)
            return false;
        },
        error:function(xhr,textStatus){
            //请求异常做的事情
            return false;
        },
        complete:function(){
            //最后要做的事情
    }});
}