分页

插件-pagination

一、官网与文档

http://www.jq22.com/demo/pagination20160204/

https://github.com/Maxiaoxiang/jQuery-plugins

二、引入

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.pagination.js"></script>

三、使用

• HTML结构

<div class="page"></div>

• 简单样式

.page {
    text-align: center;
}
.page span, .page a,.page input{
    display: inline-block;
    margin: 0 5px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    color: #bdbdbd;
    font-size: 14px;
    background: #fff;
    border: 1px solid #ebebeb;
}
.page input{
    text-align: center;
    color: #e91e63;
}
.page .active,.page a:hover {
    color: #fff;
    border: 1px solid #e91e63;
    background: #e91e63;
}
.page .next, .page .prev {
    font-size: 16px;
}

• 初始化

$('.page').pagination({
    pageCount: 50,
    jump: true,
    coping: true,
    homePage: '首页',
    endPage: '末页',
    prevContent: '上页',
    nextContent: '下页',
    callback: function (api) {
        console.log(api.getCurrent())
    }
});

• 注1：除图片以外的其他元素，如文字，在插件中不会进行处理。

四、参数

参数	默认值	说明
pageCount	9	总页数
totalData	0	数据总条数
current	1	当前第几页
showData	0	每页显示的条数
prevCls	'prev'	上一页class
nextCls	'next'	下一页class
prevContent	'<'	上一页节点内容
nextContent	'>'	下一页节点内容
activeCls	'active'	当前页选中状态class名
mode	'unfixed'	模式，unfixed不固定页码按钮数量，fixed固定数量
count	4	mode为unfixed时显示当前选中页前后页数，mode为fixed显示页码总数
coping	false	是否开启首页和末页，值为boolean
isHide	false	总页数为0或1时隐藏分页控件
keepShowPN	false	是否一直显示上一页下一页
homePage	''	首页节点内容，默认为空
endPage	''	尾页节点内容，默认为空
jump	false	是否开启跳转到指定页数，值为boolean类型
jumpIptCls	'jump-ipt'	文本框内容
jumpBtnCls	'jump-btn'	跳转按钮class
jumpBtn	'跳转'	跳转按钮文本内容
callback	function(){}	回调函数，参数"index"为当前页

• api接口

方法	参数	说明
getPageCount()	无	获取总页数
setPageCount(page)	page：页数	设置总页数
getCurrent()	无	获取当前页

插件-jPages

一、官网与文档

http://luis-almeida.github.io/jPages/

https://github.com/luis-almeida/jPages

http://www.jq22.com/jquery-info283

二、引入

<link rel="stylesheet" href="css/jPages.css">
<script src="js/jquery.min.js"></script>
<script src="js/jPages.js"></script>

如果你想使用Animate.css动画你还需要添加的文件：

<link rel="stylesheet" href="css/animate.css">

三、使用

• HTML结构

<!-- 页码 -->
<div class="holder"></div>
<!-- 内容-->
<ul id="itemContainer">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

• 初始化

$(function(){
    $('.holder').jPages({
        containerID: 'itemContainer',
        first: '第一页',//false为不显示
        previous: '前一页',//false为不显示
        next: '下一页',//false为不显示 自定义按钮
        last: '最后一页',//false为不显示
        perPage: 3,//每页最多显示5个
        keyBrowse: true,//键盘切换
        scrollBrowse: false,//滚轮切换
        //pause: 1000,//自动切换
        //clickStop: true,//点击停止自动切换
        //delay: 250,//每张图片显示动画延迟
        //direction: "auto",//本页图片显示的顺序 -> "forward", "backwards", "auto" or "random".
        //fallback: 5000,//每张图片显示透明度延迟
        callback: function(pages, items) {
            console.log(pages);
            console.log(items);
        },
    });

    //跳转到某一页
    $('.goPage').on('click', function() {
        $(".holder").jPages(5);
    });

});

四、参数

containerID: "",    //项目容器ID
first: false,    //首页的自定义文字,如不需要则设置为false
previous: "上一页",    //上一页的自定义文字,如不需要则设置为false
next: "next →",    //下一页的自定义文字,如不需要则设置为false
last: false,    //末页的自定义文字,如不需要则设置为false
links: "numeric", // blank || title    //显示数字
startPage: 1,    //应用插件时，您希望首先显示的页面。
perPage: 10,    //每页显示的项目数。
midRange: 5,    //中间页面数量,最好为奇数这样可以两边对称
startRange: 1,    //页面链接的数量总是在导航的起点可见。例如，如果将startRange设置为3，则无论当前页面是什么，页面链接1,2和3将始终可见。
endRange: 1,    //网页链接总数在nav的结尾处可见。
keyBrowse: false,    //键盘左右键控制切换页面
scrollBrowse: false,    //滚轮左右键控制切换页面
pause: 0,    //开启自动翻页切换间隔时间
clickStop: false,    //点击是否停止自动切换
delay: 50,   //每个单独页面之间显示的时间的间隔
direction: "forward", // backwards || auto || random ||    //设置了delay后，可以使用该参数控制他么延迟显示出来的方向
animation: "", //动画名称
fallback: 400,    //如果你没有在参数“animation”中设置CSS3动画，jPages会回退到jQuery fadeIn效果。您可以在此参数中计算淡入速度。你可以使用毫秒或字符串'fast'，'slow'和'normal'。
minHeight: true, //设置容器最小高度
callback: undefined // 回调函数