How to create paging effect with jquery-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to create paging effect with jquery

Mar 15, 2018 am 11:42 AM

jquery Pagination Effect

This time I will show you how to create a paging effect with jquery. What are the precautions for using jquery to create a paging effect? The following is a practical case, let’s take a look.

A simple paging effect based on jquery.page.js, for your reference, the specific content is as follows

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta charset=&quot;utf-8&quot; /&gt; 
&lt;title&gt;简单的jQuery分页插件&lt;/title&gt; 
&lt;style&gt; 
*{ margin:0; padding:0; list-style:none;} 
a{ text-decoration:none;} 
a:hover{ text-decoration:none;} 
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;} 
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} 
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} 
&lt;/style&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;br&gt;&lt;br&gt;&lt;br&gt; 
&lt;p class=&quot;tcdPageCode&quot;&gt;&lt;/p&gt; 
&lt;center&gt;&lt;pre&gt;&lt;br&gt; 
&lt;/pre&gt;&lt;/center&gt; 
&lt;script src=&quot;js/jquery-1.8.3.min.js&quot;&gt;&lt;/script&gt; 
&lt;script src=&quot;js/jquery.page.js&quot;&gt;&lt;/script&gt; 
&lt;script&gt; 
  $(".tcdPageCode").createPage({ 
    pageCount:100, 
    current:1, 
    backFn:function(p){ 
      console.log(p); 
    } 
  }); 
&lt;/script&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Copy after login

The calling method is as follows:

$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法，p是当前页码
}
});

Copy after login

pageCount: total number of pages

current：Current page

The following is the jquery.page.js source code:

(function($){ 
  var ms = { 
    init:function(obj,args){ 
      return (function(){ 
        ms.fillHtml(obj,args); 
        ms.bindEvent(obj,args); 
      })(); 
    }, 
    //填充html 
    fillHtml:function(obj,args){ 
      return (function(){ 
        obj.empty(); 
        //上一页 
        if(args.current &gt; 1){ 
          obj.append('&lt;a href=&quot;javascript:;&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; class=&quot;prevPage&quot;&gt;上一页&lt;/a&gt;'); 
        }else{ 
          obj.remove('.prevPage'); 
          obj.append('&lt;span class=&quot;disabled&quot;&gt;上一页&lt;/span&gt;'); 
        } 
        //中间页码 
        if(args.current != 1 &amp;&amp; args.current &gt;= 4 &amp;&amp; args.pageCount != 4){ 
          obj.append('&lt;a href=&quot;javascript:;&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; class=&quot;tcdNumber&quot;&gt;'+1+'&lt;/a&gt;'); 
        } 
        if(args.current-2 &gt; 2 &amp;&amp; args.current &lt;= args.pageCount &amp;&amp; args.pageCount &gt; 5){ 
          obj.append('&lt;span&gt;...&lt;/span&gt;'); 
        } 
        var start = args.current -2,end = args.current+2; 
        if((start &gt; 1 &amp;&amp; args.current &lt; 4)||args.current == 1){ 
          end++; 
        } 
        if(args.current &gt; args.pageCount-4 &amp;&amp; args.current &gt;= args.pageCount){ 
          start--; 
        } 
        for (;start &lt;= end; start++) { 
          if(start &lt;= args.pageCount &amp;&amp; start &gt;= 1){ 
            if(start != args.current){ 
              obj.append('&lt;a href=&quot;javascript:;&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; class=&quot;tcdNumber&quot;&gt;'+ start +'&lt;/a&gt;'); 
            }else{ 
              obj.append('&lt;span class=&quot;current&quot;&gt;'+ start +'&lt;/span&gt;'); 
            } 
          } 
        } 
        if(args.current + 2 &lt; args.pageCount - 1 &amp;&amp; args.current &gt;= 1 &amp;&amp; args.pageCount &gt; 5){ 
          obj.append('&lt;span&gt;...&lt;/span&gt;'); 
        } 
        if(args.current != args.pageCount &amp;&amp; args.current &lt; args.pageCount -2 &amp;&amp; args.pageCount != 4){ 
          obj.append('&lt;a href=&quot;javascript:;&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; class=&quot;tcdNumber&quot;&gt;'+args.pageCount+'&lt;/a&gt;'); 
        } 
        //下一页 
        if(args.current &lt; args.pageCount){ 
          obj.append(&#39;&lt;a href=&quot;javascript:;&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; rel=&quot;external nofollow&quot; class=&quot;nextPage&quot;&gt;下一页&lt;/a&gt;'); 
        }else{ 
          obj.remove('.nextPage'); 
          obj.append('&lt;span class=&quot;disabled&quot;&gt;下一页&lt;/span&gt;'); 
        } 
      })(); 
    }, 
    //绑定事件 
    bindEvent:function(obj,args){ 
      return (function(){ 
        obj.on("click","a.tcdNumber",function(){ 
          var current = parseInt($(this).text()); 
          ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current); 
          } 
        }); 
        //上一页 
        obj.on("click","a.prevPage",function(){ 
          var current = parseInt(obj.children("span.current").text()); 
          ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current-1); 
          } 
        }); 
        //下一页 
        obj.on("click","a.nextPage",function(){ 
          var current = parseInt(obj.children("span.current").text()); 
          ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); 
          if(typeof(args.backFn)=="function"){ 
            args.backFn(current+1); 
          } 
        }); 
      })(); 
    } 
  } 
  $.fn.createPage = function(options){ 
    var args = $.extend({ 
      pageCount : 10, 
      current : 1, 
      backFn : function(){} 
    },options); 
    ms.init(this,args); 
  } 
})(jQuery);

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other php Chinese websites related articles!

