您的位置：首页 > Web前端 > BootStrap

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

2020-02-13 20:20 851 查看

本文实例为大家分享了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*/
});
}

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)));
}

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap paginator 分页

相关文章推荐

新的分享

章节导航