整合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>layui分頁和模板的整合使用</title>
<link href="../lib/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
<div id="view"></div>
<div id="pagingId"></div>
<script src="../lib/layui/layui.js"></script>
<script id="laytplId" type="text/html">
<h3>{{ d.title }}</h3>
<ul>
{{# layui.each(d.list, function(index, item){ }}
<li>
<span>{{ item.modname }}</span>
<span>{{ item.alias }}：</span>
<span>{{ item.site || '' }}</span>
</li>
{{# }); }}
{{# if(d.list.length === 0){ }}
無數據
{{# } }}
</ul>
</script>
<script>
var data = { //數據
"title": "Layui常用模塊"
, "list": [{ "modname": "彈層", "alias": "layer", "site": "layer.layui.com" }, { "modname": "表單", "alias": "form" }]
}
layui.use(['laypage', 'laytpl'], function () {
var laypage = layui.laypage;
var laytpl = layui.laytpl;
laypage.render({
elem: 'pagingId'
, count: 100 //數據總數，從服務端得到
, jump: function (obj, first) {
//console.log(obj);
var getTpl = laytplId.innerHTML;
var view = document.getElementById('view');
data.title = "常用模塊" + obj.curr; //模擬動態從服務器調取數據（常用模塊+當前頁數字）
laytpl(getTpl).render(data, function (html) {
view.innerHTML = html;
});
}
});
});
</script>
</body>
</html>
實際項目例子
$(function () {
initLayPage();
});
function initLayPage(pageConf) {
//如果不是點擊頁數，則給默認分頁參數，pageConf用於請求接口數據
if (!pageConf) {
pageConf = {};
pageConf.pageSize = 10;
pageConf.currentPage = 1;
pageConf.state = $("#state").val();
pageConf.selectText = $("#selectText").val();
}
//根據參數，1 請求接口，2 添加監聽，3 渲染分頁組件，4 填充數據
$.post("/Manager/Messages/Search2", pageConf, function (data) {
layui.use(['laypage', 'layer', 'laytpl', 'form'], function () {
var laypage = layui.laypage;
var laytpl = layui.laytpl;
var form = layui.form;
var layer = layui.layer;
form.on('submit(search)', function (data) {
initLayPage();
return false;
});
laypage.render({ //渲染分頁
elem: 'pagingId',
count: data.data.total,
curr: pageConf.currentPage,
limit: pageConf.pageSize,
first: "首頁",
last: "尾頁",
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
jump: function (obj, first) {
console.log("=========" + first + "=========" + obj.curr);
if (!first) { //首次不執行，點擊頁數執行
pageConf.currentPage = obj.curr;
pageConf.pageSize = obj.limit;
pageConf.state = $("#state").val();
pageConf.selectText = $("#selectText").val();
initLayPage(pageConf);
}
}
});
var getTpl = laytplId.innerHTML;
var view = document.getElementById('contentTbody');
laytpl(getTpl).render(data, function (html) { //填充數據
view.innerHTML = html;
});
})
});
}
