Jquery前端分页插件pagination使用

简介: Jquery前端分页插件pagination使用

插件描述:JqueryPagination是一个轻量级的jquery分页插件。只需几个简单的配置就可以生成分页控件。并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分页插件。


步骤一:导入相关的jquery和pagination文件
        <script src="js/jquery-1.11.3.js"></script>
        <!--分页-->
        <link rel="stylesheet" href="css/pagination.css" />
        <script type="text/javascript" src="js/jquery.pagination.js"></script>
步骤二:HTML代码:

非常简单只需要一个div标签

  <div class="setPageDiv">
            <div class="Pagination" id="pagination"></div>
 </div>
步骤三: JS代码:
   $('.Pagination').pagination(pageNum, {
                            num_edge_entries: 1, //边缘页数
                            num_display_entries: 4, //主体页数
                            items_per_page: 1, //每页显示1项
                            prev_text: "上一页",
                            next_text: "下一页",
});
完整代码实例展示:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="js/jquery-1.11.3.js"></script>
        <!--分页-->
        <link rel="stylesheet" href="css/pagination.css" />
        <script type="text/javascript" src="js/jquery.pagination.js"></script>
        <style>
            .setPageDiv {
                width: 1100px;
                margin: auto;
                margin-bottom: 91px;
                margin-top: 37px;
            }
            #pagination {
                margin: auto;
                margin-left: 100px;
            }
            .img-responsive {
                width: 30px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div class="zxdong">
            <div class="zxdong_inner">
                <ul style="margin-left: 100px;">
                    <!--<div class='row'>
                        <div class='col-md-1   col-xs-1'>
                        <img src='" + img + "'/   class='img-responsive'>
                        </div>
                        <div class='col-md-3   col-xs-3'>
                        <p>11111111111111111 </p>
                        </div></div>-->
                    <div class="list">
                    </div>
                </ul>
            </div>
        </div>
        <div class="setPageDiv">
            <div class="Pagination" id="pagination"></div>
        </div>
    </body>
    <script>
        //分页
        $(function() {
            $('.setPageDiv').change(function() {
                getMsg(parseInt($(this).val()))
            })
            function getMsg(num) {
                $.ajax({
                    url: 'data/bussiness.json',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        //1.计算分页数量
                        var showNum = num;
                        var dataL = data.list.length;
                        var pageNum = Math.ceil(dataL / showNum);
                        $('.Pagination').pagination(pageNum, {
                            num_edge_entries: 1, //边缘页数
                            num_display_entries: 4, //主体页数
                            items_per_page: 1, //每页显示1项
                            prev_text: "上一页",
                            next_text: "下一页",
                            callback: function(index) {
                                //console.log(index);
                                var html = '<ul>'
                                console.log(showNum * index + '~' + parseInt(showNum * index) + parseInt(showNum))
                                for(var i = showNum * index; i < showNum * index + showNum; i++) {
                                    //console.log(i)
                                    if(i < dataL) {
                                        var img = data.list[i].img;
                                        var manager = data.list[i].manager; //交易类型
                                        html += "<div class='row'>";
                                        html += "<div class='col-md-1   col-xs-1'>"
                                        html += "<img src='" + img + "'/   class='img-responsive'>"
                                        html += "</div>"
                                        html += "<div class='col-md-3   col-xs-3'>"
                                        html += "<p>" + manager + "</p>"
                                        html += "</div></div>";
                                    }
                                }
                                html += '</ul>';
                                $('.list').html(html)
                            }
                        })
                    }
                })
            }
            getMsg(6)
        })
    </script>
</html>
数据格式:bussiness.json
{
    "list": [
        {
            "img":"img/dingwei.png",
            "manager": "新店开业刷刷送豪礼"
        }, {
            "img": "img/dingwei.png",
            "manager": "文史楼108"
        },
        {
            "img": "img/dingwei.png",
            "manager": "文史楼108"
        },
        {
            "img": "img/dingwei.png",
            "manager": "文史楼108"
        },
        {
            "img": "img/dingwei.png",
            "manager": "文史楼108"
        }
    ]
}
相关文章
|
4月前
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
34 0
|
4月前
|
设计模式 JavaScript 前端开发
|
4月前
|
SQL 前端开发 Java
java通用分页前端(2)
java通用分页前端(2)
30 0
|
2月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
27天前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
25 0
|
2月前
|
前端开发 JavaScript
工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办
工作这么久了,还不懂如何使用纯前端实现分页吗?-假如后端一股脑返回给你所有数据,让你自个实现分页该怎么办
34 0
|
2月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
19 0
|
2月前
|
前端开发 JavaScript 算法
【web前端技术】响应式画廊Gallery插件-Justified-Gallery
【web前端技术】响应式画廊Gallery插件-Justified-Gallery
24 0
|
3月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
42 1
|
3月前
|
JavaScript 前端开发 UED
前端知识笔记(四)———JQuery 自动刷新页面但不闪烁的实现方法
前端知识笔记(四)———JQuery 自动刷新页面但不闪烁的实现方法
22 0

热门文章

最新文章

相关产品

  • 云迁移中心