Heim  >  Artikel  >  Backend-Entwicklung  >  分页控件代码逻辑(JS版本&PHP版本)

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

WBOY
WBOYOriginal
2016-06-23 13:43:09977Durchsuche

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

 预览效果:

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:chunked编码问题Nächster Artikel:53个要点提高PHP编程效率