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

当页面中有固定不变的内容也有列表内容 而且列表的内容才涉及到分页的时候 在点击分页时只需要做到列表页面刷新而不是刷新整个页面
当然这个就只能采用局部刷新的原理来实现 局部刷新一般都是采用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 标签的 内容 这样在页面上才能显示出表格的数据 
});

猜你喜欢

转载自blog.csdn.net/mao__ge/article/details/86570351