tp5的ajax搜索后分页,修改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 = "οnclick='" . $AjaxHTM . "'";

return '

' . $page . '';

}

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

/**

* 动态加载页面并渲染

* @param {文本} url 请求的地址 "{:url('admin/Leave/history2')}"

* @param {文本} location 需要加载页面的位置id值(如)

* -----------------------------------------------------------------------------

* 注意：

* 1. Html页面A标签的onclick必须采用以下格式：

* οnclick='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("页面加载完毕");

});

}