這篇文章主要為大家展示了“bootstrap-paginator服務(wù)器端分頁使用的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“bootstrap-paginator服務(wù)器端分頁使用的示例分析”這篇文章吧。

目前創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、敖漢網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

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>

<!-- 分頁導(dǎo)航器 -->
<div >
  <ul id="useroption" class="pagination"></ul>
</div>

JS：

//讀取消息列表*************************************************//
 queryInfoList(paraValue);
 function queryInfoList(bid)
 {
  $.ajax({
   async: true,
   type: "get",
   url: "../php/list.php",//向后端發(fā)送請求，后端為PHP
   dataType: "json", //要求后端返回數(shù)據(jù)為JSON格式
   data: { page: '1',bid:bid,act:'getInfoList' }, //請求參數(shù)，首次請求頁碼為1
   cache: false,
   success: function (data)
   {
    
    lis = "";
    for (eachRs in data.rs)
    {//拼接對應(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; //當前頁數(shù)
    var pageCount = data.pageCount; //總頁數(shù)
  
    var options = {
     bootstrapMajorVersion: 4, //版本
     currentPage: currentPage, //當前頁數(shù)
     totalPages: pageCount, //總頁數(shù)
     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)
        {//拼接對應(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*/
  });
 }

PHP：

if($act=='getInfoList')
{
 $bid=addslashes($_REQUEST['bid']);
 $curPage=addslashes($_REQUEST['page']);//當前頁碼
 $pageSize=15; //每頁條數(shù)
 $rsAll=$dbh->query("select count(id) from article where board=$bid and wid=30 and auditor is not null and accessable=1")->fetchAll();
 $rsAllCount=$rsAll[0][0];//總記錄數(shù)

 //計算總頁數(shù)
 if($rsAllCount%$pageSize==0)
  $pageAllCount=$rsAllCount/$pageSize;
 else
  $pageAllCount=intval($rsAllCount/$pageSize)+1;

 $beginRs=($curPage-1)*$pageSize; //計算起始記錄
 $curRsSql="select id,title, posttime from article where board=$bid and wid=30 and auditor is not null and accessable=1 order by posttime desc limit $beginRs,$pageSize";
 $rsCur=$dbh->query($curRsSql)->fetchAll();
 echo(json_encode(array("rs"=>$rsCur,"pageCount"=>$pageAllCount,"curPage"=>$curPage,"sql"=>$curRsSql)));
}

以上是“bootstrap-paginator服務(wù)器端分頁使用的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前名稱：bootstrap-paginator服務(wù)器端分頁使用的示例分析
標題鏈接：http://chinadenli.net/article44/pehgee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站改版、網(wǎng)站收錄、App設(shè)計、網(wǎng)站設(shè)計公司、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)