本文實(shí)例為大家分享了bootstrap-paginator服務(wù)器端分頁(yè)的基本用法，供大家參考，具體內(nèi)容如下

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> <!-- 主內(nèi)容列表 --> <ol class="list-group" id="infoList>  <li class="list-group-item"><span class="fa fa-cog fa-spin fa-fw"></span>正在讀取數(shù)據(jù)……</li></ol><!-- 分頁(yè)導(dǎo)航器 --><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",//向后端發(fā)送請(qǐng)求，后端為PHP   dataType: "json", //要求后端返回?cái)?shù)據(jù)為JSON格式   data: { page: '1',bid:bid,act:'getInfoList' }, //請(qǐng)求參數(shù)，首次請(qǐng)求頁(yè)碼為1   cache: false,   success: function (data)   {        lis = "";    for (eachRs in data.rs)    {//拼接對(duì)應(yīng)<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; //當(dāng)前頁(yè)數(shù)    var pageCount = data.pageCount; //總頁(yè)數(shù)      var options = {     bootstrapMajorVersion: 4, //版本     currentPage: currentPage, //當(dāng)前頁(yè)數(shù)     totalPages: pageCount, //總頁(yè)數(shù)     numberOfPages: 10,//分頁(yè)器顯示10條     shouldShowPage: true,//是否顯示該按鈕     itemTexts: function (type, page, current)     {      switch (type)      {       case "first":        return "首頁(yè)";       case "prev":        return "上頁(yè)";       case "next":        return "下頁(yè)";       case "last":        return "末頁(yè)";       case "page":        return page;      }     },          //點(diǎn)擊事件，用于通過(guò)Ajax來(lái)刷新整個(gè)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)        {//拼接對(duì)應(yīng)<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*/  }); }