jquery分頁自動載入
阿新 • • 發佈:2019-02-16
樣式: <style> .dropload-noData{line-height: 50px;text-align: center;border-top: solid 1px #ddd;margin: 2px auto;padding: 2px auto;width: 95%;} .dropload-refresh,.loading,.dropload-refresh,.dropload-update{display: none;} </style>
<div class="content"> <div class="lists"> <ulclass="slLis wrap"> {foreach name="data" item="v"} <li> <a href="deta_inform?z_id={$v.z_id}"> <img class="lazys" src="{$v.z_img}" style="display: block;"/> </a> <div> <p><ahref="deta_inform?z_id={$v.z_id}" style="color: #000088; font-weight: 800">{$v.z_title}</a></p> <div><span>{$v.z_time}</span></div> </div> </li> {/foreach} </ul> </div> </div> <div class="page" data-page="2" style="display: none"></div>
<script src="/static/js/jquery-2.1.4.min.js"></script> <script src="/static/js/dropload.min.js"></script> <script> var page = $('.page').data('page'); $('.content').dropload({ scrollArea : window, domUp : { domClass : 'dropload-up', domRefresh : '', domUpdate : '', domLoad : '' }, domDown : { domClass : 'dropload-down', domRefresh : '', domLoad : '', domNoData : '<div class="dropload-noData">暫無資料</div>' }, loadDownFn : function(me){ $.ajax({ type: 'POST', url: '#', dataType: 'json', data:{'page':page}, success: function(data){ if(data.length<1){ // 鎖定 me.lock(); // 無資料 me.noData(); me.resetload(); }else{ $.each(data,function(i,val){ $(".slLis").append("<li><a href='deta_inform?z_id="+val.z_id+"'><img class='lazys' src='"+val.z_img+"' style='display: block;'/></a><div><p><a href='deta_inform?z_id="+val.z_id+"' style='color: #000088; font-weight: 800'>"+val.z_title+"</a></p><div><span>"+val.z_time+"</span></div></div></li>"); }); // 每次資料載入完,必須重置 $('.page').attr('data-page',page++); me.resetload(); }}, error: function(xhr, type){ alert('Ajax error!'); // 即使加載出錯,也得重置 me.resetload(); } }); } }); </script> 後臺分頁
public function information() { if(input('page')){ $page = input('post.page'); $pagesize = 10; $data = db('information')->limit(($page-1)*$pagesize,$pagesize)->order("z_time DESC")->select(); return json($data); }else{ $data = db('information')->order("z_time DESC")->paginate(10); $this->assign('data',$data); return $this->fetch(); } }