首页 > 代码库 > 关于分页

关于分页

2024-08-26 14:54:44   221人阅读

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

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封装了一个新的方法，其中有几个配置项，当然如果可以拓展的话直接在配置项里面写就可以了。

如有错误请各位大神指正，不胜感激！

关于分页


联系
我们