基于layu美化的分页,面向过程
一共两个文件:
直接上代码,不啰嗦:
index.php页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Layui分页快速使用</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>
<?php
try{
$pdo = new PDO("mysql:host=localhost;dbname=test","root","root");
}
catch(PDOException $e){
echo "数据库连接失败:".$e->getMessage();
exit;
}
$page = $_GET['page']-1;
$fir = $page*10;
$count = 10 ;
$num = $pdo->query("select * from sanji")->rowCount();
$query = "select * from sanji limit ".$fir.",".$count;
$pdostatement = $pdo->query($query);
$result = $pdostatement->fetchAll(PDO::FETCH_ASSOC);
?>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>名称></th>
<th>级别</th>
<th>编号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<?php foreach($result as $key=>$v):?>
<tr>
<td><?php echo $v['id']?></td>
<td><?php echo $v['name']?></td>
<td><?php echo $v['level']?></td>
<td><?php echo $v['code_name']?></td>
<td> <button class="layui-btn layui-btn-small delete">
<i class="layui-icon"></i>
</button></td>
</tr>
<?php endforeach;?>
</table>
<div id="test1"></div>
</body>
</html>
<script src="../layui/layui.js"></script>
<script>
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1'
,count: <?php echo $num?> //数据总数，从服务端得到
,curr: function(){ //通过url获取当前页，也可以同上（pages）方式获取
var page = location.search.match(/page=(\d+)/);
return page ? page[1] : 1;
}(),
jump: function(e, first){ //触发分页后的回调
if(!first){ //一定要加此判断，否则初始时会无限刷新
location.href = '?page='+e.curr;
}
}
//首次不执行
});
});
layui.use(['layer','jquery'], function(){
var layer = layui.layer;
var $ = layui.jquery;
$(".delete").click(function(){
var id =$(this).parents('tr').find('td').eq(0).html();
layer.confirm("确认删除?",function(){
layer.msg(id);
$.ajax({
url: "./do_delete.php" , //处理的文件
data: {'id':id} , // 传过去的值
type: "post" , //post的方式传过去
dataType:'json', //返回的格式是json
success:function(data){ //数据成功后的回调函数
if(data.code==200){ //判断返回的数据的具体值,做业务处理
location.reload();
}else{
layer.msg("删除失败");
}
}
})
})
})
});
</script>
do_delete.php页面:
<?php
try{
$pdo = new PDO("mysql:host=localhost;dbname=test","root","root");
}
catch(PDOException $e){
echo "数据库连接失败:".$e->getMessage();
exit;
}
$id = $_POST["id"];
$query = "delete from sanji where id='$id'";
$result = $pdo->exec($query);
if($result){
echo json_encode(array("code"=>200)); //返回给前台页面的json数据
}else{
echo json_encode(array('code'=>400));
}
效果展示如下:
每天进步一点点
