layui實現(xiàn)動態(tài)和靜態(tài)分頁
更新時間：2018年04月28日 10:21:19 投稿：laozhang
本篇文章通過實例給大家分享了layui實現(xiàn)動態(tài)和靜態(tài)分頁的詳細(xì)方法，以及效果展示，有需要的朋友可以跟著參考學(xué)習(xí)下。
開發(fā)管理后臺是每一個開發(fā)人員都要熟悉的一個環(huán)節(jié)，作為后端程序員，公司的所有機(jī)密數(shù)據(jù)都掌握在我們手上，所以這個時候，如果不是公司的核心成員，是不能接觸到某些數(shù)據(jù)的，這個時候所有的工作都落到了我們的手上，從PS到Linux都需要我們親歷親為，還好發(fā)現(xiàn)了layui這個前端框架，很大程度上減輕了我們的壓力．
今天我們先來學(xué)習(xí)一下layui實現(xiàn)動態(tài)數(shù)據(jù)表，靜態(tài)數(shù)據(jù)表，以及表格的分頁，其中還涉及到動態(tài)刷新數(shù)據(jù)表,數(shù)據(jù)表工具欄使用,表單提交等功能，這個靜態(tài)分頁同樣適用在信息類網(wǎng)站,我的工作開發(fā)環(huán)境是debian桌面版，所以所有的實驗也是在debian基礎(chǔ)上測試
layui動態(tài)數(shù)據(jù)表
動態(tài)數(shù)據(jù)表的效果圖
實現(xiàn)過程
業(yè)務(wù)邏輯我都寫到注釋里面了，這樣大家也友好一些，避免一會看代碼，一會看說明容易分神
前端代碼：
head.phtml（頭文件代碼）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title><?php echo $curTitle;?></title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <link rel="stylesheet" href="static/css/layui.css" rel="external nofollow" media="all"> <link rel="stylesheet" href="static/css/globals.css" rel="external nofollow" media="all"> <script src="static/layui.js" charset="utf-8"></script> <!--引入自定義模塊全局配置文件--> <script src="static/global.js" charset="utf-8"></script> </head> <body class="layui-layout-body">
order_orderlist.phtml（主體業(yè)務(wù)代碼）
<?php $this->import("head"); ?>
<div class="layui-fluid">
<blockquote class="layui-elem-quote">注意:為保障訪問速度,查詢同時請配合時間范圍,默認(rèn)顯示一天以內(nèi)的記錄</blockquote>
<br/>
<div class="layui-form-item layui-form-pane">
<div class="layui-inline">
<label class="layui-form-label" style="width: 85px;">商戶號</label>
<div class="layui-input-inline" style="width: 165px;">
<input type="text" name="merchant_no" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 85px;">訂單號:</label>
<div class="layui-input-inline" style="width: 165px;">
<input type="text" name="order_no" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label" style="width: 95px;">發(fā)起時間</label>
<div class="layui-input-inline" style="width: 165px;">
<input type="text" class="layui-input" name="start_time" id="test5" placeholder="yyyy-MM-dd HH:mm:ss">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 165px;">
<input type="text" class="layui-input" name="end_time" id="test6" placeholder="yyyy-MM-dd HH:mm:ss">
</div>
</div>
<div class="layui-inline">
<button id="fuck-btn" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon"></i>查詢</button>
<button id="reloadtable" class="layui-btn layui-btn-normal"><i class="layui-icon">ဂ</i>刷新數(shù)據(jù)</button>
<button id="reloadpage" class="layui-btn layui-btn-normal"><i class="layui-icon">ဂ</i>刷新頁面</button>
</div>
</div>
<table class="layui-hide" id="test"></table>
</div>
<script>
// 加載需要用到的模塊，如果有使用到自定義模塊也在此加載
layui.use(['laydate','form','table'], function(){
// 初始化元素，如果有大量的元素操作可以也引入和初始化element模塊
var table = layui.table;
var form = layui.form;
var laydate = layui.laydate;
var $ = layui.$;
// 定義時間選擇器
laydate.render({
elem:'#test5',
type:'datetime'
});
laydate.render({
elem:'#test6',
type:'datetime'
});
// 動態(tài)數(shù)據(jù)表渲染
table.render({
elem: '#test' /* 綁定表格容器id */
,url:'index.php?c=orders&a=orderList' /* 獲取數(shù)據(jù)的后端API URL */
,where:{getlist:'orderlist'} /* 這里還可以額外的傳參到后端 */
,method: 'post' /* 使用什么協(xié)議，默認(rèn)的是GET */
,cellMinWidth: 60 /* 最小單元格寬度 */
,cols: [[
{field:'orderno', title: '訂單號',align: 'center',sort:true}
,{field:'username', title: '商戶號',align: 'center'}
,{field:'user_orderno', title: '商戶訂單號',align: 'center'}
,{field:'trace_time', title: '創(chuàng)建時間',align: 'center',sort:true,width:200}
,{field:'price', title: '交易金額',align: 'center',sort:true}
,{field:'fee', title: '手續(xù)費',align: 'center',sort:true,width:80}
,{field:'real_price', title: '結(jié)算金額',align: 'center',sort:true}
,{field:'pay_type', title: '支付類型', align: 'center'}
,{field:'pay_status', title: '訂單狀態(tài)',align: 'center',width:90}
,{field:'pay_time', title: '支付時間',align: 'center',sort:true,width:200}
,{field:'push_nums', title: '通知次數(shù)',align: 'center',width:90}
,{field:'notice_result', title: '通知支付結(jié)果',align: 'center'}
]] // 使用sort將自動為我們添加排序事件，完全不用人工干預(yù)
,page: true
,limit:10
,id:'testReload' // 這里就是重載的id
});
// 數(shù)據(jù)表重載，這個是配合上面的表格一起使用的
var active = {
reload:function(){
table.reload('testReload',{
// 點擊查詢和刷新數(shù)據(jù)表會把以下參數(shù)傳到后端進(jìn)行查找和分頁顯示
where:{
merchant_no:$("input[name='merchant_no']").val(),
order_no: $("input[name='order_no']").val(),
start_time:$("input[name='start_time']").val(),
end_time:$("input[name='end_time']").val()
}
});
}
};
form.render(); // 渲染表單
// 查找點擊時間，這里的事件綁定建議使用on來綁定,因為元素都是后期渲染過的
$("#fuck-btn").click(function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$("#reloadtable").click(function(){
active.reload();
});
$("#reloadpage").click(function(){
location.reload();
});
});
</script>
</body>
</html>
后端php代碼
order.php(訂單控制器,部分業(yè)務(wù)代碼不用太深究）
// 訂單列表
public function orderList()
{
// 動態(tài)渲染前臺表格
$operating = $this->request->getPost('getlist', 'trim');
// 首次這里不會執(zhí)行，數(shù)據(jù)表開始渲染的時候才會請求以下部分
if ('orderlist' === $operating) {
// 進(jìn)行分頁查詢
$page = $this->request->getPost('page', 'intval', 1);
$limit = $this->request->getPost('limit', 'intval', 10);
$start = ($page - 1) * $limit;
// 如果有其他條件查詢在這里可以帶上
$merchant_no = $this->request->getPost('merchant_no', 'trim', '');
$order_no = $this->request->getPost('order_no', 'trim', '');
$start_time = $this->request->getPost('start_time', 'trim', date("Y-m-d H:i:s", strtotime("-1 day")));
$end_time = $this->request->getPost('end_time', 'trim', date("Y-m-d H:i:s"), time());
// 獲取符合條件的記錄數(shù)量
if($GLOBALS['SESSION']['admin_group_id'] >1){
$merchant_no = $GLOBALS['SESSION']['admin_username'];
}
$order_nums = orders::getItemNums($merchant_no, $order_no, $start_time, $end_time);
// 分頁進(jìn)行查詢條件記錄
$order_list = orders::getItem($merchant_no, $order_no, $start_time, $end_time, $start, $limit);
$datas = ['code' => 0, 'msg' => ''];
// 將總的記錄條數(shù)傳給前臺進(jìn)行渲染分頁
$datas['count'] = $order_nums;
// 重新過濾一遍數(shù)據(jù)，很多沒有用到的不能全部發(fā)給試圖，尤其是動態(tài)渲染的，很容易暴露，建議加工一下再傳
foreach ($order_list as $k => $v) {
$order_list[$k]['orderno'] = $v['order_id'];
$order_list[$k]['user_orderno'] = $v['order_no'];
$order_list[$k]['username'] = $v['merchant_no'];
$order_list[$k]['pay_type'] = ($v['pay_type'] == 1) ? "支付寶掃碼" : "微信掃碼";
$order_list[$k]['pay_status'] = ($v['callback_status'] > 0) ? "已支付" : "未支付";
$order_list[$k]['pay_time'] = $v['callback_time'];
$order_list[$k]['notice_result'] = ($v['push_status'] > 0) ? "<span class=\"layui-badge layui-bg-blue\">已推送</span>" : "<span class=\"layui-badge layui-bg-gray\">未推送</span>";
}
// 將數(shù)據(jù)通過json格式響應(yīng)給前臺渲染
$datas['data'] = $order_list;
echo json_encode($datas);
safe_exit();
}
// 首次先現(xiàn)實模板頁
self::$view->render('orders_orderlist');
}
數(shù)據(jù)格式請參照官方指導(dǎo)：
數(shù)據(jù)接口格式
{"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"簽名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"簽名-1","experience":884,"logins":58,"wealth":64928690,"classify":"詞人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"簽名-2","experience":650,"logins":77,"wealth":6298078,"classify":"醬油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"簽名-3","experience":362,"logins":157,"wealth":37117017,"classify":"詩人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"簽名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"簽名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"簽名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"簽名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"簽名-8","experience":951,"logins":133,"wealth":16503371,"classify":"詞人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"簽名-9","experience":484,"logins":25,"wealth":86801934,"classify":"詞人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"簽名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"詩人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"簽名-11","experience":492,"logins":107,"wealth":8062783,"classify":"詩人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"簽名-12","experience":106,"logins":176,"wealth":42622704,"classify":"詞人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"簽名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"詩人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"簽名-14","experience":873,"logins":116,"wealth":72549912,"classify":"詞人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"簽名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"簽名-16","experience":862,"logins":168,"wealth":37069775,"classify":"醬油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"簽名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"簽名-18","experience":866,"logins":88,"wealth":81722326,"classify":"詞人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"簽名-19","experience":682,"logins":106,"wealth":68647362,"classify":"詞人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"簽名-20","experience":770,"logins":24,"wealth":92420248,"classify":"詩人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"簽名-21","experience":184,"logins":131,"wealth":71566045,"classify":"詞人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"簽名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"簽名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"簽名-24","experience":212,"logins":133,"wealth":59011052,"classify":"詞人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"簽名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"簽名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"簽名-27","experience":371,"logins":44,"wealth":64419691,"classify":"詩人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"簽名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"簽名-29","experience":647,"logins":107,"wealth":97450636,"classify":"醬油","score":27}]}
表格模塊：http://www.layui.com/doc/modules/table.html
調(diào)試的時候可以打開chrome,firefox 的 console 和 network進(jìn)行查看，仔細(xì)研究分析
數(shù)據(jù)表工具條事件
工具欄是指在行單元格內(nèi)可以操作對應(yīng)的行，因為使用layui的元素監(jiān)聽，很容易就獲取到相應(yīng)對應(yīng)整行的數(shù)據(jù).
比如獲取表單的數(shù)據(jù),只需要監(jiān)聽表單提交事件，直接就可以一次獲取到所有的參數(shù)和值：
<script>
layui.use(['form','jquery'],function(){
let form = layui.form,
$ = layui.$;
form.on('submit(fuck-submit)', function(data){
if(data.field.password && data.field.password.length < 5){
layer.msg('密碼不能小于５位');
return false;
}
$.post('index.php?&a=adminEdit&op=update&uid='+data.field.uid,{
username:data.field.username,
password:data.field.password,
level:data.field.level,
is_enabled:data.field.is_enabled
}, function(responseText){
//console.log(responseText);
if(responseText.errno === 8){
layer.msg(responseText.errstr,{icon:6});
return false;
} else {
layer.msg(responseText.errstr,{icon:5});
location.reload();
}
},'json'
);
return false;
});
});
</script>
這里是官方文檔的：
form.on('submit(*)', function(data){
console.log(data.elem) //被執(zhí)行事件的元素DOM對象，一般為button對象
console.log(data.form) //被執(zhí)行提交的form對象，一般在存在form標(biāo)簽時才會返回
console.log(data.field) //當(dāng)前容器的全部表單字段，名值對形式：{name: value}
return false; //阻止表單跳轉(zhuǎn)。如果需要表單跳轉(zhuǎn)，去掉這段即可。
});
我們今天要操作的數(shù)據(jù)表也是要采用這種方式，首先我們看看看怎樣生成和渲染出工具條：
只需要在body部分插入一個容器,注意這里的javascript的type是text/html,這個是供layui解析用的，在這里的d也就是我們在渲染表格的時候的數(shù)據(jù),所有的字段的值都可以在這個d里面獲取到
<table class="layui-hide" lay-filter="fucktest" id="test"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" user_id="{{d.admin_id}}" lay-event="edit">編輯</a>
</script>
相關(guān)文章
JS實現(xiàn)頁面跳轉(zhuǎn)參數(shù)不丟失的方法
這篇文章主要介紹了JS實現(xiàn)頁面跳轉(zhuǎn)參數(shù)不丟失的方法,結(jié)合實例形式對比分析了javascript URL加密函數(shù)escape()、encodeURI()與encodeURIComponent()的功能與相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
js+canvas實現(xiàn)圖片格式webp/png/jpeg在線轉(zhuǎn)換
這篇文章主要介紹了js+canvas實現(xiàn)圖片格式webp/png/jpeg在線轉(zhuǎn)換,需要的朋友可以參考下2020-08-08
用了一年時間的TypeScript了,下面這篇文章主要給大家介紹了關(guān)于TypeScript中互斥類型實現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
使用Chrome調(diào)試JavaScript的斷點設(shè)置和調(diào)試技巧
這篇文章主要介紹了使用Chrome調(diào)試JavaScript的斷點設(shè)置和調(diào)試技巧,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了js注入，黑客之路必備！本文告訴大家js注入是什么，js注入攻防如何進(jìn)行，感興趣的小伙伴們可以參考一下2016-09-09
學(xué)習(xí)layer彈出框，之前項目是用bootstrap模態(tài)框，后來改用layer彈出框，在文章的后面，我會分享項目的一些代碼,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了關(guān)于微信上網(wǎng)頁圖片點擊全屏放大效果的相關(guān)資料,需要的朋友可以參考下2016-12-12
其實，沒那么強大的，不過，聊勝于無吧，并且還算管用，要是有誰再完善它就好了……2009-04-04
這篇文章主要介紹了JavaScript表格常用操作方法,實例匯總了javascript中表格操作的創(chuàng)建、添加、刪除、遍歷等常用操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
下面小編就為大家?guī)硪黄猨s removeChild 方法深入理解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08