首先我们来看下效果图,这里一级门区中的福森科技园是有三页数据

blob.png

现在我选择福森科技园,点击查询能加载出三页数据,并且点击中间的页码也是能异步加载数据的

blob.png

下面我们来看实际代码吧,首先是HTML,HTML有两个,一个是index.html,另一个是ajax_area.html

 <!--index.html-->
   <script src="__PUBLIC__/Default/js/cypager.min.js"></script>//这是一个必须引用的js
   <script type="text/javascript">
     function select_area(){
       var options=$("#area option:selected");
       var area=options.val();
       var optionstwo=$("#twoarea option:selected");
       var twoarea=optionstwo.val();
       var optionsthree=$("#threearea option:selected");
       var threearea=optionsthree.val();
       var area_id=area+':'+twoarea+':'+threearea;
       $.ajax({
         type:"POST",
          url:"index.php?m=Admin&c=Areainfo&a=area_ajax",
         // data:{'verify':verify,'name':name},
         data:"id="+area_id+"&p="+0,
         dataType:"json",
         success:function(data){
           if(data.num>0){
             $("#areazone").empty();
             $('#areazone').html(data.str);
           }else{
             $("#areazone").empty();
             $('#areazone').html('没有符合条件的数据!');
           }
         },
       });
     }

     function select_data(count){
       var p=count;
       var options=$("#area option:selected");
       var area=options.val();
       var optionstwo=$("#twoarea option:selected");
       var twoarea=optionstwo.val();
       var optionsthree=$("#threearea option:selected");
       var threearea=optionsthree.val();
       var area_id=area+':'+twoarea+':'+threearea;
       $.ajax({
         type:"POST",
          url:"index.php?m=Admin&c=Areainfo&a=area_ajax",
         // data:{'verify':verify,'name':name},
         data:"id="+area_id+"&p="+p,
         dataType:"json",
         success:function(data){
           var html = [];
           for(var i=0;i<data.length;i++){
               html.push('<tr class="gradeU"><td>'+data[i].areano+'</td><td>'+data[i].upareano+'</td><td>'+data[i].areaname+'</td><td>'+data[i].remark+'</td><td>'+data[i].operatorname+'</td><td><a href="index.php?m=Admin&c=Areainfo&a=edit&id='+data[i].id+'" target="_blank"><button type="button" class="btn btn-w-m btn-info">修改</button></a><a href="index.php?m=Admin&c=Areainfo&a=delete&id='+data[i].id+'" onclick = "return shifou();"><button type="button" class="btn btn-w-m btn-danger">删除</button></a></td></tr>');
           }
           $("#ajaxareadata").empty();
           $('#ajaxareadata').prepend(html.join(''));
         },
       });
     }
   </script>
<!--ajax_area.html-->
       var p=count;
      <table class="table table-striped table-bordered table-hover dataTables-example" >
 <thead>
 <tr>
     <th>区域编号</th>
     <th>上级区域编号</th>
     <th>区域名称</th>
     <th>备注</th>
     <th>操作员</th>
     <th>操作</th>
 </tr>
 </thead>
 <tbody id="ajaxareadata">
 <foreach name="list" item="vo" key="k">
 <tr class="gradeU">
     <td>{$vo.areano}</td>
     <td>{$vo.upareano}</td>
     <td>{$vo.areaname}</td>
     <td>{$vo.remark}</td>
     <td>{$vo.operatorname}</td>
     <td>
         <a href="{:U('Areainfo/edit',array('id'=>$vo['areano']))}" ><button type="button" class="btn btn-w-m btn-info">修改</button></a>
         <a href="{:U('Areainfo/delete',array('id'=>$vo['areano']))}" onclick = "return shifou();"><button type="button" class="btn btn-w-m btn-danger">删除</button></a>
     </td>
 </tr>
 </foreach>
 </tbody>

</table>
  <!-- {$page} -->
  <div id="pagerArea" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;"></div>

  <script type="text/javascript">


  $(function() {
      $("#pagerArea").cypager({pg_size: 10, pg_nav_count: 8, pg_total_count: {$total_count}, pg_call_fun: function(count) {
           select_data(count);
          }});

  });
  </script>

下面是php代码,我这里的数据是从数组里面取的

 <!-- $listArr为加载的数据-->
         public function area_ajax(){
       if(isset($_POST['id'])){
         if($_POST['p']==1||$_POST['p']==0){
           $firstRow  = 0;
         }else{
           $firstRow  = 10 * ($_POST['p'] - 1);
         }
         $total_count=count($listArr);
         $listArr=array_slice($listArr,$firstRow,10);
         foreach ($listArr as $key => $value) {
           if($value['remark']==null){
             $listArr[$key]['remark']='';
           }
         }
         $pageCount = ceil(($total_count/10));
         $this->assign("list",$listArr);
         $this->assign('total_count',$total_count);// 赋值分页输出
         $this->assign('p',$_POST['p']);
         $this->assign('pagenum',$pageCount);
         $str=$this->fetch('area_ajax');//把页面转换成字符串
         if($_POST['p']==0){
           echo json_encode(array('type'=>'yes','str'=>$str,'num'=>count($listArr)));
         }else{
           echo json_encode($listArr);
         }
       }
   }

这样一个完整的ajax分页就完成了