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

  • 时间:2018-06-21 23:18 作者:程序员之言 来源:程序员之言 阅读:339
  • 扫一扫,手机访问
摘要:效果图如下图片.pngjsp页面引入bootstrap样式,jquery和bootstrap-paginator.js jsp页面代码,页面两个div,一个使用于拼接html,一个放分页按钮代码 js代码:// 初始化页面getPageOfMemo(1);// 分页函数f

效果图如下

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

图片.png

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

      

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

    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 += "
    "; htm += "
    " + item.uuid + "
    " + item.personName + "
    "; htm += "
    "; if (item.personSex == 1000001) { htm += "
    性别:男
    "; } else { htm += "
    性别:女
    "; } htm += "
    年龄:" + item.personAge + "
    部门:" + item.organName + "
    "; htm += "
    " htm += "
    入睡时间:" + item.sleepStartTime + "
    睡醒时间:" + item.sleepStopTime + "
    "; htm += "
    "; htm += "
    平均心率:" + item.heart + "次/分
    平均呼吸:" + item.breath + "次/分
    翻身次数:" + item.bodyMove + "次/分
    "; htm += "
    "; htm += "

    " + item.sleepQuality + "分

    "; if (item.sleepQuality >= 60) { htm += "

    及格

    "; } else { htm += "

    不及格

    "; } htm += "
    介绍
    "; htm += "
    "; }); $('#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.songma.com/p/02d071173d15

    • 全部评论(0)
    手机二维码手机访问领取大礼包
    返回顶部