當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

013-分页模块

發(fā)布時間：2025/4/17 编程问答 49 豆豆

生活随笔收集整理的這篇文章主要介紹了 013-分页模块小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. layPage致力于提供極致的分頁邏輯, 既可輕松勝任異步分頁, 也可作為頁面刷新式分頁。

2. 基礎(chǔ)參數(shù)選項

2.1. 通過核心方法: laypage.render(options)來設(shè)置基礎(chǔ)參數(shù)。

3. 快速使用

3.1. laypage的使用非常簡單, 指向一個用于存放分頁的容器, 通過服務(wù)端得到一些初始值, 即可完成分頁渲染:

4. jump - 切換分頁的回調(diào)

4.1. 當(dāng)分頁被切換時觸發(fā), 函數(shù)返回兩個參數(shù): obj(當(dāng)前分頁的所有選項值)、first(是否首次, 一般用于初始加載的判斷):

<div id="test1"></div><script type="text/javascript">layui.use('laypage', function(){var laypage = layui.laypage;// 執(zhí)行一個laypage實例laypage.render({elem: 'test1' // 注意, 這里的test1是ID, 不用加#號,count: 500 // 數(shù)據(jù)總數(shù), 從服務(wù)端得到,jump: function(obj, first){// obj包含了當(dāng)前分頁的所有參數(shù), 比如：console.log(obj.curr); // 得到當(dāng)前頁, 以便向服務(wù)端請求對應(yīng)頁的數(shù)據(jù)。console.log(obj.limit); // 得到每頁顯示的條數(shù)// 首次不執(zhí)行if(!first){// do something}}});}); </script>

5. 例子

5.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>分頁 - 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í)行一個laypage實例laypage.render({elem: 'test1' // 注意, 這里的test1是ID, 不用加#號,count: 500 // 數(shù)據(jù)總數(shù), 從服務(wù)端得到,limit: 20,limits: [10, 20, 30, 40, 50],groups: 5,prev: '上一頁',next: '下一頁',first: '首頁',last: '尾頁',layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],theme: '#c00' ,curr: location.hash.replace('#!fenye=', '') // 獲取起始頁,hash: 'fenye',jump: function(obj, first){// obj包含了當(dāng)前分頁的所有參數(shù), 比如：console.log(obj.curr); // 得到當(dāng)前頁, 以便向服務(wù)端請求對應(yīng)頁的數(shù)據(jù)。console.log(obj.limit); // 得到每頁顯示的條數(shù)// 首次不執(zhí)行if(!first){// do something}}});});</script></body> </html>

5.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的013-分页模块的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。