pjax:更改url,局部刷新页面，请求的数据必须是html代码片段【tp5中可以使用view()输出数据】
ajax:不更改url,局部刷新页面，请求数据可以是jsop,html...
比较两者，pjax可以进行前后退，ajax不能前后退，
于是查了一下，【ajax 前后退问题】
得到结论，动手自己写一个：
还没写好搜索的，先记录一下；
刚好用了hui前端框架，不过好像官方的文档有些旧，有些事件，我只好使用jquery.ui.js,和jquery.cookie.js;正题：
首先使用ajax向后端请求数据，并输出分页数据，【这里我用了选项卡[两个选项：分别是权限组，权限表]，也就是我的页面在不同的选项卡之间有不同的分页的数据】
这里顺便说一下，我复制了官方paginator的驱动Bootstrap驱动，改了里面的分页标签样式【为了ajax无刷新，去除了a中的href，增加页码属性[data-page],给上下页增加页码属性[data-page]】,放在扩展类库中。
其中使用了window.on
<div id="auth-group"></div>
<div id="auth-list"></div>
<script>
//选项卡切换
$(function () {
$('#tab_demo').Huitab({
tavBar: '.tabBar span',
tabCon: '.tabCon',
className: 'current',
tabEvent: 'click',
index: 0
});
//搜索词提示，直接使用file缓存的数据
var authGroup = [];
$.post("get_auth_group_title.html",{},function (data) {
for(var i = 0; i<data.length; i++)
{
authGroup.push(data[i].title);
}
});
$("#search-auth-group").autocomplete({
source: authGroup
});
//当用户第一次进入页面时，判断是否有hash值
if(location.hash.indexOf("auth-list-page")>0)
{
getAuthGroupPage(1);
var authListPage = location.hash.replace("#auth-list-page=", "");
authListPage = parseInt(authListPage);
if( isNaN(authListPage)) authListPage = 1;
getAuthListPage(authListPage);
}else if(location.hash.indexOf("auth-group-page")>0){
getAuthListPage(1);
var authGroupPage = location.hash.replace("#auth-group-page=", "");
authGroupPage = parseInt(authGroupPage);
if( isNaN(authGroupPage)) authGroupPage = 1;
getAuthGroupPage(authGroupPage);
}else{
getAuthListPage(1);
getAuthGroupPage(1);
}
$("#auth-group").on("click", '.auth-group-page ul li a' ,function () {
authGroupPage = $(this).attr("data-page");
getAuthGroupPage(authGroupPage);
});
$("#auth-list").on("click", '.auth-list-page ul li a' ,function () {
authListPage = $(this).attr("data-page");
getAuthListPage(authListPage);
});
window.onload = function () {
getAuthGroupPageHash();
getAuthListPageHash();
getTabBarHash();
};
window.onhashchange = function(){
getAuthGroupPageHash();
getAuthListPageHash();
getTabBarHash();
};
});
//ajax前后退时，选项卡的切换
var getTabBarHash = function () {
if(location.hash.indexOf("auth-list-page")>0)
{
$(".tabBar span:nth-child(2)").click();
}else{
$(".tabBar span:first-child").click();
}
}
//权限组：ajax请求新的分页内容，同时定义新的hash,以及当前页码的cookie[cookie用于避免重复加载同一个分页请求]
var getAuthGroupPage = function (page) {
$.get("auth_group.html",{page:page,title:""},function (data) {
$("#auth-group").html(data);
if(page != 1) location.hash = "#auth-group-page=" + page;
$.cookie('auth-group-page', page, { expires: 1 });
});
}
//权限表：ajax请求新的分页内容，同时定义新的hash,以及当前页码的cookie[cookie用于避免重复加载同一个分页请求]
var getAuthListPage = function (page) {
$.get("auth_list.html",{page:page,title:""},function (data) {
$("#auth-list").html(data);
if(page != 1) location.hash = "#auth-list-page=" + page;
$.cookie('auth-list-page', page, { expires: 1 });
});
}
//权限组的hash变化时触发事件
var getAuthGroupPageHash = function () {
var authGroupPage = location.hash.replace("#auth-group-page=", "");
authGroupPage = parseInt(authGroupPage);
if( isNaN(authGroupPage)) authGroupPage = 1;
//避免重复加载，使用cookie记录当前的page是否改变
if(authGroupPage == $.cookie('auth-group-page')) return;
if(location.hash.indexOf("auth-group-page")>0)
{
if (authGroupPage) getAuthGroupPage(authGroupPage);
}
}
//权限表的hash变化时触发事件
var getAuthListPageHash = function () {
var authListPage = location.hash.replace("#auth-list-page=", "");
authListPage = parseInt(authListPage);
if( isNaN(authListPage)) authListPage = 1;
//避免重复加载，使用cookie记录当前的page是否改变
if(authListPage == $.cookie('auth-list-page')) return;
if(location.hash.indexOf("auth-list-page")>0)
{
if(authListPage) getAuthListPage(authListPage);
}
}
</script><?php
/**
* Created by ahai
* Time: 2018/11/6 0006 上午 10:53
* Email: <764882431@qq.com
* 修改think\paginator\driver\Bootstrap驱动;
* 无刷新分页
*/
namespace page;
use think\Paginator;
class Page extends Paginator
{
/**
* 上一页按钮
* @param string $text
* @return string
*/
protected function getPreviousButton($text = "«")
{
if ($this->currentPage() <= 1) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url(
$this->currentPage() - 1
);
return $this->getPageLinkWrapper($url, $text, $this->currentPage() - 1);
}
/**
* 下一页按钮
* @param string $text
* @return string
*/
protected function getNextButton($text = '»')
{
if (!$this->hasMore) {
return $this->getDisabledTextWrapper($text);
}
$url = $this->url($this->currentPage() + 1);
//return $this->getPageLinkWrapper($url, $text);
//下一页，增加一个页码参数，便于前端ajax
return $this->getPageLinkWrapper($url, $text, $this->currentPage() + 1);
}
/**
* 页码按钮
* @return string
*/
protected function getLinks()
{
if ($this->simple) {
return '';
}
$block = [
'first' => null,
'slider' => null,
'last' => null,
];
$side = 3;
$window = $side * 2;
if ($this->lastPage < $window + 6) {
$block['first'] = $this->getUrlRange(1, $this->lastPage);
} elseif ($this->currentPage <= $window) {
$block['first'] = $this->getUrlRange(1, $window + 2);
$block['last'] = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
} elseif ($this->currentPage > ($this->lastPage - $window)) {
$block['first'] = $this->getUrlRange(1, 2);
$block['last'] = $this->getUrlRange($this->lastPage - ($window + 2), $this->lastPage);
} else {
$block['first'] = $this->getUrlRange(1, 2);
$block['slider'] = $this->getUrlRange($this->currentPage - $side, $this->currentPage + $side);
$block['last'] = $this->getUrlRange($this->lastPage - 1, $this->lastPage);
}
$html = '';
if (is_array($block['first'])) {
$html .= $this->getUrlLinks($block['first']);
}
if (is_array($block['slider'])) {
$html .= $this->getDots();
$html .= $this->getUrlLinks($block['slider']);
}
if (is_array($block['last'])) {
$html .= $this->getDots();
$html .= $this->getUrlLinks($block['last']);
}
return $html;
}
/**
* 渲染分页html
* @return mixed
*/
public function render()
{
if ($this->hasPages()) {
if ($this->simple) {
return sprintf(
'<ul class="pager">%s %s</ul>',
$this->getPreviousButton(),
$this->getNextButton()
);
} else {
return sprintf(
'<ul class="pagination">%s %s %s</ul>',
$this->getPreviousButton(),
$this->getLinks(),
$this->getNextButton()
);
}
}
}
/**
* 生成一个可点击的按钮
*
* @param string $url
* @param int $page
* @param int $prevNextPage 上下页码
* @return string
*/
protected function getAvailablePageWrapper($url, $page, $prevNextPage = 0)
{
//return '<li><a href="' . htmlentities($url) . '">' . $page . '</a></li>';
if($prevNextPage == 0)
{
return '<li><a data-page="' . $page . '">' . $page . '</a></li>';
}else{
return '<li><a data-page="' . $prevNextPage . '">' . $page . '</a></li>';
}
}
/**
* 生成一个禁用的按钮
*
* @param string $text
* @return string
*/
protected function getDisabledTextWrapper($text)
{
return '<li class="disabled"><span>' . $text . '</span></li>';
}
/**
* 生成一个激活的按钮
*
* @param string $text
* @return string
*/
protected function getActivePageWrapper($text)
{
return '<li class="active"><span>' . $text . '</span></li>';
}
/**
* 生成省略号按钮
*
* @return string
*/
protected function getDots()
{
return $this->getDisabledTextWrapper('...');
}
/**
* 批量生成页码按钮.
*
* @param array $urls
* @return string
*/
protected function getUrlLinks(array $urls)
{
$html = '';
foreach ($urls as $page => $url) {
$html .= $this->getPageLinkWrapper($url, $page);
}
return $html;
}
/**
* 生成普通页码按钮
*
* @param string $url
* @param int $page
* @return string
*/
protected function getPageLinkWrapper($url, $page, $prevNextPage = 0)
{
if ($this->currentPage() == $page) {
return $this->getActivePageWrapper($page);
}
return $this->getAvailablePageWrapper($url, $page, $prevNextPage);
}
/**
* 获取当前分页的内容
*/
public function getPageList()
{
$pageList = [];
for($i=0;$i<$this->listRows;$i++){
$start = $_GET['page']*$this->listRows - $this->listRows;
if(!$this->offsetExists($start+$i))
break;
$pageList[$i] = $this->offsetGet($start+$i);
}
return $pageList;
}
} /**权限组分页*/
public function authGroup()
{
$auth = new Auth;
$this -> assign('authGroup',$auth -> getAuthGroup(1));
//return $this -> fetch("manager/authGroup");
return view("manager/authGroup");
}
/**权限表分页*/
public function authList()
{
$auth = new Auth;
$this -> assign('authList',$auth -> getAuthList());
//return $this -> fetch("manager/authList");
return view("manager/authList");
}说明一下：使用的是缓存的数据（array），进行单一条件模糊查询，还可以，多条件，太复杂了，不好使用缓存的array进行查询，故有得到一个想法：只有单一条件可以使用缓存数据进行分页，多条件太麻烦，还是直接连接数据库进行分页/**输出分页结果
* return array
*/
public function getAuthGroup($listRows = 10, $options = [])
{
return $this->getAuthPage($this->getAuthGroupCache(), $listRows, $options);
}
/**输出分页结果
* return array
*/
public function getAuthList($listRows = 10, $options = [])
{
return $this->getAuthPage($this->getAuthListCache(), $listRows, $options);
}结果：ajax局部刷新数据，对不同选项卡点击【任意切换】，同时任意点击页码。---->结果来看，目前还是比较完美的，可以进行前后退，当前页面的数据会进行更新，并根据hash值在不同选项卡中切换到当前hash值下的内容页面。记录到此结束。
最佳答案
