应对良好的用户体验,好多项目需要使用ajax无刷新分页的技术,现给出服务器端代码demo,以供参考修改使用:
控制器端使用:
//载入分页工具类
$page_info=new PageTool; $show_page=$page_info->norefShow($page,$size,$total,'xxxx.com/xxxx'));
用到的无刷新分页函数如下:
/**
* 无刷新分页
*
* @param $page 当前页码
* @param $size 每页展示的记录数
* @param $total 总记录数
* @param $url 请求数据的url
* @param $list 数据回调显示区域ID
*/
public function norefShow($page,$size,$total,$url,$list='tbody#list'){
$total_page=ceil($total/$size);
$html = '';
if($total_page>1){
$html .= "<div id='page_show' class='page'>";
$html .= "<a ".($page<=1?"class='disabled'":"")." href='javascript:void(0)' id='page_prev'> < </a>";
for($i=1;$i<=min(5,$total_page/2);++$i){
$html .= "<a ".($i==$page?"class='current'":"")." href='javascript:void(0)' id='page_{$i}'>{$i}</a>";
}
$html .= "<span id='page_center'>";
$html .= '<span id="page_left" '.($page>8?'':'style="display:none;"').'> ... </span>';
for($i;$i<max($i,$page-2);++$i){
$html .= "<a style='display:none;' href='javascript:void(0)' id='page_{$i}'>{$i}</a>";
}
for($i=max($i,$page-2);$i<=min($total_page-ceil(min(5,$total_page/2)),$page+2);++$i){
$html .= "<a ".($i==$page?"class='current'":"")." href='javascript:void(0)' id='page_{$i}'>{$i}</a>";
}
for($i;$i<max($i,$total_page-ceil(min(5,$total_page/2)-1));++$i){
$html .= "<a style='display:none;' href='javascript:void(0)' id='page_{$i}'>{$i}</a>";
}
$html .= '<span id="page_right" '.($page<$total_page-8?'':'style="display:none;"').'> ... </span>';
$html .= "</span>";
for($i=max($i,$total_page-ceil(min(5,$total_page/2)-1));$i<=$total_page;++$i){
$html .= "<a ".($i==$page?"class='current'":"")." href='javascript:void(0)' id='page_{$i}'>{$i}</a>";
}
$html .= "<a ".($page>=$total_page?"class='disabled'":"")." href='javascript:void(0)' id='page_next'> > </a>";
$html .= "</div>";
$html .= "<div class='fl'>共{$total_page}页,{$total}条</div>";
$html .= <<< HTML
<script type="text/javascript">
var page_now = parseInt('{$page}');
var page_totle = parseInt('{$total_page}');
$(function(){
$('#page_show a[id]').click(function(){
var page = $(this).attr('id').replace("page_","");
if(page=='prev'){
page = page_now - 1;
}
if(page=='next'){
page = page_now + 1;
}
if(page_now==page){
return;
}
if(page<1){
return;
}
if(page>page_totle){
return;
}
if(page<=1){
$('#page_prev').addClass('disabled');
}else{
$('#page_prev').removeClass('disabled');
}
if(page>=page_totle){
$('#page_next').addClass('disabled');
}else{
$('#page_next').removeClass('disabled');
}
$('#page_'+page_now).removeClass('current');
$('#page_'+page).addClass('current');
if(page_totle>10){
if(page>8 && page_now<=8){
$('#page_left').css('display','');
}else if(page<=8 && page_now>8){
$('#page_left').css('display','none');
}
if(page<page_totle-8){
$('#page_right').css('display','');
}else if(page>=page_totle-8){
$('#page_right').css('display','none');
}
for(i=6;i<=page_totle-5;++i){
if((i-page)*(i-page)<=4){
$('#page_'+i).css('display','');
}else{
$('#page_'+i).css('display','none');
}
}
}
$('{$list}').attr('page',page);
$.post('{$url}',{page:page},function(data){
$('{$list}').html(data);
},'html');
page_now = parseInt(page);
});
});
</script>
HTML;
}
return $html;
}