首先我们来看下效果图，这里一级门区中的福森科技园是有三页数据
现在我选择福森科技园，点击查询能加载出三页数据，并且点击中间的页码也是能异步加载数据的
下面我们来看实际代码吧，首先是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分页就完成了
