设为首页 收藏本站
查看: 594|回复: 0

[经验分享] 比较全面的php分页导航类

[复制链接]

尚未签到

发表于 2017-4-6 09:38:02 | 显示全部楼层 |阅读模式
  先说说网页为什么要分页:
  1,用户体验考虑
  使用户集中注意力浏览当前页面内容,而不是给出十几屏数据,时浏览者无所适从,产生压迫感、厌倦感、焦虑感;分页使页面短小(完全可以把内容限制在一屏大小的面积内),容易布局,也增强了浏览者视觉感受。也是因为页面短小,所以加载快速。
  2,技术原因
  最早促使页面分页的原因,主要是技术原因。因为服务器和网速都非常慢,所以需要一种办法,使服务器的负载与网络的负担都能达到一种间歇的分布的平衡,还考虑到杜绝浏览者无意识地下载冗余信息。分页使大批量的数据(主要是表里的记录),按固定的单位(页)下载到浏览者的机器,浏览者在浏览页面的间隙,服务器和网络资源得以间断的释放,可以为别的 浏览者服务。这种方式可以基本满足大多数浏览者的需求,有效地缓解了互联网资源的压力。当然,直到现在,这种压力似乎永远没有减小的迹象,而且相反,压力 越来越大了。谁要人是一头贪婪的动物呢?分页技术虽然很有效,成了动态网页的标配技术,但用久了,难免产生审美疲劳。
  瀑布流分页当浏览者浏览了当前页面内容后,向下拉动浏览器滚动条,本来还在服务器上的内容,会根据滚动条的拖动,动态地从服务器上按一定的单位(类似分页)下载下来。这样还带来了一个好处,就是以前已经浏览过的内容,还在浏览器当前窗口的上部(可以理解为被缓存了),要再次浏览的话,直接向上拖动滚动条或转动鼠标 滚轮即可。而采用分页技术的话,要查看先前的内容,必需再次点击鼠标(比如“上一页”等),再次请求服务器端的页面(假设没有采用缓存技术的),再次等待 页面数据的下载和呈现 。实现这种浏览效果,可以改善用户体验(最起码有新鲜感),编程技术也不难,采用 Ajax 技术是一种绝好的解决方案之一。希望更好的用户体验被大家创造出来。
  分页存储过程:http://hudeyong926.iteye.com/blog/764703

var page = 0;
$(function () {
var scrollTimer;
jsonScrollPageData(0);//默认加第一页
//下面滚动取第二页++
$(window).on('scroll', function () { //页面出现滚动条生效,即滚动事件
if (scrollTimer) {
clearTimeout(scrollTimer);
scrollTimer = null;
}
scrollTimer = setTimeout(function () {
jsonScrollPageData($(this).scrollTop());
}, 200);//0.2s
});
});
function jsonScrollPageData(position) {
var offsetHeight = 44;
var viewportHeight = $(window).height();
var bodyHeight = $('body').height();
if ((bodyHeight <= position + viewportHeight + offsetHeight) && page >= 0) {
$.ajax({
type: 'GET',
url: url + "?t=" + Math.random(),
data: {page: ++page},
async: false,
dataType: 'JSON',
success: function (jsonData) {
if (jsonData.length > 0) {
} else { //已全部显示
page = -1;
}
}
});
}
}

  GET方式分页:

