您的位置:首页 > 编程语言 > PHP开发

php分页封装(10行代码搞定分页)

2017-12-16 15:09 543 查看
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>
<t
4000
d>操作</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>
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:不显示
//显示操作的部分 0:不显示 1:显示编辑 2:显示删除
init('tby',4,1,3);
//参数1:除操作外的列数
//参数2:每列对应的属性(数据库表中对应属性)
init1(4,['uid','uname','email','phone']);
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,arr=[];
function firstPage() {loadPage(1);}
function prePage() {loadPage(curPage-1);}
function nextPage() {loadPage(curPage+1);}
function lastPage() {loadPage(totalPage);}
function init(id,num1,num2,num3){
ysId=id;
pageSize=num1;
Num2=num2;
Num3=num3;
}

function init1(ln,Arr){
lNum=ln;
arr=Arr;
}

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<arr.length;j++)
html+=`<td>${data[i][arr[j]]}</td>`;

if(Num2==1&&Num3==3){
html+=`<td><a>编辑<a>|<a onclick='deleteRow(${data[i].uid})'>删除<a></td>
</tr>`;
}else if(Num2==1&&Num3==2){
html+=`<td><a onclick='deleteRow(${data[i].uid})'>删除<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);
mysqli_query($conn,'SET NAMES UTF8');
$table='fy_users';
?>


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;

$sql="SELECT * FROM $table LIMIT $start,$pageSize";
$result=mysqli_query($conn,$sql);
$arr=mysqli_fetch_all($result,1);
$lastStr = "{\"currentPage\":$currentPage,\"totalPage\":$totalPage,\"pageSize\":$pageSize}";
Array_push($arr,$lastStr);

echo json_encode($arr);
?>


deleterow.php

<?php

require_once('init.php');

@$uid=$_REQUEST['rid'];

$sql="DELETE FROM $table WHERE uid=$uid";

mysqli_query($conn,$sql);
?>


基本界面是这样:



样式需要自己去写。

缺点:性能上优化不多。例如:php数据库查询用了select *,这里其实可以通过js传参去确定select后面的字段,可优化。

而且在前端传递字段(js),会造成安全隐患。

优化版本已经发布,链接:

点击打开链接
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: