bootstrap-paginator+jq实现简单的分页

这个页数多了没有省略号的

  <link rel="stylesheet" href="../css/bootstrap.css">
  <script type="text/javascript" src="../script/jquery.min.js"></script>
  <script type="text/javascript" src="../script/bootstrap.min.js"></script>
  <!--<script type="text/javascript" src="../script/bootstrap-paginator.js"></script>-->

<div class="content"></div>
<div class="page" id="pagination">
        <ul class="pagination pagination-sm"></ul>
</div>

//只要分页导航，不要可设置每页显示几条记录----------------------------------------------
<script type="text/javascript">
    var pcard_number;//卡号
    var pCardId;
    //总记录数
    var totalNum = 0;

    //总页数
    var totalPage = 0;

    //默认每页显示数
    var avageNum = 10;

    //默认显示第一页
    var currentPage = 1;
    apiready = function() {
        pcard_number = api.pageParam.pcard_number;
        $(".pcard_number").text(pcard_number);
        pCardId = api.pageParam.pCardId;

        getUserList(currentPage,avageNum);
    }


    //与后台交互获取数据，异步加载到页面上
    function getUserList(pageNum,pageSize){
        currentPage = pageNum;
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '获取数据中...',
            text: '先喝杯茶...',
            modal: false
        });
        api.ajax({
            url: api.getPrefs({
                sync: true,
                key: 'host_address'
            }) + '/open/PhysicalCard/expenseRecord',
            method: 'post',
            // dataType: 'json',
            contentType:'application/x-www-form-urlencoded',
            data: {
              values: {
                  pCardId: pCardId,
                  pageNum: pageNum,
                  pageSize: pageSize
              }
            }
        }, function(ret, err) {
            api.hideProgress();
            if (ret) {
                console.log(JSON.stringify(ret));
                if (ret.code == 0) {
                    var data = ret.data;
                    totalNum = data.totalNums;
                    totalPage = data.totalPages;
                    var expensesHistories = data.expensesHistories;
                    var html = '';
                    for(var i=0;i<expensesHistories.length;i++){
                      html +=
                          '<div class="flex flex_around flex_col_center recordBox" data-id="'+expensesHistories[i].id+'">'+
                            '<span class="recordDate">'+expensesHistories[i].create_time+'</span>'+
                            '<span class="recordTimes">'+expensesHistories[i].consumption+'次</span>'+
                          '</div>'
                    }
                    $(".content").html(html)

                    if($('#pagination ul').html().length == 0){
                      console.log("首次加载列表时才渲染除分页导航栏");
                      initPagination(totalPage,totalNum);
                    }

                } else {
                    api.toast({
                        msg: JSON.stringify(ret),
                        duration: 2000,
                        location: 'bottom'
                    });
                }
            } else {
                api.toast({
                    msg: JSON.stringify(err),
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });
    }

    //初始化分页栏
    function initPagination(totalPage,totalNum) {
      console.log(totalPage+"----------"+totalNum);
        $('#pagination ul').html(" ");
        // $('#pagination').append(
        //     '<ul class="pagination" style="display:inline;">' +
        //     '<span style="float: right;">每页显示' +
        //     '<select id="dataNum">' +
        //     '<option value="1">1</option>' +
        //     '<option value="2">2</option>' +
        //     '<option value="3">3</option>' +
        //     '</select>条记录,总共有' + totalPage + '页，总共' + totalNum + '条记录</span>' +
        //     '</ul>'
        // )
        // οnclick="getUserList('+ (currentPage - 1) + ','+ avageNum + ')"
        $("#pagination ul").append(
            '<li><a href="javascript:void(0);" id="prev">上一页</a></li>'
        )
        for (var i = 1; i <= totalPage; i++) {
            $("#pagination ul").append(
                '<li id="page'+i+'"><a href="javascript:void(0);"  οnclick="getUserList(' + i + ',' + avageNum + ')">' + i + '</a></li>'
            )
        }
        $("#pagination ul").append(
            '<li><a href="javascript:void(0);"  id="next">下一页</a></li>'
        )
        // $("select option[value=" + avageNum + "]").attr('selected', true)
        $("#page1").addClass("active");
        checkA();
    }

    //很关键，因为执行initPagination方法时，将select删除再重新添加，所以需要先将select上的结点移除off
    //然后再绑定结点on，如果不这么做，会出现change事件只被触发一次。
    // $(document).off('change','#dataNum').on('change','#dataNum',function(){
    //     avageNum = $(this).children('option:selected').val();
    //     currentPage = 1;
    //     getUserList(currentPage,avageNum);
    //     initPagination(totalPage,totalNum);
    // });

    //设置分页栏点击时候的高亮
    $("#pagination").on("click","li",function(){
        var aText = $(this).find('a').html();
        checkA();
        if (aText == "上一页"){
            console.log("上一页");
            console.log((currentPage - 1)+"-----------"+avageNum);
            $(".pagination > li").removeClass("active");
            $("#page"+(currentPage -1)).addClass("active");
            getUserList(currentPage - 1,avageNum);
            checkA();
        }else if(aText == "下一页"){
            console.log("下一页");
            console.log((currentPage + 1)+"-----------"+avageNum);
            $(".pagination > li").removeClass("active");
            $("#page"+(currentPage + 1)).addClass("active");
            getUserList(currentPage + 1,avageNum);
            checkA();
        }else{
          console.log("数字");
          console.log(aText+"-----------"+avageNum);
            $(".pagination > li").removeClass("active");
            $(this).addClass("active");
            getUserList(parseInt(aText),avageNum);
            checkA();
        }
    })

    //因为其他地方都需要用到这两句，所以封装出来
    //主要是用于检测当前页如果为首页，或者尾页时，上一页和下一页设置为不可选中状态
    function checkA() {
        currentPage == 1 ? $("#prev").addClass("btn btn-default disabled") : $("#prev").removeClass("btn btn-default disabled");
        currentPage == totalPage ? $("#next").addClass("btn btn-default disabled") : $("#next").removeClass("btn btn-default disabled");

    }

效果图：

image.png

原文效果图：

image.png
参考原文链接
https://blog.csdn.net/chengtanyong4777/article/details/79711334