您的位置:首页 > Web前端 > JavaScript

分页控件代码逻辑(JS版本&PHP版本)

2014-12-19 16:52 423 查看
JS版本:

//total_page:总页数
//boundary:页数临界值
//front_range:前段显示页码数
//mid_range:中段显示页码数
//rear_range后段显示页码数
//page_size:每页记录数
var pagination_config = {total_page : 10,current_page:1, boundary : 7, front_range : 1, mid_range : 5,rear_range : 1,page_size:10};

/**
* 分頁格式處理,ex. prev 1 ... 8 9 10 11 12 ... 20 next
* @return array 要顯示的頁碼
*/
function pagintion_array()
{
var total_page = pagination_config.total_page,
boundary = pagination_config.boundary,
front_range =  pagination_config.front_range,
mid_range = pagination_config.mid_range,
rear_range = pagination_config.rear_range,
current_page = pagination_config.current_page;
var pagintion = [];

current_page = (current_page > total_page) ? total_page : current_page;

// 總頁數小於頁數臨界值,則顯示所有頁碼
if (total_page <= boundary) {
for (i = 1; i <= total_page; i++) {
pagintion.push(i);
}
} else {
var front_end     = front_range; // 前段最後一個頁碼
var mid_start     = current_page - Math.ceil(parseFloat(mid_range - 1) / 2); // 中段第一個頁碼
var mid_end     = current_page + ((mid_range - 1) - Math.ceil((mid_range - 1) / 2)); // 中段最後一個頁碼
var rear_start     = total_page - rear_range + 1; // 後段第一個頁碼
// 中段第一個頁碼小於等於1,中斷頁碼往左位移
while (mid_start <= 1) {
if (mid_start < 1)
mid_end += 1;
mid_start += 1;
}

// 中段第一個頁碼大於等於總頁數,中斷頁碼往右位移
while (mid_end >= total_page) {
if (mid_end > total_page)
mid_start -= 1;
mid_end -= 1;
}

// 取出需要顯示的頁碼數
for (var i = 1; i <= total_page; i++) {
if (i <= front_end || (i >= mid_start && i <= mid_end) || i >= rear_start) {
if (i - pagintion[pagintion.length-1] > 1) {
pagintion.push('...');
}

pagintion.push(i);
}
}
}

return pagintion;
}

/**
* 拼装分页的 html  ;
* 样式 for jquery.simplepagination
* @return string
*/
function create_html()
{
var current_page = pagination_config.current_page,
total_page = pagination_config.total_page;
if(total_page<=1){
return;
}
var html = '<ul>';
//计算总页数;
//计算分页
var pagintion = pagintion_array();

//上一页
//上一页 不可点击
if (current_page <= 1) {
html+='<li class="pg-prev pg-off"><a href=""><i></i>上一页</a></li>';
} else {
//上一页可点击
var page_prev = current_page - 1;
html+='<li class="pg-prev" data-page-index='+page_prev+'><a href="javascript:void(0)"><i></i>上一页</a></li>';
}

//每一页的 链接
for(var i=0;i<pagintion.length;i++){
var page_id =  pagintion[i];
if (page_id == current_page) {
html+='<li class="pg-on pg-index"  data-page-index='+page_id+'><a href="javascript:void(0)" class="on">'+page_id+'</a></li>';
} else if (page_id == '...') {
html+='<li>...</li>';
} else {
html+='<li pg-index data-page-index='+page_id+'><a href="javascript:void(0)">'+page_id+'</a></li>';
}
}

//下一页
//下一页 不可点击
if (current_page >= total_page) {
html+='<li class="pg-next pg-off"><a href="javascript:void(0)">下一页</a></li>';
} else {
//下一页 可点击
var page_next = current_page + 1;
html+='<li class="pg-next" data-page-index='+page_next+'><a href="javascript:void(0)">下一页</a></li>';
}
html+='<li class="pg-num-top">到第</li>';
html+='<li class="pg-num"><input type="text" class="jump_index" ></li>';
html+='<li class="pg-num-bot">页</li>';
html+='<li class="pg-btn"><button class="btn_jump">确定</button></li>';
html+='</ul>';
$('.pagintion').children().remove();
$('.pagintion').append(html);
$(".pagintion").find('[data-page-index]').on("click",function(){
if($(this).data('page-index')!=pagination_config.current_page){
pagination_config.current_page = $(this).data('page-index');
//绑定列表
get_comment_list();
}
})
}

}


PHP版本:

<?php

