javascript分页

 

之前做无刷新分页一直用JQuery的pagination，但是发现他有一个很让人郁闷的问题，我们使用分页的时候，一般是把数据和数据总数同时查出来的，但是pagination非得要先拿到数据总数才肯干活，要是在查询条件不变的时候还可以应付，如果查询条件变化，我们就会遇到一个很尴尬的场面，本来一次查询就可以完成的事，现在非得分两步，先去查数据总数，然后再去查数据(不知道有没有办法解决，反正我没找到解决方法)。郁闷之下就自己写了一个，下面是代码：

 

 1 var Pager = function() {
 2     this.initialize.apply(this, arguments);
 3 }
 4 Pager.prototype = {
 5     initialize: function(id, options) {
 6         this.id = id;// 分页控件容器
 7          this.index = 1;//当前页
 8          this.pageCount = 0;//总页数
 9         if (options) {
10             this.total = options.total || 0;//数据总数
11             this.pageSize = options.pageSize || 10;//分页大小
12             this.btnAmount = options.amount || 8;//显示的按钮个数
13             this.firstText = options.first || "|<";// “第一页按钮”显示的文本
14             this.prevText = options.prev || "<<"//"上一页按钮"显示的文本
15             this.nextText = options.next || ">>";//“下一页按钮显示”的文本
16             this.lastText = options.last || ">|";//"最后一页按钮"显示的文本
17         } else {
18             this.total = 0;
19             this.pageSize = 10;
20             this.btnAmount = 8;
21             this.firstText = "|<";
22             this.prevText = "<<"
23             this.nextText = ">>";
24             this.lastText = ">|";
25         }
26         this.container = this.getObj(id);
27     },
28     getObj: function(id) {
29         return "string" == typeof id ? document.getElementById(id) : id;
30     },
31     // 当前页码改变时调用，这是你需要覆盖的方法
32     changeIndex: function(index) {
33     },
34     reform: function(index) {
35         this.index = index;
36         this.changeIndex(index);
37         this.render();
38     },
39     calculate: function() {
40         this.pageCount = Math.ceil(this.total / this.pageSize);
41         this.index = this.index;
42         if (this.index > this.pageCount) {
43             this.index = this.pageCount;
44         }
45     },
46     render: function() {
47         this.calculate();
48         var start = Math.max(1, this.index - parseInt(this.btnAmount / 2));
49         var end = Math.min(this.pageCount, start + this.btnAmount - 1);
50         start = Math.max(1, end - this.btnAmount + 1);
51         var html = "";
52         html += "<div class=\"simple\">";
53         if (this.pageCount >= 1) {
54             if (this.index != 1) {
55                 html += "<a href='javascript:;' index='1'>" + this.firstText + "</a>";
56                 html += "<a href='javascript:;' index='" + (this.index - 1) + "'>" + this.prevText + "</a>";
57             } else {
58                 html += "<span>" + this.firstText + "</span>";
59                 html += "<span>" + this.prevText + "</span>";
60             }
61         }
62         for (var i = start; i <= end; i++) {
63             if (i == this.index) {
64                 html += "<span class='curr'>" + i + "</span>";
65             } else {
66                 html += "<a href='javascript:;' index='" + i + "'>" + i + "</a>";
67             }
68         }
69         if (this.pageCount >= 1) {
70             if (this.index != this.pageCount) {
71                 html += "<a href='javascript:;' index='" + (this.index + 1) + "'>" + this.nextText + "</a>";
72                 html += "<a href='javascript:;' index='" + this.pageCount + "'>" + this.lastText + "</a>";
73             } else {
74                 html += "<span>" + this.nextText + "</span>";
75                 html += "<span>" + this.lastText + "</span>";
76             }
77         }
78         html += "</div>";
79         this.container.innerHTML = html;
80         var linklist = this.container.getElementsByTagName("a");
81         var self = this;
82         for (var i = 0; i < linklist.length; i++) {
83             linklist[i].onclick = function() {
84                 var index = this.getAttribute("index");
85                 if (index) {
86                     self.reform(index)
87                 }
88                 return false;
89             };
90         }
91     },
92     changeTotal: function(total) {
93         if (total && !isNaN(total)) {
94             this.total = total;
95             this.render();
96         }
97     }
98 }

复制代码

 

使用的代码如下：

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>分页演示</title>
 5     <!--  导入分页js  -->
 6     <script type="text/javascript" src="js/pager.js"></script>
 7 </head>
 8 <body>
 9     <div id="pager"></div>
10     <script type="text/javascript">
11         var pager = new Pager("pager",{pagePize:8,btnAmount:8,first:"首页",prev:"上一页",next:"下一页",last:"尾页"});
12         // 覆盖当页码改变时调用的方法
13         pager.changeIndex = function(index){
14             // Ajax调用，获取数据以及数据总数
15             var total = 100;// 手动设置数据总数，获取数据的代码这里就省略了
16             
17             // 做你想做的...
18             
19             // 设置数据总数
20             pager.changeTotal(total);
21         }
22         // 初始化时设置数据总数为2000，本来应该去数据库查的，这里就省略了...
23         pager.changeTotal(2000)
24     </script>
25 </body>
26 </html>

复制代码运行代码

总算一切完工了...