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 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

物理黑:关于HID的一些攻击姿势解析

本文原创作者:mrzcpo 本文内容带有一定的攻击性,仅供学习交流使用,严禁用于非法用途 临近期末考试了,利用烧鹅配合一个简单的木马程序其实可以轻松的从老师的电...

21970
来自专栏JadePeng的技术博客

HTML5录音控件

最近的项目又需要用到录音,年前有过调研,再次翻出来使用,这里做一个记录。 HTML5提供了录音支持,因此可以方便使用HTML5来录音,来实现录音、语音识别等功能...

1.8K50
来自专栏逍遥剑客的游戏开发

XACT基本概念

10830
来自专栏有趣的django

python爬虫入门(九)Scrapy框架之数据库保存

豆瓣电影TOP 250爬取-->>>数据保存到MongoDB 豆瓣电影TOP 250网址 ? 要求: 1.爬取豆瓣top 250电影名字、演员列表、评分和简介 ...

38560
来自专栏技术总结

Python爬取电影天堂

摘取部分网友的回复: 1、之前在北京买房,谁想房价开始疯长,链家的房价等数据分析只给了一小部分,远远不能满足自己的需求。于是晚上花了几个小时的时间写了个爬虫,...

22130
来自专栏施炯的IoT开发专栏

Windows 10 IoT Serials 5 - 如何为树莓派应用程序添加语音识别与交互功能

    都说语音是人机交互的重要手段,虽然个人觉得在大庭广众之下,对着手机发号施令会显得有些尴尬。但是在资源受限的物联网应用场景下(无法外接鼠标键盘显示器),如...

221100
来自专栏不二小段

Python自动统计微博抽奖中奖男女比例(附代码)

今天来写一个自动计算微博抽奖男女比例的代码,很早就应该发这篇了,只是不想蹭热点(才不是拖更)。

17930
来自专栏NetCore

微信快速开发框架(五)-- 利用快速开发框架,快速搭建微信浏览博客园首页文章

这几天接连发布了《快速开发微信公众平台框架---简介》和《体验微信公众平台快速开发框架》几篇关于微信平台的文章,不过反响一般,可能需求不是很多吧。闲来无事,还是...

24290
来自专栏哲学驱动设计

CQRS讨论

今天和同事一起讨论了CQRS(Command Query Responsibility Segregation),过程中,我产生了一些疑问,先记录在这里,以后有...

18970
来自专栏一个会写诗的程序员的博客

《Kotlin极简教程》第1章 Kotlin简介

我们这里讲的Kotlin,就是一门以这个Котлин岛命名的现代程序设计语言。它是一门静态类型编程语言,支持JVM平台,Android平台,浏览器JS运行环境,...

10120

扫码关注云+社区

领取腾讯云代金券