简单的分页查询功能实现

最新推荐文章于 2023-01-31 11:00:27 发布

原创最新推荐文章于 2023-01-31 11:00:27 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了如何使用PHP实现简单的分页查询功能。通过前端HTML和JavaScript与后端PHP配合，实现了基本的数据分页展示，内容中侧重于功能实现，未涉及CSS样式设计。

简单的分页查询功能实现

首先先将后端的内容写好，这里我使用的是PHP语音

<?php
    #配置默认行数  $pageSize
    @$pageSize = $_REQUEST["pageSize"];
     if($pageSize == null){
        $pageSize = 10;
     }
    #配置默认当前页  $currentPage 
    @$currentPage = $_REQUEST["currentPage"];
     if($currentPage == null){
        $currentPage = 1;
     }
    #配置首页记录要显示的下标  $start
    $start = ($currentPage-1) * $pageSize;
    #连接数据库
    require("init.php");
    #配置尾页  $totalPage
    $sql = "select count(*) from emp";
    $result = mysqli_query($conn,$sql);
    $row = mysqli_fetch_row($result);
    $total = $row[0];
    if($total % $pageSize == 0){
        $totalPage = $total/$pageSize;
    }else{
        $totalPage =ceil($total/$pageSize);
    }
    #配置上一页  $prePage
    $prePage = 1;
    if($currentPage > 1){
        $prePage = $currentPage-1;
    }
    #配置下一页  $nextPage
    $nextPage = $totalPage;
    if($currentPage < $totalPage){
        $nextPage = $currentPage+1;
    }
    #分页语句
    $sql = "select * from emp limit $start,$pageSize";
    #接受返回结果
    $result = mysqli_query($conn,$sql);
    #将结果变更为关联数组
    $array = mysqli_fetch_all($result,MYSQLI_ASSOC);
    #创建json对象的默认配置
    $pageInfo = "{\"firstPage\":1,\"prePage\":$prePage,\"nextPage\":$nextPage,\"totalPage\":$totalPage}";
    #将  $pageInfo 追加到 $array 内
    Array_push($array,$pageInfo);
    #将关联数组转化为json对象打印
    echo json_encode($array);

?>

前端script代码

<script>
        //创建函数
        function loadData(currentPage){
            //ajax异步请求响应
            var xhr = new XMLHttpRequest();
            var url ="page.php?currentPage="+currentPage;
            xhr.open("get",url,true);
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var resText = xhr.responseText;
                    //取出JSON对象转换为数组
                    var list =  JSON.parse(resText);
                    var html="";
                    //遍历分页内容
                    for(var i = 0; i < list.length-1;i++){
                        var user = list[i];
                        html += "<tr>";
							html += "<td>"+user.ename+"</td>";
							html += "<td>"+user.idCardNum+"</td>";
                            html += "<td>"+user.salary+"</td>";
                            html += "<td>"+user.deptId+"</td>";
						html += "</tr>";
                    }
                    //取出追加的默认配置项
                    var pageObj = JSON.parse(list[list.length-1]);
                    //拼接分页配置
                    html += "<tr>";
                            html += "<td><a href='javascript:loadData(1)'>首页</a></td>";
                            html += "<td><a href='javascript:loadData("+pageObj.prePage+")'>上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;当前页:"+currentPage+"</td>";
                            html += "<td><a href='javascript:loadData("+pageObj.nextPage+")'>下一页</a></td>";
                            html += "<td><a href='javascript:loadData("+pageObj.totalPage+")'>尾页</a></td>";
                    html += "</tr>";
                    //将拼接好的内容插入到标签内
                    document.getElementById("tbody").innerHTML = html;
                }
            }
            xhr.send(null);
        }
    </script>

html部分

<body onload="loadData(1)">
    <table border="1px">
        <thead>
            <tr>
                <td>用户名</td>
                <td>身份证号码</td>
                <td>工资</td>
                <td>部门编号</td>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>
</body>