Home Web Front-end JS Tutorial js paging tool example_javascript skills

js paging tool example_javascript skills

May 16, 2016 pm 04:17 PM
js Pagination tool

The examples in this article describe the usage of js paging tool. Share it with everyone for your reference. The specific implementation method is as follows:

js code part:

Copy code The code is as follows:
/**
* Pagination js
​*/ 
var Page; 
 
(function(){ 
        var Page = {version:"1.0",author:"liuxingmi"}; 
        var showPage = 9; 
        Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){ 
            var nav = '
    '; 
                       nav = '
  • 总记录数:' totalRecord '
  • '; 
                       nav = '
  • 总页数:' totalPage '
  • '; 
                       nav = '
  • 当前页:' currentPage '
  • '; 
                       if(currentPage == 1){ 
                           nav = '
  • 首页
  • '; 
                           nav = '
  • 前一页
  • '; 
                       } else {                     
                           nav = '
  • 首页
  • '; 
                           nav = '
  • 前一页
  • '; 
                       } 
                       nav = '
    1. '; 
                               var start = currentPage - Math.floor(showPage/2); 
                               var end = currentPage Math.floor(showPage/2);
                               if(end > totalPage){ 
                                   start -= (end - totalPage); 
                               } 
                                
                               if(start <= 0){ 
                                   start = 1;  
                               } 
                               if(currentPage < showPage && end < showPage){ 
                                  end = showPage;   
                               } 
                                
                               if(end > totalPage){ 
                                   end = totalPage; 
                               } 
                               for(var i = start; i <= end; i ){ 
                                   if(i == currentPage){ 
                                       nav = '
    2. ' i '
    3. '; 
                                   } else {                                 
                                       nav = '
    4. ' i '
    5. '; 
                                   } 
                               } 
                                
                               nav = '
  • '; 
                             if(currentPage == totalPage){ 
                                 nav = '
  • 后一页
  • '; 
                                 nav ='
  • 尾页'; 
                             } else { 
    nav = '
  • Next page Page
  • ';
    nav ='
  • Last Page';
                                                             nav = '
';
                $("#" divId).html(nav);                                                                 };                               This.Page = Page;
})();


css part:

Copy code The code is as follows:/*Page break style starts*/ .pagination{
overflow:hidden;
margin:0 0 0 25px;
padding:10px 10px 6px 150px;
border-top:1px solid #c8c8c8;
_zoom:1;
text-align: center;
}
.pagination *{
display:inline;
float:left;
margin:0;
padding:0;
font-size:12px;
}
.pagination i{
float:none;
padding-right:1px;
}
.currentPage b{
float:none;
color:#f00;
}
.pagination li{
list-style:none;
margin:0 5px;
}
.pagination li li{
position:relative;
margin:-2px 0 0;
font-family: Arial, Helvetica, sans-serif
}
.firstPage a,.previousPage a,.nextPage a,.lastPage a{
overflow:hidden;
height:0;
text-indent:-9999em;
border-top:8px solid #fff;
border-bottom:8px solid #fff;
}
.pagination li li a{
margin:0 1px;
padding:0 4px;
border:3px double #fff;
border-color:#eee;
background:#eee;
color:#06f;
text-decoration:none;
}
.pagination li li a:hover{
background:#f60;
border-color:#fff;
border-color:#f60;
color:#fff;
}
li.firstPage{
margin-left:40px;
border-left:3px solid #06f;
}
.firstPage a,.previousPage a{
border-right:12px solid #06f;
}
.firstPage a:hover,.previousPage a:hover{
border-right-color: #f60;
}
.nextPage a,.lastPage a{
border-left:12px solid #06f;
}
.nextPage a:hover,.lastPage a:hover{
border-left-color:#f60;
}
.pagination li.lastPage{
border-right:3px solid #06f;
}
.pagination li li.currentState a{
position:relative;
margin:-1px 3px;
padding:1px 4px;
border:3px double #fff;
border-color:#f60;
background:#f60;
color:#fff;
}
.pagination li.currentState,.currentState a,.currentState a:hover{
border-color:#fff #ccc;
cursor:default;
}
/*End of paging style*/


Calling method:

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Recommend several apps to buy mainstream coins in 2025 latest release Recommend several apps to buy mainstream coins in 2025 latest release Apr 21, 2025 pm 11:54 PM

APP software that can purchase mainstream coins includes: 1. Binance, the world's leading, large transaction volume and fast speed; 2. OKX, innovative products, low fees, high security; 3. Gate.io, a variety of assets and trading options, focusing on security; 4. Huobi (HTX), low fees, good user experience; 5. Coinbase, suitable for novices, high security; 6. Kraken, safe and compliant, providing a variety of services; 7. KuCoin, low fees, suitable for professional traders; 8. Gemini, emphasizes compliance, and provides custodial services; 9. Crypto.com, providing a variety of offers and services; 10. Bitstamp, an old exchange, strong liquidity,

