简单的分页查询功能实现
首先先将后端的内容写好，这里我使用的是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> 当前页:"+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>
主要实现的是功能部分，没有加css样式.