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; }}预览效果：
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
