Pagination Plugin

共有?页 第?页

安装

依赖安装

<link rel="stylesheet" href="pagination.css">
<!--引入pagination.css-->
<script src="src/pagination.js"></script> <script src="src/test.js"></script>
<!--引入pagination.js-->

设置根元素

<div id="tabBar"></div>

基础用法

init({
    element: '#selector',
// 选择器
amount: (数据量), limit: (每页显示多少条), page: (初始页码), maxPageBtn: (可视按钮的最大个数), onClick: function (page, e) { alert('您当前处理的是第' + page + '页'); // searchUsers(keyword, page, limit, onSuccess, onFail); }, });

配置

init({
    amountList: '#amount',
// 选择器
placehodler: '#placehodler',
// 选择器
tabBar: '#tabBar',
// 选择器
pagination: '#pagination',
// 选择器
pageNum: '#pageNum',
// 选择器
firstPage: '#firstPage',
// 选择器
lastPage: '#lastPage',
// 选择器
prePage: '#previousPage',
// 选择器
nextPage: '#nextPage',
// 选择器
pageAmount: '#totalPage',
// 选择器
amount: 200,
// 选择器
limit: 8,
// 选择器
page: 1,
// 选择器
maxPageBtn: 9,
// 选择器
onClick: function (page, e) {
// 点击回调
alert('您当前处理的是第' + page + '页'); // searchUsers(keyword, page, limit, onSuccess, onFail); }, });

API

数据处理

getTotalPage() 
// 计算总页数
setPagingBtn()
// 设置页码按钮的始末位置
clickPagingBtn()
// 渲染按钮,点击页码按钮跳转并做相应的操作
backToPage()
// 上一页、下一页、首页、尾页

视图操作

btnDisabled() 
// 页码是否可用