Jquery+Ajax+Bootstrap Paginator实现分页的拼接

效果图如下

图片.png

jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js

     <link type="text/css" rel="stylesheet" href="bootstrap.css">  
    <script type="text/javascript" src="jquery.min.js"></script>  
    <script src="pagination/js/bootstrap-paginator.js"></script>  

jsp页面代码,页面两个div,一个用于拼接html,一个放分页按钮代码

<div class="row">
                    <div class="col-md-12">
                        <div class="portlet">
                            <div id="htmlDiv"></div>
                            <div class="col-lg-12" align="center">
                                <!-- 分页控件,标签必须是<ul> -->
                                <ul id="pageButton"></ul>
                            </div>
                        </div>
                    </div>
                </div>

js代码:

// 初始化页面
getPageOfMemo(1);

// 分页函数
function getPageOfMemo(page) {
    
    // 获取请求参数(input里面的时间人员参数可忽略注释)
    var beginTime = $("#signDate").val();
    var endTime = $("#signDate1").val();
    var organId = $("#organId").val();
    var personName = $("#personName").val();

    $.ajax({
        url : basePath+"stats/mattess/getDataPage",
        type : "POST",
        data : {
            "page" : page, // 初始页
            "personName" : personName,//以下是搜索相关的参数  input里面的时间人员参数可忽略注释,同上
            "sleepStartTime" : beginTime,
            "sleepStopTime" : endTime,
            "organId" : organId,
        },
        dataType : "json",
        success : function(data) {
            var totalPages;
            if (data.returnData != null) {
                totalPages = data.returnData.totalPages;
                var htm = "";
                $.each(data.returnData.sList, function(i, item) {

                    htm += "<div class='row' id='row-con' ><div><div class='sleep1'>";
                    htm += "<div>" + item.uuid + "</div><div><img id='headUrl' src='"
                            + item.headUrl + "'/></div><div>" + item.personName
                            + "</div>";
                    htm += "</div><div class='sleep2'>";

                    if (item.personSex == 1000001) {
                        htm += "<div>性别:男</div>";
                    } else {
                        htm += "<div>性别:女</div>";
                    }

                    htm += "<div>年龄:" + item.personAge + "</div><div>部门:"
                            + item.organName + "</div>";
                    htm += "</div><div class='sleep3'>"
                    htm += "<div>入睡时间:" + item.sleepStartTime
                            + "</div><div>睡醒时间:" + item.sleepStopTime
                            + "</div>";
                    htm += "</div><div class='sleep4'>";
                    htm += "<div>平均心率:" + item.heart + "次/分</div><div>平均呼吸:"
                            + item.breath + "次/分</div><div>翻身次数:"
                            + item.bodyMove + "次/分</div>";
                    htm += "</div><div class='sleep6'>";
                    htm += "<div ><p>" + item.sleepQuality + "分</p>";

                    if (item.sleepQuality >= 60) {
                        htm += "<p style='border: 4px solid green;'>及格</p>";
                    } else {
                        htm += "<p >不及格</p>";
                    }

                    htm += "</div></div><div class='sleep7' onclick='getDetail("+item.id+")'>详情</div>";
                    htm += "</div></div>";

                });
                $('#htmlDiv').html(htm);
                

                var element = $('#pageButton');
                var options = {
                    bootstrapMajorVersion : 3,
                    currentPage : page, // 当前页数
                    numberOfPages : 5, // 显示按钮的数量
                    totalPages : totalPages, // 总页数
                    itemTexts : function(type, page, current) {
                        switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                        }
                    },
                    // 点击事件,用于通过Ajax来刷新整个list列表
                    onPageClicked : function(event, originalEvent, type, page) {
                        getPageOfMemo(page);
                    }
                };

                element.bootstrapPaginator(options);
            }
        }
    });
};

测试通道,如果想要测试完整效果,css源码附上,效果图如同开篇的文章图片

