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

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;
    }

}

预览效果:

时间: 2024-10-31 12:30:33

分页控件代码逻辑(JS版本&PHP版本)的相关文章

【asp.net爬虫】asp.NET分页控件抓取第n页数据 javascript:__doPostBack

最近在模拟HTTP请求抓取数据,但是服务器是asp.net开发的 分页控件代码 <tr> <td align="left">共&nbsp210&nbsp条记录&nbsp--&nbsp第&nbsp2&nbsp页&nbsp--&nbsp共&nbsp3&nbsp页</td><td align="right"><a id="Orac

企业级控件库之大数据量分页控件(转)

在上篇:我介绍了原创企业级控件库之组合查询控件,这篇我将给大家介绍:企业级控件库之大数据量分页控件.  摘要  说到分页,大家采用的方法各有千秋,分页在一个中大型软件项目中对数据的快速呈现起到很关键的作用,试想一个数据量上几十万或者几百万的数据表,要是没有分页功能会是一个什么样的效果.总的说来,大家采用的分页方法大同小异,但到底那种方法才是最佳的呢,各有各的看法,让数据说话最有效.今天我给大家分享一个WinForm下大数据量分页控件(当然分页思想也可用于WebForm).虽然不能说是最佳的,但在

仿淘宝分页按钮效果简单美观易使用的JS分页控件

分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager  JS代码: Js代码   var kkpager = { //divID pagerid : 'div_pager', //当前页码 pno : 1, //总页码 total : 1, //总数据条数 totalRecords : 0, //是否显示总页数

纯手写分页控件CSS+JS+SQL

Asp.net中虽然用DataPager配合ListView可以实现分页显示,但是有时候由于开发环境等问题不能用到DataPager控件,那么自己手工写一个分页控件就很有必要了,当然,最重要的是通用性. 首先,来看一下我的分页控件的显示效果: 简单说明:红底色的为当前页,白底红字的是选择新的页,共有1236页,默认从第1页开始显示,分页行长度含“……”共11格,有全显示,单边省略和两边省略三种模式. 当你仔细看完上图的显示效果并理解其分页的相应变化后,我们就要开始制作这个分页了:) 第一步)获取

使用amaze ui的分页样式封装一个通用的JS分页控件

作为一名码农,天天百度.偶尔谷歌,所有代码全靠copy,用第三方插件,偶尔也想着造造轮子,毕竟自己的骨肉总归比较亲. 今天有点空闲时间,想起我们公司之前套的页面的分页插件上还有bug,而写那个分页插件的小伙子已经离职,就决定自己来写一个. 首先,肯定是用我们的妹子UI做样式效果,毕竟开发妹子少,做的东西能和妹子沾点边,就沾一点,毕竟妹子比较好看. 然后 开始吧 第一步 找到妹子UI的分页HTML代码,一共有2种,我喜欢第一种,比较有颜 这是妹子UI的分页代码 <ul data-am-widget

日积月累系列之分页控件(js源码)

最近开发了一款分页控件,分享给大家. 主要功能和界面介绍 cform分页控件支持服务端分页.客户端分页.数据过滤.数据排序等功能. 源码介绍 cform-pager分页控件主要由三部分组成:css.scripts以及index.html,css主要是用于控制分页和列表的样式:scripts主要是负责分页数据抓取.分页控件.本地缓存.数据过滤.数据排序等功能:index.html则涉及了分页数据模板.分页容器以及相应的过滤.排序按钮. scripts介绍 scripts目录下面包含了cform-m

带节假日JS万年历控件代码

今天给百大家分享一款带节假日JS万年历控件代码,可自由选择年份和月份,能显示法定节假日和传统节气提示,能显示农历,能显示年份所对应的生肖.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <form name="CLD" class="content"> <table width="100%" border

分页控件之jPaginate

1.网上搜索相关的分页控件,下载它的demo文件 2.打开demo文件,里面会有一个html静态页,打开研究 3.查看源代码,找出控件所依赖的js和css 开始实操: 1.新建一个html或者aspx页面,把控件依赖的js和css拉入项目并在页面中引用 2.创建一个div,对其进行控件的初始化,直接复制demo下的源代码即可 3.现在浏览就应该会出现效果了. ---经过以上,仅仅是把控件展示在项目中,但是还没有和我们的业务进行相关的绑定!!! ----重点来了. 当浏览器/Ajax发出请求分页数

基于Bootstrap仿淘宝分页控件实现

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text