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("页面加载完毕");
- });
- }
来源: http://www.jianshu.com/p/990fa8e1d4ca