首页 > 代码库 > 关于分页

关于分页

分页是在页面上常见的一个效果,当然实现分页的方式也有很多,一般有两种思想。

1.把数据全部加载后,利用设置部分显示,其他隐藏。

2.根据点击事件,从前台传值给后台,后台再封装成接口,前台根据前台的接口用ajax加载数据,每次点击时调用不同的ajax。

一般网页上都是使用第二种方式,不过第一种方式更简单一些,今天先分享下第一种方式

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
  7     <style>
  8         
  9         nav.pagination{
 10             text-align: center;
 11             cursor: pointer;
 12         }
 13         tr.hidetr{
 14             display: none;
 15         }
 16         .active{
 17             color:red !important;
 18         }
 19     </style>
 20 </head>
 21 <body>
 22 <div class="container">
 23     <div class="row">
 24         <div id="mytab" class="col-md-4 col-md-offset-4">
 25         </div>
 26     </div>
 27     
 28 </div>
 29     
 30 <script src="jquery-1.11.0.min.js"></script>
 31 <script src="bootstrap.min.js"></script>
 32 <script>
 33 //造数据
 34     var mydata=[];
 35     for (var m = 0; m < 100; m++) {
 36         mydata.push({"name":"haha","age":m,"like":"book"+m});
 37     }
 38 (function($){
 39     $.fn.initTable=function(options){
 40         //默认值
 41         var defaults={
 42             //是否分页
 43             pageOn:true,
 44             //每页显示数量
 45             pageNum:6,
 46             //数据
 47             data:[],
 48             //对应关系
 49             tdclun:[{"key":""}],
 50             //表头名称
 51             th:["th","th"],
 52         };
 53         var opts=$.extend({}, defaults, options);
 54         var tab = $("<table>").addClass(table table-striped table-bordered);
 55         var theadtr = $("<tr>");
 56         var tbodytr = $("<tbody>");
 57 
 58 
 59         for (var i = 0; i < opts.th.length; i++) {
 60             theadtr.append($("<th>").text(opts.th[i]));
 61         }
 62         tab.append($("<thead>").append(theadtr));
 63         for (var n = 0; n < opts.data.length; n++) {
 64             var tr = $("<tr>");
 65                 if(n>opts.pageNum){
 66                     tr.addClass(hidetr);
 67                 }
 68             for (var j = 0; j < opts.tdclun.length; j++) {
 69                 tr.append($("<td>").text(opts.data[n][opts.tdclun[j].key]));
 70             }
 71             tbodytr.append(tr);
 72         }
 73         tab.append(tbodytr);
 74 
 75         $(this).append(tab);
 76 
 77         var num=Math.ceil(opts.data.length/opts.pageNum);
 78         var str=<nav class="pagination"><ul><li><a>《</a></li>;
 79         for(var k=0;k<num;k++){
 80             if(k==0){
 81                 str+=<li><a class="active">+(1)+</a></li>;
 82             }else{
 83                 str+=<li><a>+(k+1)+</a></li>;
 84             }
 85         }
 86         str+=<li><a>》</a></li></ul></nav>
 87         $(this).append(str);
 88         
 89          var box = $(this);
 90         box.find(a).click(function(){
 91 
 92             var len=$(.pagination li).length-2;
 93             var index=$(this).text();
 94             var nowPage=$(.active).parent().index();
 95 
 96             if($(this).text()==){
 97                if(nowPage==len){
 98                     return false;
 99                 }else{
100                     nowPage++;
101                     // console.log(nowPage);
102                     change();
103                 }
104             }else if($(this).text()==){
105                 if(nowPage==1){
106                     return false;
107                 }else{
108                     nowPage--;
109                     // console.log(nowPage);
110                     $(.pagination li a).eq(nowPage).addClass(active).parent().siblings().find(a).removeClass(active);
111                    change();
112                 }
113             }else{
114                 $(this).addClass(active).parent().siblings().find(a).removeClass(active);
115                 box.find(tbody tr).eq((index-1)*opts.pageNum).removeClass(hidetr).prevAll().addClass(hidetr);
116                 box.find(tbody tr).eq((index-1)*opts.pageNum).nextAll().removeClass(hidetr);
117                 box.find(tbody tr).eq((index-0)*opts.pageNum).nextAll().addClass(hidetr);
118             }
119 
120             function change(){
121                  $(.pagination li a).eq(nowPage).addClass(active).parent().siblings().find(a).removeClass(active);
122                     box.find(tbody tr).eq((nowPage-1)*opts.pageNum).removeClass(hidetr).prevAll().addClass(hidetr);
123                     box.find(tbody tr).eq((nowPage-1)*opts.pageNum).nextAll().removeClass(hidetr);
124                     box.find(tbody tr).eq((nowPage)*opts.pageNum).nextAll().addClass(hidetr);
125             }
126         })
127     }
128 })(jQuery);
129 
130 //调用
131     $("#mytab").initTable({
132         "pageNum":6,
133         "th":["姓名","年纪","喜好"],
134         "data":mydata,
135         "tdclun":[{"key":"name"},{"key":"age"},{"key":"like"}]
136     });
137 
138 </script>
139 </body>
140 </html>

使用bootstrap进行简单布局,功能上使用jq封装了一个新的方法,其中有几个配置项,当然如果可以拓展的话直接在配置项里面写就可以了。

如有错误请各位大神指正,不胜感激!

关于分页