一个仿tp5分页组件的实现
样式:
a{
text-decoration: none;
color: inherit;
}
.out-cp{
width:100%;
text-align: center;
}
.c-page{
display:inline-block;
height:42px;
margin:50px 0 ;
}
.c-page > div{
float: left;
height:42px;
}
.c-page > div:not(:first-child){
margin-left: 10px;
}
.c-page > div > a{
height:40px;
display: block;
border-top: solid 1px #e5e5e5;
border-right:solid 1px #e5e5e5;
border-bottom:solid 1px #e5e5e5;
float: left;
font-size: 14px;
letter-spacing: 1px;
color: #333333;
text-align: center;
line-height: 40px;
}
.c-page > div > a:hover,.c-page > div > a.on{
color: #ffffff;
background-color: #699dff;
border-color:#699dff; ;
}
.c-page > div > a:nth-child(1){
border-left: solid 1px #e5e5e5;
}
.c-page > .c-page-lefts > a:nth-child(1),.c-page > .c-page-rights > a:nth-child(2){
width: 50px;
} .c-page > .c-page-lefts > a:nth-child(2),.c-page > .c-page-rights > a:nth-child(1){
width: 80px;
}
.c-page > .c-page-middles > a{
width: 40px;
} .c-page > div > a:nth-child(1){
border-radius: 4px 0px 0px 4px;
}
.c-page > div > a:last-child{
border-radius: 0px 4px 4px 0px;
} .c-page > .c-page-lefts > a:nth-child(2):before,.c-page > .c-page-rights > a:nth-child(1):after{
content: '';
display: inline-block;
width:7px;
height:12px;
position: relative;
top:1px;
}
.c-page > .c-page-lefts > a:nth-child(2):before{
background: url("http://www.yangqu.com/images/ccpageb.png")center center no-repeat;
margin-right: 5px;
}
.c-page > .c-page-rights > a:nth-child(1):after{
background: url("http://www.yangqu.com/images/ccpageb.png")center center no-repeat;
margin-left: 5px;
transform:rotate(180deg);
}
.c-page > .c-page-lefts > a:nth-child(2):hover:before{
background: url("http://www.yangqu.com/images/ccpagea.png")center center no-repeat;
}
.c-page > .c-page-rights > a:nth-child(1):hover:after{
background: url("http://www.yangqu.com/images/ccpagea.png")center center no-repeat;
transform:rotate(180deg);
} .c-page > .c-page-lefts > a:nth-child(2).dis:before{
background: url("http://www.yangqu.com/images/ccpagec.png")center center no-repeat;
} .c-page > .c-page-rights > a:nth-child(1).dis:after{
background: url("http://www.yangqu.com/images/ccpagec.png")center center no-repeat; transform:rotate(180deg);
} .c-page > div > a.dis{
background-color: #FBFBFB;
color: #C9C9C9;
cursor: not-allowed;
border-color: #e5e5e5;
}
逻辑:
/* * 接收sql语句,获取列表以及分页 */ function cPage($sql,$pageSize = 10){
global $db; //分页要素:pageNow 、 pageSize /* * 编辑sql语句查询count */ $csql =preg_replace("/SELECT.*FROM/i" , 'SELECT COUNT(*) FROM',$sql); $res = $db->fetch_array($db->query($csql)); $item_count = $res['COUNT(*)']; $pageCount = intval($item_count / $pageSize) + ($item_count % $pageSize > 0 ? 1 : 0); /* * 接受并且检测pageNow * 1:若 pageNow 不为正整数,则 pageNow = 1 * 2: 若 pageNow 大于 $pageCount ,则 $pageNow = $pageCount; */ $pageNow = (preg_match("/^[1-9][0-9]*$/",$_GET['pageNow'])) ? $_GET['pageNow'] : 1;
var_dump($pageNow);
$pageNow = $pageNow > $pageCount ? $pageCount : $pageNow; $offset = ($pageNow - 1) * $pageSize; $data = []; $sql .= " LIMIT $offset,$pageSize"; $result = $db->query($sql); while($r = $db->fetch_array($result)){ $data[] = $r; } //生成[get] param $paramData = $_GET; $paramStr = '?'; $flag_1 = 0; foreach ($paramData as $k => $v){ // .. if($k == 'pageNow'){ continue; } if($flag_1 > 0){ $paramStr .= '&'; } $paramStr .= "$k=$v"; $flag_1 ++; } if(!$flag_1){ $paramStr .= "pageNow="; }else{ $paramStr .= "&pageNow="; } // html $html = '<div class="out-cp"> <div class="c-page">'; $html .= ' <div class="c-page-lefts"> <a href="'.($paramStr . 1).'">首页</a>'; /* * 上一页。两种情况: * true : 当前不为第一页 且 pageCount > 1 * false : the else */ if($pageNow > 1 && $pageCount > 1 ){ $html .= ' <a href="'.$paramStr . ($pageNow - 1).'">上一页</a>'; }else{ $html .= ' <a class="dis">上一页</a>'; } $html .= "</div>"; /* * mid * 最多显示7个页码,且当前页优先位于最中间 */ $midPage = []; if($pageCount > 7){ // left.. if(($pageNow - 3 ) < 1){ $midPage = range(1,7); } // .. else if( ($pageCount - $pageNow) < 3){ $midPage = range($pageCount - 6,$pageCount); } else{ $midPage = range($pageNow - 3,$pageNow + 3); } }else{ if($pageCount > 0){ $midPage = range(1,$pageCount); }else{ $midPage = []; } } $html .= '<div class="c-page-middles">'; foreach ($midPage as $k_1 => $v_2){ // selected if($v_2 == $pageNow){ $html .= '<a class="on" href="'.$paramStr . $v_2 .'">'.$v_2.'</a>'; }else{ $html .= '<a href="'.$paramStr . $v_2 .'">'.$v_2.'</a>'; } } $html .= "</div>"; /* * 下一页;两种情况: * true : pageCount > pageNow * false : ..else.. */ $html .= '<div class="c-page-rights">'; if($pageCount > $pageNow){ $html .= '<a href="'.$paramStr . ($pageNow + 1).'">下一页</a>'; }else{ $html .= '<a class="dis">下一页</a>'; } $html .= ' <a href="'.$paramStr . $pageCount.'">尾页</a> </div> </div> </div>'; return ['data' => $data , 'pageCode' => $html]; }
/*
* 接收sql语句,获取列表以及分页
*/
function cPage($sql,$pageSize = 10){ global $db;
//分页要素:pageNow 、 pageSize
/*
* 编辑sql语句查询count
*/
$csql =preg_replace("/SELECT.*FROM/i" , 'SELECT COUNT(*) FROM',$sql);
$res = $db->fetch_array($db->query($csql));
$item_count = $res['COUNT(*)'];
$pageCount = intval($item_count / $pageSize) + ($item_count % $pageSize > 0 ? 1 : 0);
/*
* 接受并且检测pageNow
* 1:若 pageNow 不为正整数,则 pageNow = 1
* 2: 若 pageNow 大于 $pageCount ,则 $pageNow = $pageCount;
*/
$pageNow = (preg_match("/^[1-9][0-9]*$/",$_GET['pageNow'])) ? $_GET['pageNow'] : 1; var_dump($pageNow); $pageNow = $pageNow > $pageCount ? $pageCount : $pageNow;
$offset = ($pageNow - 1) * $pageSize;
$data = [];
$sql .= " LIMIT $offset,$pageSize";
$result = $db->query($sql);
while($r = $db->fetch_array($result)){
$data[] = $r;
}
//生成[get] param
$paramData = $_GET;
$paramStr = '?';
$flag_1 = 0;
foreach ($paramData as $k => $v){
// ..
if($k == 'pageNow'){
continue;
}
if($flag_1 > 0){
$paramStr .= '&';
}
$paramStr .= "$k=$v";
$flag_1 ++;
}
if(!$flag_1){
$paramStr .= "pageNow=";
}else{
$paramStr .= "&pageNow=";
}
// html
$html = '<div class="out-cp">
<div class="c-page">';
$html .= ' <div class="c-page-lefts">
<a href="'.($paramStr . 1).'">首页</a>';
/*
* 上一页。两种情况:
* true : 当前不为第一页 且 pageCount > 1
* false : the else
*/
if($pageNow > 1 && $pageCount > 1 ){
$html .= ' <a href="'.$paramStr . ($pageNow - 1).'">上一页</a>';
}else{
$html .= ' <a class="dis">上一页</a>';
}
$html .= "</div>";
/*
* mid
* 最多显示7个页码,且当前页优先位于最中间
*/
$midPage = [];
if($pageCount > 7){
// left..
if(($pageNow - 3 ) < 1){
$midPage = range(1,7);
}
// ..
else if( ($pageCount - $pageNow) < 3){
$midPage = range($pageCount - 6,$pageCount);
}
else{
$midPage = range($pageNow - 3,$pageNow + 3);
}
}else{
if($pageCount > 0){
$midPage = range(1,$pageCount);
}else{
$midPage = [];
}
}
$html .= '<div class="c-page-middles">';
foreach ($midPage as $k_1 => $v_2){
// selected
if($v_2 == $pageNow){
$html .= '<a class="on" href="'.$paramStr . $v_2 .'">'.$v_2.'</a>';
}else{
$html .= '<a href="'.$paramStr . $v_2 .'">'.$v_2.'</a>';
}
}
$html .= "</div>";
/*
* 下一页;两种情况:
* true : pageCount > pageNow
* false : ..else..
*/
$html .= '<div class="c-page-rights">';
if($pageCount > $pageNow){
$html .= '<a href="'.$paramStr . ($pageNow + 1).'">下一页</a>';
}else{
$html .= '<a class="dis">下一页</a>';
}
$html .= ' <a href="'.$paramStr . $pageCount.'">尾页</a>
</div>
</div>
</div>';
return ['data' => $data , 'pageCode' => $html];
}
一个仿tp5分页组件的实现的更多相关文章
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- asp.net mvc4+mysql做一个简单分页组件(部分视图)
在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- javascript 分页组件
自己写的一个简单的分页组件,主要功能还有实现都在JS中,html页面中只用增加一个放置生成分页的DIV,并给定容器的id. html结构如下: <ul class="paginatio ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- 转载使用Flurl制作可复用的分页组件
使用Flurl制作可复用的分页组件 使用ASP.NET MVC查询时,一直使用MvcPaging组件,虽然需要自定义MvcPaging.Pager才能达到我想要的效果,但在没有较好的URL库时,还是这 ...
- asp.net core 排序过滤分页组件:sieve(1)
使用asp.net core开发时避免不了要用一个合适的分页组件来让前端获取分页数据.github上面有一个开源的分页组件在这方面很适合我的使用,于是我把他的文档翻译一下,随后会分析它里面的源码.这是 ...
- Angular4.+ ngx-bootstrap Pagination 自定义分页组件
Angular4 随笔(二) ——自定义分页组件 1.简介 本组件主要是实现了分页组件显示功能,通过使用 ngx-bootstrap Pagination分页组件实现. 基本逻辑: 1.创建一个分页 ...
- 基于 bootstrap 的 vue 分页组件
申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...
随机推荐
- 论文-MobileNet-V1、ShuffleNet-V1、MobileNet-V2、ShuffleNet-V2、MobileNet-V3
1.结构对比 1)MobileNet-V1 2)ShuffleNet-V1 3)MobileNet-V2 4)ShuffleNet-V2
- ES6 class(基本语法+方法)
静态属性与静态方法 1. 不会被类实例所拥有的属性与方法 只是类自身拥有2. 只能通过类调用 静态方法与普通方法重名,不会冲突static 关键字(静态方法) 静态属性类名.属性名 = 属性值; 1. ...
- LIS 51Nod 1134 最长递增子序列
给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元素是递增的) 例如:5 1 6 8 2 4 5 10,最长递增子序列是1 2 4 5 10. Input 第1行:1个 ...
- StarUML 2下载、安装、破解全过程
StarUML官方下载地址: http://staruml.io/download 破解: 1.使用Editplus或者Notepad++等特殊的文本编辑器打开 安装位置下/www/lic ...
- Codeforces667D(spfa+dp)
题意: 给定一个带权有向图,若P(A,B)表示节点A到B的最短路长度,选择四个节点ABCD,使得P(A,B)+P(B,C)+P(C,D)最大. 节点数n在1,000以内,边数m在2,000以内. 思路 ...
- 9Front fqa 目录
9Front System 9Front 常见问答(fqa) 注意! 9front dash1 手册是由 9front 用户编写的. 这些用户有能做的,有不能写的:那些不能写的写了这本电子杂志.-- ...
- CPPU OJ | 开发日志
2019.12.18 ~ 2019.12.22 用腾讯云的学生服务器测试搭建OJ(踩了无数的坑) 2019.12.25 ~ 2019.12.28 在模管中心办理申请虚拟服务器的手续 2019.12.3 ...
- pytest参数化 parametrize
pytest.mark.parametrize装饰器可以实现测试用例参数化 parametrizing 1.这里是一个实现检查一定的输入和期望输出测试功能的典型例子 # content of test ...
- Centos7安装gitlab-ce
1.官方推荐方式安装 参考https://www.gitlab.com.cn/installation/#centos-7?version=ce sudo yum install -y curl po ...
- JavaScript变量的传递方式
废话不多说,直接上案例: [案例] 1.访问变量 按值: function addM(num) { num += 5; return num; } var cnt = 10; var result = ...