bootstrap-paginator伺服器端分頁使用方法詳解
阿新 • • 發佈:2020-02-15
本文例項為大家分享了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,dataType: "json",data: { page: page,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*/ }); }
PHP:
if($act=='getInfoList') { $bid=addslashes($_REQUEST['bid']); $curPage=addslashes($_REQUEST['page']);//當前頁碼 $pageSize=15; //每頁條數 $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];//總記錄數 //計算總頁數 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))); }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。