ajax 自动加载分页

1.导入需要的js

<script src="/tpl/wsctpl/117xx/updown.js"></script>

2.html页面 需要一个容器放分页信息
<div class="weui_panel">
    <div class="weui_panel_bd ">
    </div>
</div>

3.需要加载分页的js
<script type="text/javascript" $(function () {

     //关键字
     var keyword = $('#keyword').val();
     //选择筛选类型
     var brush = $('#brush').val();
     // var brush =$('#brush option:selected').val();
     //开始时间
     var start_time = $('#start_time').val();
     //结束时间
     var end_time = $('#end_time').val();
     //设置 var page = 0；即可，因为这个插件的第一页实际是从0开始的，所以不能设置为var page = 1
     var cont= '<{$result}>';
     var page = 0;
     // 每页展示10个
     var size =10;
     console.log(keyword);
     console.log(brush);
     // alert(brush);
     $('.weui_panel').dropload({
         scrollArea : window,
         autoLoad : true,//自动加载
         domDown : {//上拉
             domClass   : 'dropload-down',
             domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
             domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
             domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
         },
         domUp : {//下拉
             domClass   : 'dropload-up',
             domRefresh : '<div class="dropload-refresh"><i class="icon icon-114"></i>上拉加载更多</div>',
             domUpdate  : '<div class="dropload-load f15"><i class="icon icon-20"></i>释放更新...</div>',
             domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>'
         },

         loadDownFn : function(me){//加载更多
             page++;
             // window.history.pushState(null, document.title, window.location.href);
             var result = '';
             $.ajax({
                 type: 'GET',
                 url:"传到后台返回ajax数据的方法",
                 dataType: 'json',
                 success: function(data){
                     var arrLen = data.length;
                     if(arrLen > 0){
                         for(var i=0; i<arrLen; i++){
                             result+=   '<div class="weui_cells weui_cells_access" style="margin-top: 0px;">' ;">
                                 <a class="weui_cell" href="javascript:show('+data[i].id+')">'+
                                 '<div class="weui_cell_bd weui_cell_primary">'+
                                 '<p>'+data[i].dwmc+':【'+data[i].unitname+'】</p>'+
                                 '<p>'+data[i].pdzg+':'+data[i].admininums+' '+data[i].jsy+':'+data[i].techniciannum+' 
                                 '+data[i].user+':'+data[i].usernums+'</p>'+
                                 '<p>'+data[i].csr+':'+data[i].adminitem.uname+'</p>'+
                                 '<p >'+data[i].hfzt+':'+data[i].state+'</p>'+
                                 '<p>'+data[i].sqsj+':'+data[i].authorizetime+'</p>'+
                                 '<p >'+data[i].hysj+':<font style="color:'+data[i].activetimes+'">
                                 '+data[i].activetime+'</font></p>'+
                                 '<p>'+data[i].zcsj+':'+data[i].addtime+'</p>'+
                                 '</div>'+
                                 '<div class="weui_cell_ft">'+data[i].fdcs+''+data[i].listnums+'</div>'+
                                 '</a></div>';
                         }
                         // 如果没有数据
                     }else{
                         // 锁定
                         me.lock();
                         // 无数据
                         me.noData();
                     }
                     $('.weui_panel_bd').append(result);
                     me.resetload();
                 },
                 error: function(xhr, type){
                     //alert('Ajax error!');
                     // 即使加载出错，也得重置
                     me.resetload();
                 }
             });
         }
     });
 });
</script>
4.渲染html页面的方法
通过sql查询所需要的信息的的行数传到前台
5.返回ajax的方法
通过数据库查询得到的信息得到的结果
foreach 循环赋值

foreach ($result as $key => $value) {

$result[$key]['dwmc'] = "单位名称";//单位名称
$result[$key]['name'] = $value['unitname'];//单位名称
$result[$key]['pdzg'] = "派单主管";//派单主管
$result[$key]['admininums'] = $value['admininums'];//派单主管
$result[$key]['jsy'] = "技术员";//技术员
$result[$key]['techniciannum'] = $value['techniciannum'];//技术员
$result[$key]['user'] = "用户";//用户
$result[$key]['usernums'] = $value['usernums'];//用户
$result[$key]['csr'] = "创始人";//创始人
}

echo json_encode($result);//解析