首頁 後端開發 php教程 分页控件代码逻辑(JS版本&PHP版本)

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

Jun 23, 2016 pm 01:43 PM

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;    }}
登入後複製

 预览效果:

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在PHP API中說明JSON Web令牌(JWT)及其用例。 在PHP API中說明JSON Web令牌(JWT)及其用例。 Apr 05, 2025 am 12:04 AM

JWT是一種基於JSON的開放標準,用於在各方之間安全地傳輸信息,主要用於身份驗證和信息交換。 1.JWT由Header、Payload和Signature三部分組成。 2.JWT的工作原理包括生成JWT、驗證JWT和解析Payload三個步驟。 3.在PHP中使用JWT進行身份驗證時,可以生成和驗證JWT,並在高級用法中包含用戶角色和權限信息。 4.常見錯誤包括簽名驗證失敗、令牌過期和Payload過大,調試技巧包括使用調試工具和日誌記錄。 5.性能優化和最佳實踐包括使用合適的簽名算法、合理設置有效期、

描述紮實的原則及其如何應用於PHP的開發。 描述紮實的原則及其如何應用於PHP的開發。 Apr 03, 2025 am 12:04 AM

SOLID原則在PHP開發中的應用包括:1.單一職責原則(SRP):每個類只負責一個功能。 2.開閉原則(OCP):通過擴展而非修改實現變化。 3.里氏替換原則(LSP):子類可替換基類而不影響程序正確性。 4.接口隔離原則(ISP):使用細粒度接口避免依賴不使用的方法。 5.依賴倒置原則(DIP):高低層次模塊都依賴於抽象,通過依賴注入實現。

解釋PHP中晚期靜態結合的概念。 解釋PHP中晚期靜態結合的概念。 Mar 21, 2025 pm 01:33 PM

文章討論了PHP 5.3中介紹的PHP中的晚期靜態結合(LSB),允許靜態方法的運行時間分辨率調用以更靈活的繼承。 LSB的實用應用和潛在的觸摸

如何在系統重啟後自動設置unixsocket的權限? 如何在系統重啟後自動設置unixsocket的權限? Mar 31, 2025 pm 11:54 PM

如何在系統重啟後自動設置unixsocket的權限每次系統重啟後,我們都需要執行以下命令來修改unixsocket的權限:sudo...

如何用PHP的cURL庫發送包含JSON數據的POST請求? 如何用PHP的cURL庫發送包含JSON數據的POST請求? Apr 01, 2025 pm 03:12 PM

使用PHP的cURL庫發送JSON數據在PHP開發中,經常需要與外部API進行交互,其中一種常見的方式是使用cURL庫發送POST�...

框架安全功能:防止漏洞。 框架安全功能:防止漏洞。 Mar 28, 2025 pm 05:11 PM

文章討論了框架中的基本安全功能,以防止漏洞,包括輸入驗證,身份驗證和常規更新。

自定義/擴展框架:如何添加自定義功能。 自定義/擴展框架:如何添加自定義功能。 Mar 28, 2025 pm 05:12 PM

本文討論了將自定義功能添加到框架上,專注於理解體系結構,識別擴展點以及集成和調試的最佳實踐。

See all articles