Jquery 分页插件----pagination

 

• pagination 实现

     下载地址：https://github.com/superRaytin/paginationjs

     demo实现：

    js引用：

  <script src="js/jquery.js"></script>
    <!--分页-->
    <link rel="stylesheet" href="js/pagination.css" />
    <script type="text/javascript" src="js/pagination.js"></script> 

   html页面：   

<div class="zxdong">

        <div class="zxdong_inner">
            <ul style="margin-left: 100px;">
                <div class="list">
                </div>
            </ul>

        </div>
    </div>
    <div class="setPageDiv">
        <div class="pagination" id="pagination">
        </div>
    </div>

 js：

<script>
    //分页
    $(function () {
        function getList() {
            $.ajax({
                url: 'js/data.txt',
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                    $('.pagination').pagination({
                        pageNumber: 1,  //指定初始化时加载哪一页的数据
                        pageSize: 2,  //每页的条目数
                        pageRange: 2,  //可见的页码范围，即当前页码两边的页码数量
                        showPrevious: true,  //是否显示“上一页”,默认为true
                        showNext: true,  //是否显示“下一页”,默认为true
                        prevText: '上页', //“上一页”的文本
                        nextText: '下页', //“下一页”的文本
                        showPageNumbers: true, //是否显示页码,默认为true
                        showNavigator: true,   //是否显示导航器，默认为false
                        showGoInput: true,   //是否显示跳转输入框，默认为false
                        showGoButton: true,  //是否显示跳转按钮，默认为false
                        showFirstOnEllipsisShow: true, //是否在有省略时显示开始页码，默认为true
                        showLastOnEllipsisShow: true,  //是否在有省略号时显示结束页码,默认为true
                        autoHidePrevious: false,   //是否在当前显示为第一页时隐藏“上一页”按钮，默认为false
                        autoHideNext: false,  //是否在当前显示为最后一页时隐藏"下一页"按钮
                        ellipsisText: "...",  //省略号文本，默认为...
                        goButtonText: "Go",    //跳转按钮文本，默认为Go
                        dataSource: data.list,
                        callback: function (data, pagination) {  //每次翻页时的回调 ，data:当页数据，pagination:包含当页配置信息的对象
                            var html = '<ul>'
                            for (var i = 0 ; i < data.length; i++) {
                                //console.log(i)

                                var img = data[i].manager;
                                html += "<li>" + img + "</li>";
                            }
                            html += '</ul>';
                            $('.list').html(html)
                        }
                    });

                }
            });
        }
        getList();
    })
</script>

实现效果：

  

• pagination资料

     具体参数说明： https://github.com/superRaytin/paginationjs/blob/master/docs/cn.md