JQuery分页插件pagination.js

参考文档：分页-pagination.js (v1.5.1)

官方文档：http://pagination.js.org/

JQuery前台分页插件使用

1、html引用jquery和pagination

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

2、js代码

<script type="text/javascript">
    // 请求接口绘制数据
    $(function () {
        getNewsList();
    });

    // 新闻列表接口
    var url = "/news/newsList";

    // 获取新闻列表
    function getNewsList(pageNum, pageSize) {
        $.ajax({
            type: "GET",
            url: url,
            data: {
                pageNum: pageNum,
                pageSize: pageSize
            },
            success: function (data) {
                if (data.code == 0) {
                    // TODO 业务代码，绘制页码数据
                    // 页码
                    $('.js_page').pagination({
                    	// TODO 按照自己的需要修改下面的参数，参数可取值及其他参数请参考下面的参数配置
                        pageCount: data.data.pages,//总页数
                        current: data.data.current,//当前第几页
                        prevContent: '上一页',//上一页节点内容
                        nextContent: '下一页',//下一页节点内容
                        mode: 'fixed', //模式，unfixed不固定页码按钮数量，fixed固定数量
                        count: 3, //mode为unfixed时显示当前选中页前后页数，mode为fixed显示页码总数,注意：count+1为显示的数字页码按钮数
                        activeCls: 'selected', //当前页选中状态class名
                        coping: false,//是否开启首页和末页
                        isHide: true, //总页数为0或1时隐藏分页控件
                        keepShowPN: false, //是否一直显示上一页下一页
                        callback: function (index) {// 回调函数
                            var pageNum = index.getCurrent();
                            getNewsList(type, pageNum, 10);
                        }
                    });
                }
            },
            error: function (error) {
                console.log(error);
            }
        });
    }
</script>

3、参数配置

参数	默认值	说明
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"为当前页

4、最终效果