1. 程式人生 > >jquery分頁自動載入

jquery分頁自動載入

樣式:
<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">
        <ul 
class="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><a
href="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();
}
}