分页是在页面上常见的一个效果，当然实现分页的方式也有很多，一般有两种思想。
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封装了一个新的方法，其中有几个配置项，当然如果可以拓展的话直接在配置项里面写就可以了。
如有错误请各位大神指正，不胜感激！
时间： 2025-01-06 21:08:27