网站建设之php+jquery无刷新数据分页(深圳网站建设)

2023-12-28    分类: 网站建设

当我们展现大量数据的时候,一般用会刷新页面传入不同参数方式 进行数据分页,但是每次刷页面定位就会在头部,如果用瞄点或者更好的js动画进行重新定位,也会有页面刷新时闪屏的现象,为了追求更好的用户体验,我们结合ajax的局部刷新做一个不刷新页面的的分页
function page_ajax($total,$page,$page_size = '')
{
//$total :总数
//$page  :传递过来的当前页的值,第八页$page = 8;
//$page_size :每页显示的数据的数目
//$url   :传递的地址,默认为当前页面
//$max_length:分页代码时候,中间的分页数的一半
$page = ($page < 1) ? 1 : $page ;
$page_size = $page_size ? $page_size : 10;
$url = $url ? $url :$_SERVER['PHP_SELF'];
  //$url=str_replace('.html','',$url);
$max_length = $max_length ? $max_length : 5 ;
$start = $page ? ($page - 1) * $page_size : 0;
$total_page = ceil($total/$page_size);
$page_table = '';
//aways in the pages
$page_table = '<div class="nav-page">';
if($total>0){
//显示第一页
if($page>1){
$page_table .='<a href="###" onclick="javascript:get_log('.($page-1).')" class="previous">&lt;</a>';
}
if($page == 1 )
{
$page_table .= '<a href="###" onclick="javascript:get_log(1)" class="on">1</a>';
}
else
{
$page_table .= '<a href="#sku_list" onclick="javascript:get_log(1)">1</a>';
}

//循环中间页码
if($total_page < $max_length*2)
{
$loop_start = 2;
$loop_end = $total_page-1;
}
else
{
$loop_start = $page - $max_length;
$loop_start = ($loop_start <2) ? 2 :$loop_start;
$loop_end = $page + $max_length;
$loop_end = ($loop_end < $max_length * 2) ? $max_length * 2:$loop_end;
$loop_end = ($loop_end > $total_page) ? $total_page-1 :$loop_end;
}
//... link
$link_start = (($loop_start - $max_length) < 2) ? 2 :$loop_start - $max_length;
$link_end = (($loop_end + $max_length) > $total_page) ? $total_page :$loop_end + $max_length;
if($loop_start > 2)
{
$page_table .= '<a href="###" onclick="javascript:get_log('.$link_start.')">...</a>';
}
//中间链接
for($i = $loop_start ; $i <= $loop_end ; $i++)
{
if($page == $i)
{
$page_table .= ' <a href="###" onclick="javascript:get_log('.$i.')" class="on">'.$i.'</a>';
}
else
{
if($i<>$total_page){ //i不等于总页数$page_table .= '<a href="###" onclick="javascript:get_log('.$i.')">'.$i.'</a>';
    }
}
}
if($loop_end < $total_page-1)
{
$page_table .= '<a href="###" onclick="javascript:get_log('.$link_end.')">...</a>';
}
//末页链接
if($total_page!=1)
{
if($page == $total_page)
{
$page_table .= '<a href="###" onclick="javascript:get_log('.$total_page.')" class="on">'.$i.'</a>';
}
else
{
$page_table .= '<a href="###" onclick="javascript:get_log('.$total_page.')">'.$total_page.'</a>';
}
}
}
//输出分页代码
if($total_page>$page){
  $page_table .= '
  <a  href="###" onclick="javascript:get_log('.($page+1).')"class="next" title="下一页">&gt;</a>';
}else{
 $page_table .= '';
}
$page_table.='</div>';
return $page_table;
}

上面是拼接链接的处理函数。
在控制器中 通过传递的n的页码数查询数据,将数据返回到前端
$page = I('page')>1 ? I('page') : 1 ;
$page_size=10;//每页显示数量
$start = ($page-1)*$page_size;
$ModelObj->where($map)->limit($start,$page_size)->order('create_time desc,id')->select();//echo $ModelObj->_sql();//查询数据
$this->page=page_ajax($total,$page);//分页链接
前端jq
function get_log(n) {
    $.ajax({
        url: url_get_pay+'?page='+n,
         cache: false,
         success: function (obj) {
            $('#log_list').html(obj); //将内容输入到容器中
        },
        error: function () {
            layer.msg('搜索出现错误!', {icon: 5}); //layer弹窗插件
        }
    });
}

以上就是关于网站建设之php+jquery无刷新数据分页(深圳网站建设),希望对你有帮助,更多内容关注创新互联。

文章名称:网站建设之php+jquery无刷新数据分页(深圳网站建设)
文章来源:https://www.cdcxhl.com/news40/310840.html

成都网站建设公司_创新互联,为您提供微信公众号做网站网站建设品牌网站设计商城网站网站维护

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设公司