Integrate Booststrap paging style and ThinkPHP paging class

Source: Internet
Author: User
Provides various official and user-released code examples. For code reference, you are welcome to exchange and learn. I believe that many front-end experts can write beautiful paging styles, but haran feels that it is okay to "get it" once.
First look at the effect.



Paging class modification content: only part of the code generated by appearance is involved. li is added before each A link, and UL is added before the returned style string to fit the definition of the Boostrap css file.
The css file of Bootstrap is basically unchanged, but a # lastspan style definition is added.
--------------------------------------------------------------------------------
Pagination.css .pagination {
margin: 20px 0;
}
.pagination ul {
display: inline-block;
list-style:none;
*display: inline;
/* IE7 inline-block hack */

*zoom: 1;
margin-left: 0;
margin-bottom: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pagination ul > li {
display: inline;
}
.pagination ul > li > a,
.pagination ul > li > span,
.pagination #lastspan {
float: left;
padding: 4px 12px;
line-height: 20px;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #dddddd;
border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > li > a:focus,
.pagination ul > .active > a,
.pagination ul > .active > span {
background-color: #f5f5f5;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
color: #999999;
cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus {
color: #999999;
background-color: transparent;
cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
border-left-width: 1px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span,
.pagination #lastspan {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
.pagination-large ul > li > a,
.pagination-large ul > li > span,
.pagination-large #lastspan{
padding: 11px 19px;
font-size: 17.5px;
}
.pagination-large ul > li:first-child > a,
.pagination-large ul > li:first-child > span {
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.pagination-large ul > li:last-child > a,
.pagination-large ul > li:last-child > span,
.pagination-large #lastspan {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}
.pagination-mini ul > li:first-child > a,
.pagination-small ul > li:first-child > a,
.pagination-mini ul > li:first-child > span,
.pagination-small ul > li:first-child > span {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-left-radius: 3px;
}
.pagination-mini ul > li:last-child > a,
.pagination-small ul > li:last-child > a,
.pagination-mini ul > li:last-child > span,
.pagination-small ul > li:last-child > span {
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topright: 3px;
border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomright: 3px;
border-bottom-right-radius: 3px;
}
.pagination-small ul > li > a,
.pagination-small ul > li > span {
padding: 2px 10px;
font-size: 11.9px;
}
.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
padding: 0 6px;
font-size: 10.5px;
}
-------------------------------------------------------------------------------
Page. class. php // + ----------------------------------------------------------------------
// | ThinkPHP [we can do it just think it]
// + ----------------------------------------------------------------------
// | Copyright (c) 2009 http://thinkphp1.cn All rights reserved.
// + ----------------------------------------------------------------------
// | Licensed (http://www.apache.org/licenses/LICENSE-2.0)
// + ----------------------------------------------------------------------
// | Author: liu21st
// | Lanfengye
// + ----------------------------------------------------------------------

Class Page {

// Number of pages displayed on each page in the pagination bar
Public $ rollPage = 5;
// Parameters to be included during page redirect
Public $ parameter;
// Pagination URL
Public $ url = '';
// The number of lines per page in the default list
Public $ listRows = 20;
// Start row
Public $ firstRow;
// Total number of pages
Protected $ totalPages;
// Total number of rows
Protected $ totalRows;
// Current page number
Protected $ nowPage;
// The total number of pages in the paging Column
Protected $ coolPages;
// Custom display by PAGE
Protected $ config = array ('header' => 'record ', 'prev' => 'previous page', 'Next' => 'Next page ', 'first' => 'first page', 'last' => 'last page', 'Theme '=>'
  • % TotalRow % header % nowPage %/% totalPage % PAGE
  • % UpPage % downPage % first % prePage % linkPage % nextPage % end %
');
// Default paging variable name
Protected $ varPage;

/**
* Architecture functions
* @ Access public
* @ Param array $ total number of totalRows records
* @ Param array $ number of records displayed on each page of listRows
* @ Param array $ parameters for paging jump
*/
Public function _ construct ($ totalRows, $ listRows = '', $ parameter ='', $ url = ''){
$ This-> totalRows = $ totalRows;
$ This-> parameter = $ parameter;
$ This-> varPage = C ('var _ page ')? C ('var _ page'): 'P ';
If (! Empty ($ listRows )){
$ This-> listRows = intval ($ listRows );
}
$ This-> totalPages = ceil ($ this-> totalRows/$ this-> listRows); // total number of pages
$ This-> coolPages = ceil ($ this-> totalPages/$ this-> rollPage );
$ This-> nowPage =! Empty ($ _ GET [$ this-> varPage])? Intval ($ _ GET [$ this-> varPage]): 1;
If ($ this-> nowPage <1 ){
$ This-> nowPage = 1;
} Elseif (! Empty ($ this-> totalPages) & $ this-> nowPage> $ this-> totalPages ){
$ This-> nowPage = $ this-> totalPages;
}
$ This-> firstRow = $ this-> listRows * ($ this-> nowPage-1 );
If (! Empty ($ url) $ this-> url = $ url;
}

Public function setConfig ($ name, $ value ){
If (isset ($ this-> config [$ name]) {
$ This-> config [$ name] = $ value;
}
}

/**
* Display output by PAGE
* @ Access public
*/
Public function show (){

If (0 = $ this-> totalRows) return '';
$ P = $ this-> varPage;
$ NowCoolPage = ceil ($ this-> nowPage/$ this-> rollPage );

// Analyze paging Parameters
If ($ this-> url ){
$ Depr = C ('url _ PATHINFO_DEPR ');
$ Url = rtrim (U ('/'. $ this-> url, ', false), $ depr). $ depr.' _ PAGE __';
} Else {
If ($ this-> parameter & is_string ($ this-> parameter )){
Parse_str ($ this-> parameter, $ parameter );
} Elseif (is_array ($ this-> parameter )){
$ Parameter = $ this-> parameter;
} Elseif (empty ($ this-> parameter )){
Unset ($ _ GET [C ('var _ URL_PARAMS ')]);
$ Var =! Empty ($ _ POST )? $ _ POST: $ _ GET;
If (empty ($ var )){
$ Parameter = array ();
} Else {
$ Parameter = $ var;
}
}
$ Parameter [$ p] = '_ PAGE __';
$ Url = U ('', $ parameter );
}
// Flip string
$ UpRow = $ this-> nowPage-1;
$ DownRow = $ this-> nowPage + 1;
If ($ upRow> 0 ){
$ UpPage ="
  • ". $ This-> config ['prev']."
  • ";
    } Else {
    $ UpPage = '';
    }

    If ($ downRow <= $ this-> totalPages ){
    $ DownPage ="
  • ". $ This-> config ['Next']."
  • ";
    } Else {
    $ DownPage = '';
    }
    // <>
    If ($ nowCoolPage = 1 ){
    $ TheFirst = '';
    $ PrePage = '';
    } Else {
    $ PreRow = $ this-> nowPage-$ this-> rollPage;
    $ PrePage ="
  • On the ". $ this-> rollPage." Page
  • ";
    $ TheFirst ="
  • ". $ This-> config ['first']."
  • ";
    }
    If ($ nowCoolPage ==$ this-> coolPages ){
    $ NextPage = '';
    $ TheEnd = '';
    } Else {
    $ NextRow = $ this-> nowPage + $ this-> rollPage;
    $ TheEndRow = $ this-> totalPages;
    $ NextPage ="
  • Page ". $ this-> rollPage ."
  • ";
    $ TheEnd ="". $ This-> config ['last']."";
    }
    // 1 2 3 4 5
    $ LinkPage = "";
    For ($ I = 1; $ I <= $ this-> rollPage; $ I ++ ){
    $ Page = ($ nowCoolPage-1) * $ this-> rollPage + $ I;
    If ($ page! = $ This-> nowPage ){
    If ($ page <= $ this-> totalPages ){
    $ LinkPage. ="
  • ". $ Page ."
  • ";
    } Else {
    Break;
    }
    } Else {
    If ($ this-> totalPages! = 1 ){
    $ LinkPage. ="
  • ". $ Page ."
  • ";
    }
    }
    }
    $ PageStr = str_replace (
    Array ('% header %', '% nowPage %', '% totalRow %', '% totalPage %', '% upPage %', '% downPage % ', '% first %', '% prePage %', '% linkPage %', '% nextPage %', '% end % '),
    Array ($ this-> config ['head'], $ this-> nowPage, $ this-> totalRows, $ this-> totalPages, $ upPage, $ downPage, $ theFirst, $ prePage, $ linkPage, $ nextPage, $ theEnd), $ this-> config ['Theme ']);
    Return $ pageStr;
    }

    }
    ------------------------------------------------------------------------------
    Used in the template:

    {$ Page}

    // Basic style

    {$ Page}

    // Large digital Style

    AD: truly free, domain name + VM + enterprise mailbox = 0 RMB

    Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.