/**
* 分页类
* @auth
* @date 2014-10-24
*/
class Pagination_lib
{

/**
* 参数设定
* @param int $current_page 當前頁數
* @param int $total_page 總頁數
* @param int $boundary 頁數臨界值
* @param int $front_range 前段顯示頁碼數
* @param int $mid_range 中段顯示頁碼數
* @param int $rear_range 後段顯示頁碼數
*/
public $current_page = 1;
public $total_page     = 10;
public $boundary     = 7;
public $front_range     = 1;
public $mid_range     = 5;
public $rear_range     = 1;
//每个页的链接 如: domain/list#page=
public $page_url = '#page=';

/**
* 初始化设置 分页类
* @param type $config
*/
function init($config = array())
{
if (count($config) > 0) {
foreach ($config as $key => $val) {
if (isset($this->$key)) {
$this->$key = $val;
}
}
}
}

/**
* 分頁格式處理,ex. prev 1 ... 8 9 10 11 12 ... 20 next
*  copy from Store_lib.pagintion  , 从Store_lib中复制过来
* @param int $current_page 當前頁數
* @param int $total_page 總頁數
* @param int $boundary 頁數臨界值
* @param int $front_range 前段顯示頁碼數
* @param int $mid_range 中段顯示頁碼數
* @param int $rear_range 後段顯示頁碼數
* @return array 要顯示的頁碼
*/
public function pagintion_array($current_page = 1, $total_page = 10, $boundary = 7, $front_range = 1, $mid_range = 5,
$rear_range = 1)
{
$pagintion = array();

$current_page = ($current_page > $total_page) ? $total_page : $current_page;

// 總頁數小於頁數臨界值,則顯示所有頁碼
if ($total_page <= $boundary) {
for ($i = 1; $i <= $total_page; $i++) {
$pagintion[] = $i;
}
} else {
$front_end     = $front_range; // 前段最後一個頁碼
$mid_start     = $current_page - ceil(($mid_range - 1) / 2); // 中段第一個頁碼
$mid_end     = $current_page + (($mid_range - 1) - ceil(($mid_range - 1) / 2)); // 中段最後一個頁碼
$rear_start     = $total_page - $rear_range + 1; // 後段第一個頁碼
// 中段第一個頁碼小於等於1,中斷頁碼往左位移
while ($mid_start <= 1) {
if ($mid_start < 1)
$mid_end += 1;
$mid_start += 1;
}

// 中段第一個頁碼大於等於總頁數,中斷頁碼往右位移
while ($mid_end >= $total_page) {
if ($mid_end > $total_page)
$mid_start -= 1;
$mid_end -= 1;
}

// 取出需要顯示的頁碼數
for ($i = 1; $i <= $total_page; $i++) {
if ($i <= $front_end || ($i >= $mid_start && $i <= $mid_end) || $i >= $rear_start) {
if ($i - (int) end($pagintion) > 1) {
$pagintion[] = '...';
}

$pagintion[] = $i;
}
}
}

return $pagintion;
}

/**
* 拼装分页的 html  ;
* 样式 for jquery.simplepagination
* @return string
*/
function create_html()
{
$html = '<ul>';
//计算总页数;
//计算分页
$pagintion = $this->pagintion_array($this->current_page, $this->total_page, $this->boundary, $this->front_range, $this->mid_range, $this->rear_range);

//上一页
//上一页 不可点击
if ($this->current_page <= 1) {
$html.='<li class="active"><span class="current prev" style="color: rgb(188, 188, 188); position: relative; width: 57px; background: rgb(255, 255, 255);"><span class="bg_prev" style="background-position: -78px -210px;"></span>上一页</span></li>';
} else {
//上一页可点击
$page_prev = $this->current_page - 1;
$html.='<li><a href="' . $this->page_url . $page_prev . '" class="page-link prev" url="' . $this->page_url . $page_prev . '" page="' . $page_prev . '" style="color: rgb(102, 102, 102); position: relative; background: rgb(255, 255, 255);"><span class="bg_prev" style="background-position: -99px -210px;"></span>上一页</a></li>';
}

//每一页的 链接
foreach ($pagintion as $page_id) {
if ($page_id == $this->current_page) {
$html.='<li class="active"><span class="current">' . $page_id . '</span></li>';
} elseif ($page_id == '...') {
$html.='<li class="disabled"><span class="ellipse">…</span></li>';
} else {
$html.='<li><a href="' . $this->page_url . $page_id . '" class="page-link" page="' . $page_id . '">' . $page_id . '</a></li>';
}
}

//下一页
//下一页 不可点击
if ($this->current_page >= $this->total_page) {
$html.='<li class="active"><span class="current next" style="color: rgb(188, 188, 188); position: relative; background: rgb(255, 255, 255);"><span class="bg_next" style="background-position: -84px -210px;"></span>下一页</span></li>';
} else {
//下一页 可点击
$page_next = $this->current_page + 1;
$html.='<li><a href="' . $this->page_url . $page_next . '" class="page-link next" url="' . $this->page_url . $page_next . '" page="' . $page_next . '" style="color: rgb(102, 102, 102); position: relative; width: 57px; background: rgb(255, 255, 255);"><span class="bg_next" style="background-position: -104px -210px;"></span>下一页</a></li>';
}
$html.='</ul>';
return $html;
}

}


预览效果:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: