Use jquery to make pagination effects

Previously wrote a PHP paging effect, but today's little friends and I said a not applicable to the background of the simple use of the front section of the JS to write pagination, organized a bit, the code is as follows:

Html:

<div id= "Containet" > <ul id= "Pagemain" > <li> this is the content title of the 1</li> <li> This is the content title of the section 2&lt         ;/li> <li> This is the content title of section 3</li> <li> This is the title of the content 4</li> <li> This is the Content title Section 5</li>        <li> This is the Content title Section 6</li> <li> This is the content title of section 7</li> <li> This is the Content title Section 8</li> <li> This is the Content title Section 9</li> <li> This is the content title of section 10</li> <li> This is the content title of section 11</li> <li > This is the Content title of section 12</li> <li> This is the content title of section 13</li> <li> This is the content title of section 14</li> <li> this  is the Content title Section 15</li> <li> This is the content title of section 16</li> <li> This is the content title 17</li> <li> This is the content title Section 18</li> <li> This is the content title of section 19</li> <li> This is the title of the content 20</li> <li> This is the Content title Section 21& Lt;/li> <li> This is the content title of section 22</li> <li> This is the title of the content 23</li> <li> This is the Content title Section 24</l I> <li> Thisis the Content title Section 25</li> <li> This is the content title of section 26</li> <li> This is the content title 27</li> </ul> <d IV id= "Pagebox" > <span id= "prev" > Previous </span> <ul id= "Pagenav" ></ul> <spa N id= "Next" > Next </span> </div></div>

　　

　　

Css:

<style type= "Text/css" > * {margin:0;        padding:0;            } #containet {display:inline-block;            border:1px solid #ed0181;            padding:19px;        Margin:auto;            } #pageMain li {list-style:none;        line-height:22px;        } #pageBox {padding:10px 0 0 0;            } #pageBox span {display:inline-block;            width:60px;            height:24px;            line-height:24px;            Text-align:center;            Color: #fff;        Background: #08a586;        } #pageNav {display:inline-block;            } #pageNav a {display:inline-block;            width:24px;            height:24px;            line-height:24px;            Text-align:center;            Color: #3a87ad;        Text-decoration:none; } #pageNav a.active, #pageNav a:hover {background: #3a87ad;           Color: #EFEFEF;        } #prev: hover {cursor:pointer;        } #next: hover {cursor:pointer; } </style>

I prefer to use JQ, so here is the JQ, did not write the native JS method:

<script> $ (function () {tabPage ({pagemain: ' #pageMain ', Pagenav: ' #pageNav ',  Pageprev: ' #prev ', Pagenext: ' #next ', curnum:7,/* Number of bars per page */activeclass: ' Active ',        /* Highlighted class*/ini:0/* Initialize the displayed page */});            function TabPage (tabPage) {var Pagemain = $ (tabpage.pagemain);            /* Get the table of Contents */var Pagenav = $ (TABPAGE.PAGENAV);            /* Get pagination */var Pageprev = $ (Tabpage.pageprev);            /* Previous page */var Pagenext = $ (tabpage.pagenext);            /* Next page */var curnum = Tabpage.curnum;            /* Number of displays per page */var len = Math.ceil (Pagemain.find ("Li"). Length/curnum);            /* Total pages Calculated */Console.log (len);            var pagelist = ';            /* Generate page Number */var iNum = 0; /* Current index value */for (var i = 0; i < len; i++) {pagelist + = ' <a href= "javascript:;" > ' + (i + 1) + ' </a> ';            } pagenav.html (PageList);            /* The first page highlights */Pagenav.find ("A:first"). addclass (Tabpage.activeclass);                        /******* Click event *******/pagenav.find ("a") for the tab. each (function () {$ (). Click (function () {                        Pagenav.find ("a"). Removeclass (Tabpage.activeclass);                        $ (this). addclass (Tabpage.activeclass);                        INum = $ (this). index ();                        $ (Pagemain). Find ("Li"). Hide (); for (var i = ($ (this). HTML ()-1) * CURNUM; < ($ (this). HTML ()) * curnum; i++) {$ (Pagemain            ). Find ("Li"). EQ (i). Show ()});            }) $ (pagemain). Find ("Li"). Hide (); /************ first page display *********/for (var i = 0; i < Curnum; i++) {$ (Pagemain). Find ("Li"). EQ (i). Show ()}/* Next page */Pagenext.click (function () {$ (Pagemain). Find ("Li"). Hide ();                    if (INum = = len-1) {alert (' already the last page ');                    for (var i = (len-1) * curnum; i < Len * Curnum; i++) {$ (Pagemain). Find ("Li"). EQ (i). Show ()                } return false;                    } else {Pagenav.find ("a"). Removeclass (Tabpage.activeclass);                    inum++;                Pagenav.find ("a"). EQ (iNum). addclass (Tabpage.activeclass);//INI (iNum); } for (var i = iNum * Curnum; i < (iNum + 1) * Curnum; i++) {$ (Pagemain). Find ("Li").            EQ (i). Show ()});                /* Previous Page */Pageprev.click (function () {$ (Pagemain). Find ("Li"). Hide ();                    if (INum = = 0) {alert (' Currently the first page '); for (var i = 0; i < Curnum; i++) {$ (pagemain). Find ("li"). EQ (i). Show ()} return false;                    } else {Pagenav.find ("a"). Removeclass (Tabpage.activeclass);                    inum--;                Pagenav.find ("a"). EQ (iNum). addclass (Tabpage.activeclass); } for (var i = iNum * Curnum; i < (iNum + 1) * Curnum; i++) {$ (Pagemain). Find ("Li"). EQ (i). Show ()})}) </script>

　　

　

The effect is as follows:

　

Use jquery to make pagination effects