Layui實現分頁展示
阿新 • • 發佈：2021-08-06
1.前端頁面：
先引入必要的layui.js和css檔案。可去官網下載：https://www.layui.com/。
這裡建議引入本地檔案
1.前端程式碼
<!DOCTYPE html>
<html>
<head>
<!--素人郭-->
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/layui.css">
</head>
<body>
<table class="layui-hide" id="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">檢視</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<!-- 引入 layui.js -->
<script src="//unpkg.com/[email protected]/dist/layui.js"></script>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:"{:url('/show')}"
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'goods_name', width:200, title: '商品名'}
,{field:'goods_price', width:200, title: '商品單價', sort: true}
,{field:'spec_value_names', width:200, title: '商品介紹'}
,{field:'create_time', title: '新增時間', minWidth: 150}
,{fixed: 'right', width:178, align:'center', title: '操作', toolbar: '#barDemo'}
]]
,page: true
,limit:5
});
});
</script>
</body>
</html>
2.後臺
在tp5 Controller層需要通過Mode例項化物件連線資料庫查詢表中的資料
public function show(){
if (request()->isAjax()){
//接收前臺 limit 傳過來的引數
$page = input('limit');
//呼叫模型層
$data = \app\admin\model\Show::getShow($page);
//查詢出總條數
$sum = $data->total();
//轉為二維陣列
$data = $data->getCollection()->toArray();
//返回json格式 切記 code=0
$json = [
'code'=>0,
'msg'=>"",
'data'=>$data,
'count'=>$sum
];
return $json;
}
return view('login/show');
}
3.模型層
protected $table = 'pyg_order_goods';
public static function getShow($page){
return self::order('id desc')->paginate($page);
}