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