专栏首页编程微刊Jquery前端分页插件pagination使用

Jquery前端分页插件pagination使用

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

实例图片

jQuery Pagination分页插件:下载:http://www.jq22.com/jquery-info5697

步骤一:导入相关的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"
            
        }
        
    ]
}

文末福利:

福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880 福利二:微信小程序入门与实战全套详细视频教程

image

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • forEach循环实现卡片列表

    王小婷
  • 使用bootstrap的栅栏实现五列布局

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随...

    王小婷
  • jQuery动态拼接多张图片并且获取每张图片名称

    1:动态拼接图片,按照顺序渲染图片 2:点击图片,将获取的图片路径进行分割,获取图片名称。

    王小婷
  • CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

    xing.org1^
  • 寿司快卖,创建一个运行在电脑,手机及Pad上的多屏游戏

    本节开始,我们将设计一个养成类游戏。游戏主题是创建一家寿司店,你是主厨,当客户点餐后,你根据菜单配置寿司。我们会先把游戏设计成页面游戏,然后通过不断的调试,将游...

    望月从良
  • JavaScript 技术篇-js创建dom节点,并设置属性

    document.createElement() 是创建节点的方法。 setAttribute() 是设置属性的方法。

    小蓝枣
  • jQuery中排除指定元素,同时选择剩下的所有元素

    场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

    菩提树下的杨过
  • 【前端】CSS : float

    注:当一个元素浮动之后,从普通文档流中脱离,然后向左或者向右平移,一直平移直到碰到了所处的容器的边框,或者碰到另外一个浮动的元素。

    Gavin-ZYX
  • 使用bootstrap的栅栏实现五列布局

    我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随...

    王小婷
  • React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?

    在交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => inde...

    Javanx

扫码关注云+社区

领取腾讯云代金券