封裝好的javascript前端分頁(yè)插件pagination
摘要:
最近在開發(fā)項(xiàng)目中又用到了前端分頁(yè),以前也做過,為了方便以后使用所以將他封裝成第三方插件,不依賴任何庫(kù)。網(wǎng)上已經(jīng)有很多插件,問什么還要自己造輪子?
自己寫的擴(kuò)展性高
不依賴任何庫(kù)
作為一次技術(shù)沉淀
先看下效果圖
安裝方法
首先在頁(yè)面中要載入css及js
<link rel="stylesheet" href="dist/pagination.css">
<script src="dist/pagination.js"></script>
使用示例
pagination({
cur: 1, // 當(dāng)前頁(yè)數(shù)
total: 6, // 總共多少頁(yè)
len: 5, // 分頁(yè)顯示多少
targetId: 'pagination', // 分頁(yè)元素綁定
callback: function() {
// 回調(diào)函數(shù)
}
})
參數(shù)介紹
cur
當(dāng)前頁(yè)數(shù),每次調(diào)用傳遞當(dāng)前分頁(yè)
total
總共多少頁(yè),根據(jù)總數(shù)和每頁(yè)顯示數(shù)量可以獲取
len
分頁(yè)欄上顯示的數(shù)量
targetId
分頁(yè)元素綁定的
callback
頁(yè)面渲染完成之后執(zhí)行的函數(shù),比如事件綁定等。
tips
demo是用的靜態(tài)數(shù)據(jù),如果調(diào)用服務(wù)端的數(shù)據(jù),只需將index.js文件中的for循環(huán)改成Ajax請(qǐng)求就可以了。
下載 http://xiazai.jb51.net/201601/yuanma/pagination-master(jb51.net).zip
相關(guān)文章
javascript forEach通用循環(huán)遍歷方法
循環(huán)遍歷一個(gè)元素是開發(fā)中最常見的需求之一,那么讓我們來看一個(gè)由框架BASE2和Jquery的結(jié)合版本吧.2010-10-10JavaScript中new操作符的原理與實(shí)現(xiàn)詳解
你知道new嗎?你知道new的實(shí)現(xiàn)原理嗎?你能手寫new方法嗎?不要擔(dān)心,這篇文件就來帶大家深入了解一下JavaScript中的new操作符,感興趣的小伙伴可以學(xué)習(xí)一下2022-10-10上傳圖片預(yù)覽JS腳本 Input file圖片預(yù)覽的實(shí)現(xiàn)示例
需要一個(gè)用戶上傳頭像預(yù)覽的功能,因此寫了一段上傳圖片預(yù)覽JS腳本,Input file圖片預(yù)覽的實(shí)現(xiàn),需要的朋友可以看看2014-10-10javascript實(shí)現(xiàn)的使用方向鍵控制光標(biāo)在table單元格中切換
最近公司開發(fā)ERP項(xiàng)目,要求商品入庫(kù)選擇貨架號(hào)時(shí)支持使用方向鍵快速選擇,以提高入庫(kù)效率。2010-11-11