php分页封装(10行代码搞定分页，优化版本1)

程序员文章站 2024-03-19 12:21:28

...

模板html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		a{
			cursor: pointer;
			color: red;
		}
	</style>
</head>
<body>
	<table>
		<thead>
			<td>编号</td>
			<td>用户名</td>
			<td>邮箱</td>
			<td>手机号</td>
			<td>操作</td>
		</thead>
		<tbody id="tby">
			
		</tbody>
		<tfoot>
			<td><a id="first">首页</a></td>
			<td><a id="pre">上一页</a></td>
			<td><a id="next">下一页</a></td>
			<td><a id="last">尾页</a></td>
		</tfoot>
	</table>
	
	<script src="js/jquery.min.js"></script>
	<script src="js/fenye.js"></script>
	<script>
		//前端需要改动的地方只有下面几行代码。后端php有3个地方需要改(已标注)：
		//前端需要改的是：init(...)中的参数
		//php后端需要改的是：
		//(1)init.php中有两处
		//(2)fenye.php中需指定具体字段
		first.onclick=function(){
			firstPage();
		}
		pre.onclick=function(){
			prePage();
		}
		next.onclick=function(){
			nextPage();
		}
		last.onclick=function(){
			lastPage();
		}
		window.onload=function(){
			//参数1:元素id
			//参数2:每页显示数量
			//参数3:是否显示操作  1:显示 0:不显示
			//参数4:除操作列之外的列数
			//显示操作的部分 0:不显示 1:显示编辑 2:显示删除
			init('tby',3,1,3,4);
			firstPage();
		}
	</script>
</body>
</html>

注：需引入Jquery

fenye.js:

//JQ作用域
//还可以加排序 动态选择每页页数（这里是我后面要改进的，不用管）
var curPage=1;
var totalPage=1;
var pageSize=4;
var ysId='',Num2=1,Num3=2;
var lNum=4;
function firstPage() {loadPage(1);}
function prePage() {loadPage(curPage-1);}
function nextPage() {loadPage(curPage+1);}
function lastPage() {loadPage(totalPage);}
function init(id,num1,num2,num3,ln){
	ysId=id;
	pageSize=num1;
	Num2=num2;
	Num3=num3;
	lNum=ln;
}

function loadPage(page){
	$.ajax({
		type:'get',
		url:'php/fenye.php',
		data:`page=${page}&pageSize=${pageSize}`
	}).then(data=>{
		data=JSON.parse(data);
		var pageInfo=JSON.parse(data[data.length-1]);
		var html="";
		for(var i=0;i<data.length-1;i++){
			html+=`<tr>`;
			for(var j=0;j<lNum;j++)
				   html+=`<td>${data[i][j]}</td>`;

			if(Num2==1&&Num3==3){
				html+=`<td><a>编辑<a>|<a onclick='deleteRow(${data[i][0]})'>删除<a></td>
				   </tr>`;
			}else if(Num2==1&&Num3==2){
				html+=`<td><a onclick='deleteRow(${data[i][0]})'>删除<a></td>
				   </tr>`;
			}else if(Num2==1&&Num3==1){
				html+=`<td><a>编辑<a></td>
				   </tr>`;
			}else{
				html+=`</tr>`;
			}
		}
		$('#'+ysId).html(html);
		curPage=pageInfo.currentPage;
		totalPage=pageInfo.totalPage;
		pageSize=pageInfo.pageSize;
	});
}

function deleteRow(rid){
	var dFlag=confirm("确定删除吗？");
	if(dFlag){
		$.ajax({
			type:'get',
			url:'php/deleterow.php',
			data:`rid=${rid}`
		}).then(()=>{
			loadPage(curPage);
		})
	}
}

注：编辑这里没去做对应功能，需要自己加代码。

init.php:

<?php 

	$conn=mysqli_connect('127.0.0.1','root','','fenye',3306);//需要修改1：连接信息
	mysqli_query($conn,'SET NAMES UTF8');
	$table='fy_users';  //需要修改2：表名
?>

fenye.php

<?php 

	require_once('init.php');
	@$currentPage=$_REQUEST['page'];
	@$pageSize=$_REQUEST['pageSize'];
	if($pageSize==''||$pageSize==null){
		$pageSize=4;
	}

	$sql="SELECT count(*) FROM $table";
	$result=mysqli_query($conn,$sql);
	$rowCount=mysqli_fetch_row($result)[0];

	$totalPage = ceil($rowCount/$pageSize);
	if($currentPage > $totalPage){  
        $currentPage = $totalPage;  
    }  
    if($currentPage < 1){  
        $currentPage = 1;  
    } 

	$start=($currentPage-1)*$pageSize;
	//需要修改3：字段（注：第一个字段必须为唯一标识的字段，这样编辑和删除功能才可以正常使用）
	$sql="SELECT uid,uname,email,phone FROM $table LIMIT $start,$pageSize";
	$result=mysqli_query($conn,$sql);
	$arr=mysqli_fetch_all($result);
	$lastStr = "{\"currentPage\":$currentPage,\"totalPage\":$totalPage,\"pageSize\":$pageSize}";
	Array_push($arr,$lastStr);

	echo json_encode($arr);
?>

-----------------------------------------------

效果图：

php分页封装(10行代码搞定分页，优化版本1)

数据库字段：

php分页封装(10行代码搞定分页，优化版本1)