分页插件,屏幕滚动ajax加载数据渲染页面

<link rel="stylesheet" href="yunsuifang/pc-patients/css/dropload.css" />
    <style>
       .opacity {
            webkit-animation: opacity 0.3s linear;
            animation: opacity 0.3s linear;
        }

@-webkit-keyframes opacity {
                    0% {
                        opacity: 0;
                 }
                 100% {
                       opacity: 1;
                 }
    }

@keyframes opacity {
                    0% {
                opacity: 0;
               }
                 100% {
               opacity: 1;
                     }
              }

.opacity {
              text-align: left;
             }
   </style>

<!--主题内容-->
<div class="content" style="margin-bottom: 10px;margin-top: 54px;">
<div class="lists"></div>
</div>

<script>
        $(function() {

//入参
             var page = 0; //页码
             var size = 50; //每页显示条数

var loginUsrId = window.localStorage.getItem("XMIDWARE_APP_USRGUID");

var dropload = $(‘.content‘).dropload({

domDown: {
             domClass: ‘dropload-down‘,
             domRefresh: ‘<div class="dropload-refresh">↑上拉加载更多</div>‘,
             domLoad: ‘<div class="dropload-load"><span class="loading"></span>加载中...</div>‘,
             domNoData: ‘<div class="dropload-noData">暂无数据</div>‘
                   },
            scrollArea: window,
            loadDownFn: function(me) {

page++;
           // 拼接HTML
          var result = ‘‘;

$.ajax({
                   type: ‘POST‘,
                   url: ‘https://tsch.fromfuture.cn:7714/GZ/v1/cloud/queryPageHzsfjh?usrguid=‘ + loginUsrId + ‘&pageNo=‘ + page + ‘&pageSize=‘ + size,
                   //async: false,
                   timeout: 8000,
                   success: function(data) {

data = data.trim();
                   data = data.replace(/\n/g, ‘‘);
                   data = JSON.parse(data)
                   console.log(data.data)
                   var data = data.data;
                   var result = ‘‘;

if(data.parameterType.length > 0) {

for(var i = 0; i < data.parameterType.length; i++) {

//DOM取数据库数据
                                                var followdatetime = data.parameterType[i].followdatetime;
                                                var name = data.parameterType[i].name;
                                                var deptnam = data.parameterType[i].deptnam;
                                                var followoption = data.parameterType[i].followoption;
                                                var docguid = data.parameterType[i].docguid;
                                                console.log(followoption);
                                                var strs = new Array(); //定义一数组
                                                strs = followoption.split(","); //字符分割

result += `<div class="opacity" style="padding: 0 30px;background: #fff;">
                                                                    <p class="">
                                                                              <span class="">日期:</span>
                                                                              <span class="">${followdatetime}</span>
                                                                     </p>
                                                                     <p class="">
                                                                              <span class="">医生:</span>
                                                                              <span class=""> ${name} </span>
                                                                      </p>
                                                                      <p class="">
                                                                              <span class="">科室:</span>
                                                                              <span class="">${deptnam}</span>
                                                                      </p>
                                                                      <p style="padding-bottom: 10px;">
                                                                             <span class="">随访内容:</span>
                                                                             <span style="width: 77%;margin-top: -3px;" id="followoption">

</span>
                                                                      </p>
                                                                      </div>
                                                                      <p style="margin-top: 13px;background: #fff;padding-top: 11px;padding-bottom: 11px;padding-left: 30px;text-align:                               right;cursor:pointer;">
                                                                     <span style="color: #00A8EC;">进入随访诊室</span>
                                                                       <i class="glyphicon glyphicon-menu-right" style="margin-right: 25px;height: 40px;line-height: 40px;color: #E2E2E2;"></i>
                                                                      </p>`;
                                                                         }
                                                                                  $(‘.lists‘).append(result); // 插入数据到页面,放到最后面
                                                                                                for(j = 0; j < strs.length; j++) {
                                                                                                    console.log(strs[j]);
                                                                                                     var ss = ‘‘;
                                                                                                     ss += ‘<i class="icla">‘ + strs[j] + ‘</i>‘;
                                                                                                    console.log(ss);
                                                                                                    $(‘#followoption‘).append(ss)
                                                                                                    }

} else {
                                                                                                         tab1LoadEnd = true; // 数据加载完
                                                                                                          me.lock(); // 锁定
                                                                                                         me.noData(); // 无数据
                                                                                                         }
                                                                                                         // 为了测试,延迟1秒加载
                                                                                                         setTimeout(function() {

me.resetload(); // 每次数据插入,必须重置
                                                                                                         }, 1000);

},

error: function(xhr, type) {
                                                                                                         console.log(‘Ajax error!‘);
                                                                                                         me.resetload(); // 即使加载出错,也得重置

}
                                                                                                            });
                                                                                                         }
                                                                                                              });
                                                                                                            $(‘.lists‘).siblings().eq(1).remove();
                                 });

</script>

时间: 2024-11-08 21:22:50

分页插件,屏幕滚动ajax加载数据渲染页面的相关文章

自制Javascript分页插件,支持AJAX加载和URL带参跳转两种初始化方式,可用于同一页面的多个分页和不同页面的调用

闲话部分 最近闲着实在无聊,就做了点小东西练练手,由于原来一直在用AspNetPager进行分页,而且也进行了深度的定制与原有系统整合的也不错,不过毕竟是用别人的,想着看自己能试着做出来不能,后台的分页插件已经有比较成熟的了,那就自己试着写一个前台分页吧. 话不多说,先上效果图: 优点与缺点 来说说优缺点吧,首先AspNetPager是后台分页控件,所以在向客户端回传HTML文档之前生成HTML阶段 就会把分页代码生成完毕,然后回传,而JS是前端代码,就是HTML文档在服务器组织完毕往客户端传送

页面滚动动态加载数据,页面下拉自动加载内容 jquery

<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type="text/javascript"></ script> < script type="text/javascript"> $(document).ready(function(){ var range = 50; //距下边界长度/单位px var

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧 当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo

ExtJS学习笔记2:响应事件、使用AJAX加载数据

响应事件: 1.设置一个html标记 <div id="my-div">Ext JS 4 Cookbook</div> 2.使用get函数获取此标记对象 var el = Ext.get('my-div'); 3.将响应函数和对象的事件绑定 el.on('click', function(e, target, options){ alert('The Element was clicked!'); alert(this.id); }, this); 4.一次也可

一个简单的无限滚动的加载数据实现

早上本来想研究昨天晚上携程的那道题目的,但是感觉不知道如何下手,就研究了下如何实现无限滚动加载数据. 以前项目里也用到过,不过是别人封装好的,我只需要调用就好了.自己做还是遇到了点小问题. 1.如何确定滚动条的位置,其实想通了很简单的,就是利用scrollHeight和scrollTop以及可视区的高度来实现的. 2.就是如何保证加载数据的时候,不会出现重复加载.这个也很简单,标记每次加载结束的位置.如果你用的是数据库的话,可以采用分页的形式,每次只添加一页的内容.每当滚动条到底部的时候再加载下

Ajax 加载数据 练习

查询表的显示,查询显示如果不嵌入PHP代码的话,用ajax怎么实现?   <h1>显示数据</h1> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>代号</td> <td>姓名</td> <td>性别</td>

Ajax加载数据的使用

需求就是不能再进入页面时加载数据,只能在点击其中一个按钮时把数据加载呈现出来.具体效果如最下面的图. 1.前台页面 1 <h1 class="title" id="001" name="001" onclick="GetData(1)"> 2 概述 <span class="title_icon"></h1> 3 <div class="mc_list&q

页面滚动动态加载数据

//返回顶部js $(window).scroll(function() {            var sc = $(window).scrollTop();            //var rwidth=$(window).width()            if (sc > 0) {                $("#goTopBtn").css("display", "block");                $(&

利用Ajax加载数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-