Thinkphp 5.1采用Ajax分页后,首页自然不是问题,但是后续的页面链接仍然指向原地址;虽然可以取回数据,但是没有样式的渲染——因为此时的页面只有“一部分”本身就没有CSS样式!
具体修改如下图所示解决的办法有很多,比如重新创建分页类,或者通过Composer下载一个;但这无疑会增加系统的复杂程度,最后利用Thinkphp自带的分页类直接修改,毕竟只需要修改一下
<a></a>
部分。
待修改的文件地址为:
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("页面加载完毕");
});
}