013-分页模块
1. layPage致力于提供極致的分頁(yè)邏輯, 既可輕松勝任異步分頁(yè), 也可作為頁(yè)面刷新式分頁(yè)。
2. 基礎(chǔ)參數(shù)選項(xiàng)
2.1. 通過(guò)核心方法: laypage.render(options)來(lái)設(shè)置基礎(chǔ)參數(shù)。
3. 快速使用
3.1. laypage的使用非常簡(jiǎn)單, 指向一個(gè)用于存放分頁(yè)的容器, 通過(guò)服務(wù)端得到一些初始值, 即可完成分頁(yè)渲染:
<div id="test1"></div><script type="text/javascript">layui.use('laypage', function(){var laypage = layui.laypage;// 執(zhí)行一個(gè)laypage實(shí)例laypage.render({elem: 'test1' // 注意, 這里的test1是ID, 不用加#號(hào),count: 500 // 數(shù)據(jù)總數(shù), 從服務(wù)端得到});}); </script>4. jump - 切換分頁(yè)的回調(diào)
4.1. 當(dāng)分頁(yè)被切換時(shí)觸發(fā), 函數(shù)返回兩個(gè)參數(shù): obj(當(dāng)前分頁(yè)的所有選項(xiàng)值)、first(是否首次, 一般用于初始加載的判斷):
<div id="test1"></div><script type="text/javascript">layui.use('laypage', function(){var laypage = layui.laypage;// 執(zhí)行一個(gè)laypage實(shí)例laypage.render({elem: 'test1' // 注意, 這里的test1是ID, 不用加#號(hào),count: 500 // 數(shù)據(jù)總數(shù), 從服務(wù)端得到,jump: function(obj, first){// obj包含了當(dāng)前分頁(yè)的所有參數(shù), 比如：console.log(obj.curr); // 得到當(dāng)前頁(yè), 以便向服務(wù)端請(qǐng)求對(duì)應(yīng)頁(yè)的數(shù)據(jù)。console.log(obj.limit); // 得到每頁(yè)顯示的條數(shù)// 首次不執(zhí)行if(!first){// do something}}});}); </script>5. 例子
5.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>分頁(yè) - layui</title><link rel="stylesheet" href="layui/css/layui.css"><script type="text/javascript" src="layui/layui.js"></script></head><body><div id="test1"></div><script type="text/javascript">layui.use('laypage', function(){var laypage = layui.laypage;// 執(zhí)行一個(gè)laypage實(shí)例laypage.render({elem: 'test1' // 注意, 這里的test1是ID, 不用加#號(hào),count: 500 // 數(shù)據(jù)總數(shù), 從服務(wù)端得到,limit: 20,limits: [10, 20, 30, 40, 50],groups: 5,prev: '上一頁(yè)',next: '下一頁(yè)',first: '首頁(yè)',last: '尾頁(yè)',layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],theme: '#c00' ,curr: location.hash.replace('#!fenye=', '') // 獲取起始頁(yè),hash: 'fenye',jump: function(obj, first){// obj包含了當(dāng)前分頁(yè)的所有參數(shù), 比如：console.log(obj.curr); // 得到當(dāng)前頁(yè), 以便向服務(wù)端請(qǐng)求對(duì)應(yīng)頁(yè)的數(shù)據(jù)。console.log(obj.limit); // 得到每頁(yè)顯示的條數(shù)// 首次不執(zhí)行if(!first){// do something}}});});</script></body> </html>5.2. 效果圖
總結(jié)
- 上一篇： 012-简单辅助元素
- 下一篇： 014-模板引擎