【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>

相关阅读:
LVS,NET,TUNL,DR实现负载均衡
 Redis的基本数据结构,基本操作
 mongoDB基本操作
 mysql高级操作(优化)
sphix使用及即时索引配置
 java client 通过zookeeper连接hbase问题
 TCP/UDP load balance
Hacking your way to enlightenment with Kafka and Node.js
flume问题
 linux点滴
原文地址：https://www.cnblogs.com/maomaoroc/p/3507910.html