#htmlDiv {
    color: #5b5d5e;
}

#row-con {
    border: 1px solid #ced2d4;
    margin-bottom: 25px;
    width: 90%;
    margin-left: 10px;
    border-radius: 23px !important;
}

.sleep1 {
    width: 15%;
    float: left;
    text-align: center;
}

.sleep2 {
    width: 15%;
    float: left;
    text-align: center;
}

.sleep3 {
    width: 22%;
    float: left;
    text-align: center;
}

.sleep4 {
    width: 23%;
    float: left;
    text-align: center;
}

.sleep5 {
    width: 15%;
    float: left;
    text-align: center;
}

.sleep6 {
    width: 9%;
    float: left;
    text-align: center;
    margin-top: 10px;
}

.sleep6 div {
    border: 4px solid orangered;
    border-radius: 50px !important;
    width: 72px;
    height: 72px;
}

.sleep7 {
    width: 10%;
    float: left;
    text-align: center;
    color: blue;
    margin-top: 27px;
}

.text-description {
    text-align: center;
    height: 35px;
}

.text-capitalize {
    text-align: center;
    height: 35px;
}

.text-muted {
    text-align: center;
    height: 35px;
    font-size: 18px;
    color: #000000;
    margin-top: 10px;
}

#headUrl {
    width: 30px;
    height: 35px;
}

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张俊红

爬虫进阶(二)

总第66篇 在前面的几篇推文中我们分享了最基础的爬虫入门,以及基于AJAX的爬虫入门,这篇我们分享关于如何利用selenium对目标网页进行数据爬取的。 01|...

40180
来自专栏后端云

RAID

RAID(Redundant Array of Independent Disks):独立冗余磁盘阵列,简称磁盘阵列。RAID是按照一定的形式和方案组织起来的存...

18370
来自专栏木子昭的博客

往"某度文库"上传资源之前,请先做好这些...想到一句好玩的话:知道是你干的,只是懒得抓你!如果你喜欢python,喜欢故事,请点赞或关注我!您的支持是对作者最大的鼓励!

先讲个相关的故事:匿名黑客的"复仇行动" 2010年12月10日,黑客组织匿名者发布了一条消息,解释了他们发起最近一次代号为”复仇行动”的攻击的大致动机(Pr...

394130
来自专栏自然语言处理

微博话题爬取与存储分析(上)

本文基于python以新浪微博为数据平台,从数据采集、关键字提取、数据存储三个角度,用最简单的策略来挖掘我们的“黄金”。

42320
来自专栏一个爱吃西瓜的程序员

爬取许嵩的所有微博并存入MongoDB

我很喜欢许嵩的音乐,我以前基本上他的每首歌都会唱,比如《素颜》、《灰色头像》、《玫瑰花的葬礼》、《清明雨上》、《庐州月》等等,打开播放器,基本上都是循环播放许嵩...

9220
来自专栏文渊之博

讨论关于RAID以及RAID对于存储的影响

定义及作用  RAID是Redundent Array of Inexpensive Disks的缩写,直译为“廉价冗余磁盘阵列”,也简称为“磁盘阵列”。...

18980
来自专栏deepcc

chorme模拟微信浏览器

50380
来自专栏Python中文社区

100行代码爬取全国所有必胜客餐厅信息

极客猴,热衷于 Python,目前擅长利用 Python 制作网络爬虫以及 Django 框架。

37920
来自专栏小樱的经验随笔

深入理解USB流量数据包的抓取与分析

在一次演练中,我们通过wireshark抓取了一个如下的数据包,我们如何对其进行分析?

42520
来自专栏北京马哥教育

【基础拾忆】raid各级别特性

简介 RAID是一个我们经常能见到的名词。但却因为很少能在实际环境中体验,所以很难对其原理 能有很清楚的认识和掌握。本文将对RAID技术进行介绍和总结,以期能尽...

29440

扫码关注云+社区

领取腾讯云代金券