Hot Article

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot tools Tags

Code&IT

Voice

Business

Marketing

AI Detector

Chatbot

Design&Art

Hot Article

How Long Does It Take To Beat Split Fiction?

3 weeks ago By DDD

Repo: How To Revive Teammates

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?

3 weeks ago By 王林

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Article Tags

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7134

Java Tutorial

1534

Laravel Tutorial

1257

PHP Tutorial

1205

CakePHP Tutorial

1154

Related knowledge

Users encounter rare glitches: Samsung Watch smartwatches suddenly experience white screen issues Apr 03, 2024 am 08:13 AM

Users encounter rare glitches: Samsung Watch smartwatches suddenly experience white screen issues

Kyushu Fengshen Assassin 4S Radiator Review Air-cooled 'Assassin Master' Style Mar 28, 2024 am 11:11 AM

Kyushu Fengshen Assassin 4S Radiator Review Air-cooled 'Assassin Master' Style

Exquisite light and shadow art in spring, Haqu H2 is the cost-effective choice Apr 17, 2024 pm 05:07 PM

Exquisite light and shadow art in spring, Haqu H2 is the cost-effective choice

Huntkey MX750P full module power supply review: 750W of concentrated platinum strength Mar 28, 2024 pm 03:20 PM

Huntkey MX750P full module power supply review: 750W of concentrated platinum strength

Colorful Hidden Star P15 24 Review: A hard-core all-round gaming laptop with both good looks and performance Mar 06, 2024 pm 04:40 PM

Colorful Hidden Star P15 24 Review: A hard-core all-round gaming laptop with both good looks and performance

Easily understand 4K HD images! This large multi-modal model automatically analyzes the content of web posters, making it very convenient for workers. Apr 23, 2024 am 08:04 AM

Easily understand 4K HD images! This large multi-modal model automatically analyzes the content of web posters, making it very convenient for workers.

A true one-lens experience with the NIKKOR Z 28-400mm f/4-8 VR lens Mar 28, 2024 pm 02:54 PM

A true one-lens experience with the NIKKOR Z 28-400mm f/4-8 VR lens

The screen is good for playing games. Brief analysis of iQOO Neo9S Pro+ screen Jul 19, 2024 pm 03:53 PM

The screen is good for playing games. Brief analysis of iQOO Neo9S Pro+ screen

See all articles