转载地址:https://www.cnblogs.com/maomaoroc/p/3507910.html
一、下载地址
https://github.com/flaviusmatis/simplePagination.js
二、使用方法
2.1: 导入Jquery和Jquery.simplePagination
<script type="text/javascript" src="path_to/jquery.js"></script> <script type="text/javascript" src="path_to/jquery.simplePagination.js"></script>
2.2: 可选,导入CSS文件,simplePagination目前有三种CSS效果
<link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/>
"light-theme"
"dark-theme"
"compact-theme"
2.3: 使用simplePagination
$(function() {
$(selector).pagination({
items: 100,
itemsOnPage: 10,
cssStyle: 'light-theme'
});
});
三、可选参数
items | 整型 | 默认: 1 | 用来计算页数的项目总数。 |
itemsOnPage | 整型 | 默认: 1 | 每个页面显示的项目数。 |
pages | 整型 | 可选 | 如果定义,items和itemsOnPage就不会用来计算页面数。 |
displayedPages | 整型 | 默认: 5 | 导航栏显示的页面数。 最小值:3(previous,当前页和next)。 |
edges | 整型 | 默认: 2 | 当页面数量比较多的时候,在最后Prev后和Next前的页面数(如上图light-theme和compact-theme是2,dark-theme是3)。 |
currentPage | 整型 | 默认: 1 | 初始化完之后的选择的页面。 |
hrefTextPrefix | 字符串 | 默认: "#page-" | 加在页面数之前的文字。 |
hrefTextSuffix | 字符串 | 默认: empty string | 加在页面数之后的文字。 |
prevText | 字符串 | 默认: "Prev" | “上一页”显示的文字。 |
nextText | 字符串 | 默认: "Next" | “下一页”显示的文字。 |
labelMap | 数组 | 默认: empty array | A collection of labels that will be used to render the pagination items, replacing the numbers. |
cssStyle | 字符串 | 默认: "light-theme" | CSS主题,一共三种,light-theme,dark-theme和compact-theme。 |
selectOnClick | 布尔值 | 默认: true | False的时候内容会变,但是当前选择页面不会跳转。(就是你看第八页内容,结果还是选择第一页) |
onPageClick(pageNumber, event) | 函数 | 可选 | 当页面被点击时调用的函数。 可选参数:页面数和事件。 |
onInit | 函数 | 可选 | 初始化调用的函数。 |
四、方法
selectPage - 根据页面数选择页面
$(function() { $(selector).pagination('selectPage', pageNumber); });
prevPage - 选择前一页
$(function() { $(selector).pagination('prevPage'); });
nextPage - 选择后一页
$(function() { $(selector).pagination('nextPage'); });
getPagesCount - 获得总的页面数
$(function() { $(selector).pagination('getPagesCount'); });
getCurrentPage - 获得当前页面
$(function() { $(selector).pagination('getCurrentPage'); });
disable - 禁止翻页功能
$(function() { $(selector).pagination('disable'); });
enable - 开启翻页功能
$(function() { $(selector).pagination('enable'); });
destroy - 视觉上关闭翻页,配置保留
$(function() { $(selector).pagination('destroy'); });
redraw - 打开翻页,仍然使用之前的配置
$(function() { $(selector).pagination('redraw'); });
updateItems - 允许动态计算翻页的内容数
$(function() { $(selector).pagination('updateItems', 100); });
updateItemsOnPage - 更新每页的内容数
$(function() { $(selector).pagination('updateItemsOnPage', 20); });
drawPage - 把页面数作为参数,当成当前页
$(function() { $(selector).pagination('drawPage', 5); });
五、Demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Simple Pagination</title>
<link type="text/css" rel="stylesheet" href="css/simplePagination.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simplePagination.js"></script>
<script type="text/javascript">
var page_index;
var itemsOnPage = 1;
$(function() {
$("#paging").pagination({
items: 32,
itemsOnPage: itemsOnPage,
cssStyle: 'dark-theme',
onInit: changePage,
onPageClick: changePage
});
});
function changePage(){
console.log("changePage");
page_index = $("#paging").pagination('getCurrentPage') -1;
$("#content .result").hide();
for(var i = page_index * itemsOnPage; i < page_index * itemsOnPage + itemsOnPage; i++){
$("#content .result:eq(" + i + ")").show();
}
}
</script>
</head>
<body>
<div>
<h1>翻页演示</h1>
<div id="paging">
</div>
<div id="content">
<!-- 列表元素 -->
<div class="result">第1项内容</div>
<div class="result">第2项内容</div>
<div class="result">第3项内容</div>
<div class="result">第4项内容</div>
<div class="result">第5项内容</div>
<div class="result">第6项内容</div>
<div class="result">第7项内容</div>
<div class="result">第8项内容</div>
<div class="result">第9项内容</div>
<div class="result">第10项内容</div>
<div class="result">第11项内容</div>
<div class="result">第12项内容</div>
<div class="result">第13项内容</div>
<div class="result">第14项内容</div>
<div class="result">第15项内容</div>
<div class="result">第16项内容</div>
<div class="result">第17项内容</div>
<div class="result">第18项内容</div>
<div class="result">第19项内容</div>
<div class="result">第20项内容</div>
<div class="result">第21项内容</div>
<div class="result">第22项内容</div>
<div class="result">第23项内容</div>
<div class="result">第24项内容</div>
<div class="result">第25项内容</div>
<div class="result">第26项内容</div>
<div class="result">第27项内容</div>
<div class="result">第28项内容</div>
<div class="result">第29项内容</div>
<div class="result">第30项内容</div>
<div class="result">第31项内容</div>
<div class="result">第32项内容</div>
</div>
</body>
</html>