使用jquery簡單的製作一個分頁效果

阿新 • • 發佈：2020-11-30

HTML

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <meta name="viewport" content="width=device-width, initial-scale=1">
 6         <title>分頁</title>
 7     </head>
 8     <link rel="stylesheet" type="text/css" 
 href="page.css" />
 9     
10     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
11     <body>
12         <div id="containet">
13             <table border="" cellspacing="" cellpadding="" id="pageMain">
14                 <!-- <tr><td>這是內容標題 第1</td></tr>
 
15                 <tr><td>這是內容標題 第2</td></tr>
16                 <tr><td>這是內容標題 第3</td></tr>
17                 <tr><td>這是內容標題 第4</td></tr>
18                 <tr><td>這是內容標題 第5</td></tr>
19                 <tr><td>這是內容標題 第6</td></tr>
 
20                 <tr><td>這是內容標題 第7</td></tr>
21                 <tr><td>這是內容標題 第8</td></tr>
22                 <tr><td>這是內容標題 第9</td></tr>
23                 <tr><td>這是內容標題 第10</td></tr>
24                 <tr><td>這是內容標題 第11</td></tr>
25                 <tr><td>這是內容標題 第12</td></tr>
26                 <tr><td>這是內容標題 第13</td></tr>
27                 <tr><td>這是內容標題 第14</td></tr>
28                 <tr><td>這是內容標題 第15</td></tr>
29                 <tr><td>這是內容標題 第16</td></tr>
30                 <tr><td>這是內容標題 第17</td></tr> -->
31             </table>
32             <div id="pageBox">
33                 <span id="prev">上一頁</span>
34                 <ul id="pageNav"></ul>
35                 <span id="next">下一頁</span>
36             </div>
37         </div>
38     </body>
39     <script src="page.js"></script>
40 </html>

  1 $(function () {
  2     var data=[
  3         {name:"我是一個莫得感情滴程式設計師 第01"},
  4         {name:"我是一個莫得感情滴程式設計師 第02"},
  5         {name:"我是一個莫得感情滴程式設計師 第03"},
  6         {name:"我是一個莫得感情滴程式設計師 第04"},
  7         {name:"我是一個莫得感情滴程式設計師 第05"},
  8         {name:"我是一個莫得感情滴程式設計師 第06"},
  9         {name:"我是一個莫得感情滴程式設計師 第07"},
 10         {name:"我是一個莫得感情滴程式設計師 第08"},
 11         {name:"我是一個莫得感情滴程式設計師 第09"},
 12         {name:"我是一個莫得感情滴程式設計師 第10"},
 13         {name:"我是一個莫得感情滴程式設計師 第11"},
 14         {name:"我是一個莫得感情滴程式設計師 第12"},
 15         {name:"我是一個莫得感情滴程式設計師 第13"},
 16         {name:"我是一個莫得感情滴程式設計師 第14"},
 17         {name:"我是一個莫得感情滴程式設計師 第15"},
 18     ];
 19     var Numlength=data.length;
 20     console.log(Numlength);
 21     // var html='<tr>'+'<td>'+data[i].name+'</td>'+'</tr>';
 22     console.log(html);
 23         for(i=0;i<Numlength;i++){
 24                 var html='<tr>'+'<td>'+data[i].name+'</td>'+'</tr>';            
 25                             $('#pageMain').append(html);
 26         }
 27 
 28         tabPage({
 29             pageMain: '#pageMain',
 30             pageNav: '#pageNav',
 31             pagePrev: '#prev',
 32             pageNext: '#next',
 33             curNum: 7, /*每頁顯示的條數*/
 34             activeClass: 'active', /*高亮顯示的class*/
 35             ini: 0/*初始化顯示的頁面*/
 36         });
 37         function tabPage(tabPage) {
 38             var pageMain = $(tabPage.pageMain);
 39             /*獲取內容列表*/
 40             var pageNav = $(tabPage.pageNav);
 41             /*獲取分頁*/
 42             var pagePrev = $(tabPage.pagePrev);
 43             /*上一頁*/
 44             var pageNext = $(tabPage.pageNext);
 45             /*下一頁*/
 46  
 47  
 48             var curNum = tabPage.curNum;
 49             /*每頁顯示數*/
 50             var len = Math.ceil(pageMain.find("tr").length / curNum);
 51             /*計算總頁數*/
 52             console.log(len);
 53             var pageList = '';
 54             /*生成頁碼*/
 55             var iNum = 0;
 56             /*當前的索引值*/
 57  
 58             for (var i = 0; i < len; i++) {
 59                 pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
 60             }
 61             pageNav.html(pageList);
 62             /*頭一頁加高亮顯示*/
 63             pageNav.find("a:first").addClass(tabPage.activeClass);
 64  
 65             /*******標籤頁的點選事件*******/
 66                 pageNav.find("a").each(function(){
 67                     $(this).click(function () {
 68                         pageNav.find("a").removeClass(tabPage.activeClass);
 69                         $(this).addClass(tabPage.activeClass);
 70                         iNum = $(this).index();
 71                         $(pageMain).find("tr").hide();
 72                         for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
 73                             $(pageMain).find("tr").eq(i).show()
 74                         }
 75  
 76                     });
 77             })
 78  
 79  
 80             $(pageMain).find("tr").hide();
 81             /************首頁的顯示*********/
 82             for (var i = 0; i < curNum; i++) {
 83                 $(pageMain).find("tr").eq(i).show()
 84             }
 85  
 86  
 87             /*下一頁*/
 88             pageNext.click(function () {
 89                 $(pageMain).find("tr").hide();
 90                 if (iNum == len - 1) {
 91                     alert('已經是最後一頁');
 92                     for (var i = (len - 1) * curNum; i < len * curNum; i++) {
 93                         $(pageMain).find("tr").eq(i).show()
 94                     }
 95                     return false;
 96                 } else {
 97                     pageNav.find("a").removeClass(tabPage.activeClass);
 98                     iNum++;
 99                     pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
100 //                    ini(iNum);
101                 }
102                 for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
103                     $(pageMain).find("tr").eq(i).show()
104                 }
105             });
106             /*上一頁*/
107             pagePrev.click(function () {
108                 $(pageMain).find("tr").hide();
109                 if (iNum == 0) {
110                     alert('當前是第一頁');
111                     for (var i = 0; i < curNum; i++) {
112                         $(pageMain).find("tr").eq(i).show()
113                     }
114                     return false;
115                 } else {
116                     pageNav.find("a").removeClass(tabPage.activeClass);
117                     iNum--;
118                     pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
119                 }
120                 for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
121                     $(pageMain).find("tr").eq(i).show()
122                 }
123             })
124  
125         }
126  
127  
128     })

CSS

 1 * {
 2             margin: 0;
 3             padding: 0;
 4         }
 5  
 6         #containet {
 7             display: inline-block;
 8             border: 1px solid #ed0181;
 9             padding: 19px;
10             margin: auto;
11         }
12  
13         #pageMain td {
14             list-style: none;
15             line-height: 22px;
16         }
17  
18         #pageBox {
19             padding: 10px 0 0 0;
20         }
21  
22         #pageBox span {
23             display: inline-block;
24             width: 60px;
25             height: 24px;
26             line-height: 24px;
27             text-align: center;
28             color: #fff;
29             background: #08a586;
30  
31         }
32  
33         #pageNav {
34             display: inline-block;
35         }
36  
37         #pageNav a {
38             display: inline-block;
39             width: 24px;
40             height: 24px;
41             line-height: 24px;
42             text-align: center;
43             color: #3a87ad;
44             text-decoration: none;
45         }
46  
47         #pageNav a.active, #pageNav a:hover {
48             background: #3a87ad;
49             color: #EFEFEF;
50         }
51  
52         #prev:hover {
53             cursor: pointer;
54         }
55  
56         #next:hover {
57             cursor: pointer;
58         }