标签：push addclass ext bootstrap 加载 gen lun html book
分页是在页面上常见的一个效果，当然实现分页的方式也有很多，一般有两种思想。
一般网页上都是使用第二种方式，不过第一种方式更简单一些，今天先分享下第一种方式
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封装了一个新的方法，其中有几个配置项，当然如果可以拓展的话直接在配置项里面写就可以了。
如有错误请各位大神指正，不胜感激！
标签：push addclass ext bootstrap 加载 gen lun html book
原文地址：http://www.cnblogs.com/xiaoshan-100/p/6160423.html
