【Jquery】插件之simplepagination
一、下载地址
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>
