关于html页面列表点击分页的局部刷新

最新推荐文章于 2025-03-21 08:47:38 发布

小猫哥

最新推荐文章于 2025-03-21 08:47:38 发布

阅读量3.6k

点赞数 2

分类专栏： php web 文章标签： ajax 局部刷新无刷新分页

本文链接：https://blog.youkuaiyun.com/mao__ge/article/details/86570351

版权

php 同时被 2 个专栏收录

22 篇文章

订阅专栏

web

10 篇文章

订阅专栏

本文介绍了一种在页面中仅对列表内容进行局部刷新的分页方法，避免了整个页面的重复加载，提高了用户体验。通过使用JavaScript和AJAX技术，实现了高效的数据请求和展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当页面中有固定不变的内容也有列表内容而且列表的内容才涉及到分页的时候在点击分页时只需要做到列表页面刷新而不是刷新整个页面
当然这个就只能采用局部刷新的原理来实现局部刷新一般都是采用ajax 方法来实现的
下面贴上局部刷新的分页公用方法

function page_ajax($page, $pagesize, $count)
    {
        if ($page == '') { $page = 1; }
        if($count == 0) {
            $pagestr="<font color='red'>没有搜索到合适的记录！</font>";
            return $pagestr;
        }
        $pagenum = ceil($count / $pagesize);
        $pagestr="总计<font color=\"#FF0000\">".$count."</font>记录&nbsp;&nbsp;第<font color=\"#FF0000\">$page</font>/".$pagenum."页&nbsp;&nbsp;";
        $page==1?$pagestr.="首页&nbsp;&nbsp;上一页&nbsp;&nbsp;"： $pagestr.="<a page='1' style='cursor: pointer'>首页</a>&nbsp;&nbsp;<a page='".($page-1)."' style='cursor: pointer'>上一页</a>&nbsp;&nbsp;";
        $page<$pagenum?$pagestr.="<a page='".($page+1)."' style='cursor: pointer'>下一页</a>&nbsp;&nbsp;<a page='".$pagenum."' style='cursor: pointer'>尾页</a>"：        $pagestr.="下一页&nbsp;&nbsp;尾页";
        $pagestr.="&nbsp;&nbsp;<input name='pageno' id='pageno' value='$page' style='width:60px; text-align:center;' />";
        $pagestr.="<button name='pagebtn' page='pagebtn' id='pagebtn'>提交</button>";
        return $pagestr;
    }

当分页的按钮发生点击的时候触发下面的这个js事件

$(document).on('click', "a,   button#pagebtn", function() {
    var obj_type = $(this).attr('page');
    var  page = obj_type=='pagebtn' ? $(this).siblings('input#pageno').val() : obj_type; // 需要的页码数
    // 这里就书写 js里面的ajax 代码   去后台请求数据 然后直接  请求到的数据渲染到页面上就OK   
    //  如果页面时表格的话   那后台输出的数据也一定要是包含html table 标签的 内容 这样在页面上才能显示出表格的数据 
});