码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-12 15:49:36      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:$.ajax   hicon   ack   doc   city   sch   loading   anim   gen   

<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>

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

标签:$.ajax   hicon   ack   doc   city   sch   loading   anim   gen   

原文地址:http://www.cnblogs.com/hjptopshow/p/7509706.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!