bootstrap-paginator服务器端分页的基本用法

最新推荐文章于 2024-10-08 09:00:00 发布

laoyaotask

最新推荐文章于 2024-10-08 09:00:00 发布

阅读量284

点赞数

分类专栏： Web前端 bootstrap-paginator

本文链接：https://blog.csdn.net/laoyaotask/article/details/83180965

版权

Web前端同时被 2 个专栏收录

36 篇文章 5 订阅

订阅专栏

bootstrap-paginator

1 篇文章 0 订阅

订阅专栏

本文介绍了一种使用HTML、JavaScript和PHP实现的动态分页加载和更新列表的方法。前端采用Bootstrap和jQuery构建界面，通过AJAX异步请求后端数据，后端则用PHP处理数据并返回JSON格式。文章详细解释了前端如何展示数据和分页，以及后端如何分页查询和返回数据。

摘要由CSDN通过智能技术生成

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