|
先说说网页为什么要分页:
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();
}
}
|
|