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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

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)

What are the recommended websites for virtual currency app software? What are the recommended websites for virtual currency app software? Mar 31, 2025 pm 09:06 PM

This article recommends ten well-known virtual currency-related APP recommendation websites, including Binance Academy, OKX Learn, CoinGecko, CryptoSlate, CoinDesk, Investopedia, CoinMarketCap, Huobi University, Coinbase Learn and CryptoCompare. These websites not only provide information such as virtual currency market data, price trend analysis, etc., but also provide rich learning resources, including basic blockchain knowledge, trading strategies, and tutorials and reviews of various trading platform APPs, helping users better understand and make use of them

Top 10 of the formal Web3 trading platform APP rankings (authoritatively released in 2025) Top 10 of the formal Web3 trading platform APP rankings (authoritatively released in 2025) Mar 31, 2025 pm 08:09 PM

Based on market data and common evaluation criteria, this article lists the top ten formal Web3 trading platform APPs in 2025. The list covers well-known platforms such as Binance, OKX, Gate.io, Huobi (now known as HTX), Crypto.com, Coinbase, Kraken, Gemini, BitMEX and Bybit. These platforms have their own advantages in user scale, transaction volume, security, compliance, product innovation, etc. For example, Binance is known for its huge user base and rich product services, while Coinbase focuses on security and compliance. Choosing a suitable platform requires comprehensive consideration based on your own needs and risk tolerance.

How to roll positions in digital currency? What are the digital currency rolling platforms? How to roll positions in digital currency? What are the digital currency rolling platforms? Mar 31, 2025 pm 07:36 PM

Digital currency rolling positions is an investment strategy that uses lending to amplify trading leverage to increase returns. This article explains the digital currency rolling process in detail, including key steps such as selecting trading platforms that support rolling (such as Binance, OKEx, gate.io, Huobi, Bybit, etc.), opening a leverage account, setting a leverage multiple, borrowing funds for trading, and real-time monitoring of the market and adjusting positions or adding margin to avoid liquidation. However, rolling position trading is extremely risky, and investors need to operate with caution and formulate complete risk management strategies. To learn more about digital currency rolling tips, please continue reading.

On which platform is web3 transaction? On which platform is web3 transaction? Mar 31, 2025 pm 07:54 PM

This article lists the top ten well-known Web3 trading platforms, including Binance, OKX, Gate.io, Kraken, Bybit, Coinbase, KuCoin, Bitget, Gemini and Bitstamp. The article compares the characteristics of each platform in detail, such as the number of currencies, trading types (spot, futures, options, NFT, etc.), handling fees, security, compliance, user groups, etc., aiming to help investors choose the most suitable trading platform. Whether it is high-frequency traders, contract trading enthusiasts, or investors who focus on compliance and security, they can find reference information from it.

Recommended tutorial for newbies in the commonly used virtual currency exchange in the currency circle Recommended tutorial for newbies in the commonly used virtual currency exchange in the currency circle Mar 31, 2025 pm 10:45 PM

This article provides detailed exchange recommendations and introductory tutorials for beginners in the currency circle. Commonly used exchanges such as Coinbase, Binance, Kraken, Ouyi and Sesame Open Door are recommended, and the steps for registration, identity verification, security settings, recharge and trading are introduced. The article also emphasizes the importance of security awareness, risk control and continuous learning, aiming to help beginners enter the digital asset field safely and rationally.

What are the free market software websites What are the free market software websites Mar 31, 2025 pm 10:36 PM

There are six free market viewing software websites: 1. Binance platform, suitable for digital asset investors; 2. OKX platform, providing rich market data; 3. Sesame Open Door (Gate.io) platform, suitable for users who trade in Gate.io; 4. TradingView, providing professional charting tools; 5. CoinMarketCap, covering a wide range of digital asset data; 6. CoinGecko, providing project fundamental evaluation. When choosing a platform, you need to consider investment objects, chart function requirements, data comprehensiveness and user experience.

The latest tutorial for commonly used virtual currency exchanges in the currency circle 2025 The latest tutorial for commonly used virtual currency exchanges in the currency circle 2025 Mar 31, 2025 pm 10:57 PM

This article recommends several commonly used and relatively safe virtual currency exchanges for beginners entering the currency circle in 2025, including Binance, Ouyi, Coinbase and Sesame Open Door. The article provides detailed tutorials on registration, authentication, security setup and transaction process, and emphasizes the importance of risk control, security awareness and ongoing learning, aiming to help beginners securely get started with digital asset trading.

See all articles