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

分手后的思念是犯贱 2022-06-03 04:09 99阅读 0赞

模板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.οnclick=function(){
    			firstPage();
    		}
    		pre.οnclick=function(){
    			prePage();
    		}
    		next.οnclick=function(){
    			nextPage();
    		}
    		last.οnclick=function(){
    			lastPage();
    		}
    		window.οnlοad=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 οnclick='deleteRow(${data[i][0]})'>删除<a></td>
    				   </tr>`;
    			}else if(Num2==1&&Num3==2){
    				html+=`<td><a οnclick='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);
    ?>

\-----------------------------------------------

效果图：

![20171218114439995][]

数据库字段：

![20171218114509895][]

[20171218114439995]: /images/20220603/b06e9ca2908d43a1bebcb7b6538597e8.png
[20171218114509895]: /images/20220603/69ba576556b649bea3ad1979806142e3.png