美文网首页IT@程序员猿媛程序员
修改TP5的分页类使之Ajax分页有效

修改TP5的分页类使之Ajax分页有效

作者: YEYU2001 | 来源:发表于2019-03-19 16:50 被阅读25次

Thinkphp 5.1采用Ajax分页后,首页自然不是问题,但是后续的页面链接仍然指向原地址;虽然可以取回数据,但是没有样式的渲染——因为此时的页面只有“一部分”本身就没有CSS样式!

解决的办法有很多,比如重新创建分页类,或者通过Composer下载一个;但这无疑会增加系统的复杂程度,最后利用Thinkphp自带的分页类直接修改,毕竟只需要修改一下<a></a>部分。

具体修改如下图所示 01.png 原始文件位置及具体修改内容

待修改的文件地址为:
thinkphp/library/think/paginator/driver/Bootstrap.php

protected function getAvailablePageWrapper($url, $page) {
    return '<li><a href="' . htmlentities($url) . '">' . $page . '</a></li>'; 
}

将其修改如下:

/**
 * 生成一个可点击的按钮
 *
 * @param  string $url
 * @param  int    $page
 * @return string
 */
protected function getAvailablePageWrapper($url, $page) {
    // return '<li><a href="' . htmlentities($url) . '">' . $page . '</a></li>'; // 原版仅该行
    // 原版直接取得数据,由于使用Ajax动态获取页面,就必须废掉href而采用onClick的方式
    // 分页请求的地址是现成的——htmlentities($url),可以直接用于loadAjaxHTML(url,location)的url参数中
    // location直接采用默认的content即可
    // 由于动态拼接生成<li></li>并且嵌套了多层的文本及变量,只能拆分成两个变量处理
    $AjaxHTM = 'loadAjaxHTML("' . htmlentities($url) . '");';
    $onclick = "onclick='" . $AjaxHTM . "'";
    return '<li><a href="#" ' . $onclick . '>' . $page . '</a></li>';
}

注意:loadAjaxHTML() 为Ajax动态提取页面的javascript函数,其他使用方法具体参考:《TP5实现Ajax获取页面并渲染》

/**
 * 动态加载页面并渲染
 * @param  {文本} url      请求的地址 "{:url('admin/Leave/history2')}"
 * @param  {文本} location 需要加载页面的位置id值(如<section id="content">)
 * -----------------------------------------------------------------------------
 * 注意:
 *     1. Html页面A标签的onclick必须采用以下格式:
 *        onclick='loadAjaxHTML("{:url('admin/Leave/history2')}","content");'
 *     2. 思路:直接利用MVC的View部分——Thinkphp5的 return $this->fetch()取回页面
 *        好处是中间可以用任意的对页面进行赋值和分配,在后端不需要任何的修改
 *     3. 意味着通过TP5实现Ajax动态加载页面做到不刷新的APP级别Web应用的可实现性!
 * -----------------------------------------------------------------------------
 */
function loadAjaxHTML(url,location){
    //设置默认参数
    var location = arguments[1] ? arguments[1] : 'content';     // 加载位置id
    // 采用JQuery的Get方法得到页面
    $.get(url, function(data) {
        // 必须使用原生的innerHTML才能不丢失CSS样式
        document.getElementById(location).innerHTML = data;
        // showMsg("页面加载完毕");
    });
}

相关文章

网友评论

    本文标题:修改TP5的分页类使之Ajax分页有效

    本文链接:https://www.haomeiwen.com/subject/jxdnmqtx.html