Ajax无刷新分页偷懒版（该例子写于YII框架下，其他框架请自行修改部分代码）
首先，我们来说一下，什么样的操作才叫无刷新，就是页面小部分需要修改的内容被替换，整体页面框架不动的一种操作。那么，我们已经知道了只有部分页面内容会被替换，与其在一个页面里死磕代码，不如把这个页面拆成两个部分页面，一部分用来显示页面不刷新的内容，一部分用来显示页面需要刷新的内容，两个页面拼凑起来就达到我们的效果了。既然这样的话，还做什么无刷新分页，直接把普通的分页提出来自成一个页面，然后让它自己刷去，这样不就好了。
话不多说，基于这个原理，我们来写一个例子：
index.php//列表页
<body>
<?php $hideNav = true; $hideSumInfo=true;require_once $this->queryLeftNavFile();?>//列表页的顶部导航栏
<div class="f_g"></div>
<div id="result">
<?php include_once ("showLeaderTaskResult.php");?>//列表页需要刷新的数据部分
</div>
<!--右侧广告浮窗 star-->
<?php include_once $this->queryShareFile();?>//右侧广告
<!--右侧广告浮窗 end-->
</body>showLeaderTaskResult.php//需要刷新的数据页面
<div class="middle">
<div class="m_t">
<div class="m_t_f">
<div style="float: left;color:#664187;"><span><?php if(isset($nav)) echo $nav;?>/搜索结果 ></span></div>
<div style="float: right;color:#999999;"><span>共<span style="color:#f7d034;"><?php echo $zs; ?></span>个结果</span></div>
</div>
</div>
</div>
<div class="middle">
<?php $nextUrl = "leaderTask/index?parameter=";$btb_catalogs = 2; include_once($this->querySearchNavFile()); ?>
<div class="mfm">
<div class="left" style="width:1240px;">
<ul style="width:1240px;">
<?php foreach($leaderTask_infos as $leaderTask_info) {?>
<li style="min-height:105px;">
<a href="<?php echo SITE_RECEPTION_URL;?>leaderTask/see/leaderTaskId/<?php echo $leaderTask_info["id"];?>" class="fl" style="text-decoration: none;">
<div class="demand_bt"><span class="fl"><?php if(isset($leaderTask_info["industry_name"])) echo $leaderTask_info["industry_name"]; ?> </span>
<font color="#333333"><?php echo $leaderTask_info["title"];?></font>
</div>
</a>
</li>
<?php }?>
</ul>
</div>
<!-- yii自带的分页控件，走的就是普通刷新 -->
<div class="page pageazise" >
<?php
$this->widget("CLinkPager",array(
"header"=>"",
"firstPageLabel" => "首页",
"lastPageLabel" => "末页",
"prevPageLabel" => "上一页",
"nextPageLabel" => "下一页",
"pages" => $pages,
"maxButtonCount"=>8,
"cssFile"=>false,
"htmlOptions" =>array("class"=>"pagination"),
"selectedPageCssClass"=>"active"
)
);
?>
</div>
</div>
</div>
<script>
//注意，这里是重点，重写yii框架自带的分页控件的click事件
$(".pagination a").click(function(){
if($(this).parent().hasClass("active"))
return false;
$.ajax({
type: "POST",
url: $(this).attr("href"),
data: "ajax=1",
success: function(ret){
$("#result").html(ret);
}
});
return false;
});
</script>LeaderTaskController//后台控制器中相对应的方法，从数据库中取数据的代码跳过，直接看页面返回的代码
if(isset($_POST["ajax"])){
if(!empty($arr)){
$this->renderPartial("showLeaderTaskResult", array("bisn_infos" => $bisn_infos, "bisn_i_infos" => $bisn_i_infos, "bisn_i_info" => $bisn_i_info, "arr" => $arr, "leaderTask_infos" => $pag, "pages"=>$Page["pages"], "zs"=>$Page["zs"],"dafenlei"=>$dafenlei,"nav"=>$nav));
}else{
$this->renderPartial("showLeaderTaskResult", array("bisn_infos" => $bisn_infos, "bisn_i_infos" => $bisn_i_infos, "bisn_i_info" => $bisn_i_info, "leaderTask_infos" => $pag, "pages"=>$Page["pages"], "zs"=>$Page["zs"],"dafenlei"=>$dafenlei,"nav"=>$nav));
}看到没有，传统的ajax应该是die()返回数据，然后在回调函数中拼接html。这里直接用renderPartial()方法去生成showLeaderTaskResult页面，将数据填充进去得到没有渲染布局的html内容返回给ajax，这样ajax取到整个showLeaderTaskResult页面html，直接填充到index页面上相应区域就可以了。
是不是很简单的实现方法。懒人请尽管来拿走这篇使用手册，让开发更简洁吧
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
