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

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

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

具体修改如下图所示

01.png 原始文件位置及具体修改内容

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

protected function getAvailablePageWrapper($url, $page) {
    return '
' . $page . '
'; 
}

---

将其修改如下：

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

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

/**
 * 动态加载页面并渲染
 * @param  {文本} url      请求的地址 "{:url('admin/Leave/history2')}"
 * @param  {文本} location 需要加载页面的位置id值（如
）
 * -----------------------------------------------------------------------------
 * 注意：
 *     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("页面加载完毕");
    });
}