<?php
//$page = $page_helper->setTotalResult(11)->show();
class Pagination
{
/**
* 页面Url
*
* @var
*/
public $url;
/**
* Url码参数名
*
* @var string
*/
public $paramName = 'page';
/**
* 记录总数
*
* @var int
*/
public $totalResult = 0;
/**
* 每页显示记录数
*
* @var int
*/
public $limit = 10;
/**
* 当前页码
*
* @var int
*/
public $page = 1;
/**
* 是否采取ajax请求显示页面
*
* @var bool
*/
public $isAjax = false;
/**
* ajax请求的js方法名,默认为pageAjax,当且仅当$isAjax为真触发。
* 根据前端js,自行赋值修改
*
* @var string
*/
public $ajaxActionName = 'pageAjax';
/**
* 首页显示文字
*
* @var string
*/
public $firstPageText = '首页';
/**
* 尾页显示文字
*
* @var string
*/
public $lastPageText = '尾页';
/**
* 下一页显示文字
*
* @var string
*/
public $prevPageText = '上一页';
/**
* 上一页显示文字
*
* @var string
*/
public $nextPageText = '下一页';
/**
* 当前页码样式
*
* @var string
*/
public $currentPageStyle = 'class="active"';
/**
* 链接模板
*
* @var string
*/
public $linkTpl = '<li><a{href}{attributes}>{text}</a></li>';
/**
* 分页显示模板
*
* @var string
*/
public $htmlTpl = '<ul>{first}{prev}{pages}{next}{last}</ul><div class="pageTotalInfo">{page}/{pageCount} Total:{totalResult}</div>';
/**
* 构造函数
*/
public function __construct() {
empty($this->url) && $this->setUrl();
}
/**
* 设置记录条数
*
* @return mixed
*/
public function setTotalResult($total_result){
$this->totalResult = $total_result;
return $this;
}
public function info() {
$this->page = max(1, $this->page);
$pageCount = max(1, ceil($this->totalResult / $this->limit));
return [
'current_page' => $this->page,
'page_count' => $pageCount,
'page_size' => $this->limit,
'result_count' => $this->totalResult
];
}
/**
* 显示分页
*
* @return mixed
*/
public function show()
{
$this->page = max(1, $this->page);
$pageCount = ceil($this->totalResult/$this->limit);
if ($pageCount <= 0 || $this->page > $pageCount) return '';
$search = array(
'{first}',
'{prev}',
'{pages}',
'{next}',
'{last}',
'{page}',
'{totalResult}',
'{pageCount}'
);
$replace = array(
$this->getFirstPageLink($pageCount),
$this->getPrevPageLink($pageCount),
$this->getPages($pageCount),
$this->getNextPageLink($pageCount),
$this->getLastPageLink($pageCount),
$this->page,
$this->totalResult,
$pageCount
);
$html = str_replace($search, $replace, $this->htmlTpl);
return $html;
}
/**
* 获取页面列表,以页面数字为单位显示
*
* @param $pageCount
* @return string
*/
public function getPages($pageCount)
{
$pages = '';
for ($i = 1; $i <= $pageCount; $i++)
{
$style = $i == $this->page ? $this->currentPageStyle : '';
$url = $this->getUrl($i);
$pages .= $this->getLink($i, $url, $style);
}
return $pages;
}
/**
* 获取首页html
*
* @param $pageCount    页面总数
* @return mixed
*/
public function getFirstPageLink($pageCount)
{
$firstPageUrl = $pageCount ? $this->getUrl(1) : '';
return $this->getLink($this->firstPageText, $firstPageUrl);
}
/**
* 获取尾页html
*
* @param $pageCount    页面总数
* @return mixed
*/
public function getLastPageLink($pageCount)
{
$lastPageUrl = $pageCount ? $this->getUrl($pageCount) : '';
return $this->getLink($this->lastPageText, $lastPageUrl);
}
/**
* 获取上一页html
*
* @param $pageCount    页面总数
* @return mixed
*/
public function getPrevPageLink($pageCount)
{
$prevPageNumber = $this->page - 1;
$prevPageUrl = $prevPageNumber > 0 && $pageCount ? $this->getUrl($prevPageNumber) : '';
return $this->getLink($this->prevPageText, $prevPageUrl);
}
/**
* 获取下一页html
*
* @param $pageCount    页面总数
* @return mixed
*/
public function getNextPageLink($pageCount)
{
$nextPageNumber = $this->page + 1;
$nextPageUrl = $nextPageNumber <= $pageCount && $pageCount ? $this->getUrl($nextPageNumber) : '';
return $this->getLink($this->nextPageText, $nextPageUrl);
}
/**
* 组装链接html
*
* @param $text 显示文字
* @param string $url   链接Url
* @param string $style 标签样式
* @return mixed
*/
public function getLink($text, $url = '', $style = '')
{
if ($url)
{
if($this->isAjax)
{
$_attrOnClick = $this->ajaxActionName ?  ' ' : '';
$href = ' href="#" ';
$attributes = ' '.$style.$_attrOnClick.' ';
}
else
{
$href = ' href="'.$url.'" ';
$attributes = ' '.$style.' ';
}
}
else
{
$href = '';
$attributes = $style;
}
$search = array(
'{text}',
'{href}',
'{attributes}',
);
$replace = array(
$text,
$href,
$attributes
);
$link = str_replace($search, $replace, $this->linkTpl);
return $link;
}
/**
* 获取指定分页页面Url
*
* @param $pageNumber 分页id
* @return string
*/
public function getUrl($pageNumber)
{
$urlObject = new UrlHelper($this->url);
$urlObject->addParam($this->paramName, $pageNumber, true);
return $urlObject->getUrl();
}
/**
* 设置url,默认为当前访问Url
*
* @param string $url
* @return void
*/
public function setUrl($url = '')
{
$this->url = $url ? $url : UrlHelper::getCurrentUrl();
}
}
  


 





 

 

 

 

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-360866-1-1.html 上篇帖子: php格式化打印数组,调试有用 下篇帖子: php gethostbyaddr函数-网络函数库
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表