基於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));
}
效果展示如下:
每天進步一點點
基於layu美化的分頁,面向過程