Recommended essential software for currency contract parties Recommended essential software for currency contract parties Apr 21, 2025 pm 11:21 PM

The top ten cryptocurrency contract exchange platforms in 2025 are: 1. Binance Futures, 2. OKX Futures, 3. Gate.io, 4. Huobi Futures, 5. BitMEX, 6. Bybit, 7. Deribit, 8. Bitfinex, 9. CoinFLEX, 10. Phemex, these platforms are widely recognized for their high liquidity, diversified trading functions and strict security measures.

Ranking of leveraged exchanges in the currency circle The latest recommendations of the top ten leveraged exchanges in the currency circle Ranking of leveraged exchanges in the currency circle The latest recommendations of the top ten leveraged exchanges in the currency circle Apr 21, 2025 pm 11:24 PM

The platforms that have outstanding performance in leveraged trading, security and user experience in 2025 are: 1. OKX, suitable for high-frequency traders, providing up to 100 times leverage; 2. Binance, suitable for multi-currency traders around the world, providing 125 times high leverage; 3. Gate.io, suitable for professional derivatives players, providing 100 times leverage; 4. Bitget, suitable for novices and social traders, providing up to 100 times leverage; 5. Kraken, suitable for steady investors, providing 5 times leverage; 6. Bybit, suitable for altcoin explorers, providing 20 times leverage; 7. KuCoin, suitable for low-cost traders, providing 10 times leverage; 8. Bitfinex, suitable for senior play

Ouyi Ouyi Ouyi Ouix Ouyi Global Station Login Home Page Ouyi Ouyi Ouyi Ouix Ouyi Global Station Login Home Page Apr 21, 2025 pm 11:57 PM

Ouyi OKX is the world's leading digital asset trading platform. 1) Its development history includes: it will be launched in 2017, the Chinese name "Ouyi" will be launched in 2021, and it will be renamed Ouyi OKX in 2022. 2) Core services include: trading services (coin, leverage, contracts, DEX, fiat currency trading) and financial services (Yubibao, DeFi mining, lending). 3) The platform's special functions include: market data services and risk control system. 4) Core advantages include: technical strength, security system, service support and market coverage.

Which Bitcoin futures exchange is global? Which Bitcoin futures exchange is global? Apr 21, 2025 pm 11:18 PM

The top five Bitcoin futures exchanges rankings are: 1. CME Group: The most trustworthy in the world, attracting institutional investors, and have strong compliance; 2. Coinbase: Specially for retail investors, providing 13 futures contracts, with high ease of use; 3. Binance: High leverage, good liquidity, and large user volume; 4. OKX: Large cumulative trading volume, professional interface, and complete risk management; 5. Kraken: High security, suitable for European market and institutional customers.

Quantum Chain Exchange Ranking Top 10 Recommended (Updated in 2025) Quantum Chain Exchange Ranking Top 10 Recommended (Updated in 2025) Apr 21, 2025 pm 11:48 PM

Quantum chains can be traded on the following exchanges: 1. Binance: One of the world's largest exchanges, with large trading volume, rich currency and high security. 2. Sesame Open Door (Gate.io): a large exchange, providing a variety of digital currency transactions, with good trading depth. 3. Ouyi (OKX): operated by OK Group, with strong comprehensive strength, large transaction volume, and complete safety measures. 4. Bitget: Fast development, provides quantum chain transactions, and improves security. 5. Bithumb: operated in Japan, supports transactions of multiple mainstream virtual currencies, and is safe and reliable. 6. Matcha Exchange: a well-known exchange with a friendly interface and supports quantum chain trading. 7. Huobi: a large exchange that provides quantum chain trading,

Currency Circle Contract Trading Platform Ranking 2025 Currency Circle Contract Trading Platform Ranking 2025 Apr 21, 2025 pm 11:15 PM

Here are the top ten cryptocurrency futures exchanges in the world: 1. Binance Futures: Provides a wealth of contract products, low fees and high liquidity. 2. OKX: Supports multiple currency transactions, using SSL encryption and cold wallet storage. 3. Huobi Futures: Known for its stable platform and good service, it provides educational resources. 4. Gate.io: Innovative contract products and high liquidity, but FTX was bankrupt. 5. Deribit: Focus on options and perpetual contracts, providing professional trading tools. 6. CoinFLEX: Provides tokenized futures contracts and governance tokens FLEX. 7. Phemex: up to 100 times leverage, low transaction fees, and provides innovative contracts. 8. B

What are the hybrid blockchain trading platforms? What are the hybrid blockchain trading platforms? Apr 21, 2025 pm 11:36 PM

Suggestions for choosing a cryptocurrency exchange: 1. For liquidity requirements, priority is Binance, Gate.io or OKX, because of its order depth and strong volatility resistance. 2. Compliance and security, Coinbase, Kraken and Gemini have strict regulatory endorsement. 3. Innovative functions, KuCoin's soft staking and Bybit's derivative design are suitable for advanced users.

See all articles