bootstrap-paginator服務(wù)器端分頁使用方法詳解
更新時間:2020年02月13日 15:14:03 作者:捂汗縣長
這篇文章主要為大家詳細(xì)介紹了bootstrap-paginator服務(wù)器端分頁的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了bootstrap-paginator服務(wù)器端分頁的基本用法,供大家參考,具體內(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> <!-- 分頁導(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ā)送請求,后端為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; //當(dāng)前頁數(shù) var pageCount = data.pageCount; //總頁數(shù) var options = { bootstrapMajorVersion: 4, //版本 currentPage: currentPage, //當(dāng)前頁數(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; } }, //點(diǎn)擊事件,用于通過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']);//當(dāng)前頁碼 $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))); }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap Paginator+PageHelper實現(xiàn)分頁效果
- bootstrap paginator分頁插件的兩種使用方式實例詳解
- bootstrap paginator分頁前后臺用法示例
- 使用bootstrap-paginator.js 分頁來進(jìn)行ajax 異步分頁請求示例
- 根據(jù)Bootstrap Paginator改寫的js分頁插件
- Bootstrap分頁插件之Bootstrap Paginator實例詳解
- Bootstrap Paginator分頁插件使用方法詳解
- Bootstrap Paginator分頁插件與ajax相結(jié)合實現(xiàn)動態(tài)無刷新分頁效果
相關(guān)文章
JavaScript限制在客戶區(qū)可見范圍的拖拽(解決scrollLeft和scrollTop的問題)(2)
這篇文章主要介紹了JavaScript限制在客戶區(qū)可見范圍的拖拽,解決scrollLeft和scrollTop的問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05Bootstrap實現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄
這篇文章給大家介紹了Bootstrap實現(xiàn)漸變頂部固定自適應(yīng)導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01JavaScript中for of和for in的區(qū)別詳解
對于初學(xué)者,我們或許只知道無論是for of還是for in他們都有一個功能那就是遍歷,至于具體的細(xì)節(jié)或許我們不是很清楚,那么接下來我們就來詳細(xì)的區(qū)分一下for of和for in他們之間的不同點(diǎn)和相同點(diǎn),需要的朋友可以參考下2023-06-06一文概述ES7~12的語法及其相關(guān)使用規(guī)則
隨著JavaScript這門語言越來越流行,使得JavaScript這門語言越來越完善,這篇文章主要介紹了一文概述ES7~12的語法及其相關(guān)使用規(guī)則,需要的朋友可以參考下2023-01-01JavaScript檢測并限制復(fù)選框選中個數(shù)的方法
這篇文章主要介紹了JavaScript檢測并限制復(fù)選框選中個數(shù)的方法,涉及javascript針對復(fù)選框的判定與運(yùn)算相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-08-08