bootstrap-paginator服务器端分页使用方法详解

本文实例为大家分享了bootstrap-paginator服务器端分页的基本用法，供大家参考，具体内容如下

HTML：

<script src="../js/jquery-3.2.1.min.js"></script><script src="../js/bootstrap.min.js"></script><script src="../js/bootstrap-paginator.min.js"></script> <!-- 主内容列表 --> <ol class="list-group" id="infoList>  <li class="list-group-item"><span class="fa fa-cog fa-spin fa-fw"></span>正在读取数据……</li></ol><!-- 分页导航器 --><div style="text-align:center;">  <ul id="useroption" class="pagination"></ul></div>

JS：

//读取消息列表*************************************************// queryInfoList(paraValue); function queryInfoList(bid) {  $.ajax({   async: true,   type: "get",   url: "../php/list.php",//向后端发送请求，后端为PHP   dataType: "json", //要求后端返回数据为JSON格式   data: { page: '1',bid:bid,act:'getInfoList' }, //请求参数，首次请求页码为1   cache: false,   success: function (data)   {        lis = "";    for (eachRs in data.rs)    {//拼接对应<li>需要的值     lis += "<li class='list-group-item'><a title='"+data.rs[eachRs]['title']+"' class='newsLink' href='read.html?id="+data.rs[eachRs]['id']+"'>" + data.rs[eachRs]['title'] + "</a> <span class='text-muted pull-right'>"+data.rs[eachRs]['posttime']+"</span></li>";    };    $("#infoList").html(lis);    var currentPage = data.CurrentPage; //当前页数    var pageCount = data.pageCount; //总页数      var options = {     bootstrapMajorVersion: 4, //版本     currentPage: currentPage, //当前页数     totalPages: pageCount, //总页数     numberOfPages: 10,//分页器显示10条     shouldShowPage: true,//是否显示该按钮     itemTexts: function (type, page, current)     {      switch (type)      {       case "first":        return "首页";       case "prev":        return "上页";       case "next":        return "下页";       case "last":        return "末页";       case "page":        return page;      }     },          //点击事件，用于通过Ajax来刷新整个list列表     onPageClicked: function (event, originalEvent, type, page)     {      $.ajax({       async: true,       url: "../php/list.php",       type: "get",       dataType: "json",       data: { page: page,bid:bid ,act:'getInfoList'},       cache: false,       success: function (data)       {        lis = "";        for (eachRs in data.rs)        {//拼接对应<li>需要的值         lis += "<li class='list-group-item'><a title='"+data.rs[eachRs]['title']+"' class='newsLink' href='read.html?id="+data.rs[eachRs]['id']+"'>" + data.rs[eachRs]['title'] + "</a> <span class='text-muted pull-right'>"+data.rs[eachRs]['posttime']+"</span></li>";        };        $("#infoList").html(lis);       }/*success*/      });     }    };    $('#useroption').bootstrapPaginator(options);   }/*success*/  }); }