一个仿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 的各种分 ...

随机推荐

MySQL char与varchar 的区别
一.差异 1.占用存储空间上 char 初始化时占固定空间,varchar依据插入内容大小使用空间. 2.char最大字符长度255个(约0.1KB),varchar则是65535(约192KB). ...
MySQL 8 服务器组件
MySQL 服务器包含了一个基于组件的架构,用于扩展服务器功能.服务器和其他组件可以使用组件提供的服务.(在使用服务方面,服务器也是一个组件,等同于其他组件).组件之间交互仅通过他们各自提供的服务. ...
springboot web - 建立路由
一. 测试代码 @RestController @RequestMapping("/book") public class BookController { @PostMappin ...
E11000 duplicate key error index: test.collection.$a.b_1 dup key: { : null } 报错记录
这个一般分为两种情况,第一新增数据出现约束.而你在orm里面写了唯一约束.这种情况就比较简单,添加数据时保证数据字段唯一性就好了. 第二种情况比较难找,因为你发现你在orm里面并没有写约束,但是还是插 ...
安装Elasticsearch到Linux（源码）
运行环境系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:Elasticsearch-7.1.0 硬件要求:最低2核4GB 安装过程 1.源码安装JDK ...
LeetCode 112. 路径总和（递归遍历二叉树）
题目链接:https://leetcode-cn.com/problems/path-sum/ 给定一个二叉树和一个目标和,判断该树中是否存在根节点到叶子节点的路径,这条路径上所有节点值相加等于目标和 ...
Winform中怎样设置ContextMenuStrip右键菜单的选项ToolStripMenuItem添加照片
场景怎样在Winform程序中添加鼠标右键时使子选项显示图片. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程 ...
python中的strip()方法
python中字符串str的strip()方法 str.strip()就是把字符串(str)的头和尾的空格,以及位于头尾的\n \t之类给删掉. 例1: str=" python " ...
LaTeX技巧012：LaTeX 插图加载宏包
LaTeX 插图加载宏包.支持 LaTeX - DVIPDFMx; pdfLaTeX; XeLaTeX 三种编译方式,支持 eps/pdf/jpg/png 等图片格式. % Put this snip ...
c#后端小程序上传图片
c#后端: /// <summary> /// 上传图片 /// </summary> /// <returns></returns> [HttpPos ...

一个仿tp5分页组件的实现

一个仿tp5分页组件的实现的更多相关文章

随机推荐

热门专题