唐僧肉片

自留地,My Private Place

0%

基于Bootstrap的简单分页功能

发表于 更新于 分类于

这里不涉及关于回调函数的操作，也就是Ajax的相关操作。也不涉及关于服务器的查询操作。

基于Jquery的分页实现

直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
function Pager (that, size, count, f){
	this.pageSize = size;
	this.itemCount = count;
	this.pages = parseInt(count/size) + 1;
	this.pageObj = that;
	this.curr = 1;
	this.fun = f;
	this.initPage = function (){
		this.loadPageHtml();
		this.fun(this.pageSize, this.curr, this.pages);
	}
	this.loadPageHtml = function (){
		this.pageObj.html(this.getHtml());
		if(this.curr == 1){
			$('#page-prev').addClass("disabled");
			$('#page-prev>a').attr("data-goto", "");
		}else{
			$('#page-prev').removeClass("disabled");
			$('#page-prev>a').attr("data-goto", "Prev");
		}
		if(this.curr == this.pages){
			$('#page-next').addClass("disabled");
			$('#page-next>a').attr("data-goto", "");
		}else{
			$('#page-next').removeClass("disabled");
			$('#page-next>a').attr("data-goto", "Next");
		}
		
		this.bindGoto(this, this.clickFunction);
	}
	this.getHtml = function (){
		var html = '<li id="page-prev"><a href="javascript:;" data-goto="Prev"><span aria-hidden="true">«</span></a></li>';
		var i;
		if(this.pages <= 7){
			for(i=1; i <= 7; i++){
				html += this.itemHtml(i);
			}
		}else{
			if(this.curr < 4){
				for(i = 1; i < 6; i++){
					html += this.itemHtml(i);
				}
				html += '<li><span>...</span></li>';
				html += this.itemHtml(this.pages);
			}else if(this.curr >= 4 && this.pages - this.curr > 3){
				html += this.itemHtml(1);
				html += '<li><span>...</span></li>';
				html += this.itemHtml(this.curr - 1);
				html += this.itemHtml(this.curr);
				html += this.itemHtml(this.curr + 1);
				html += '<li><span>...</span></li>';
				html += this.itemHtml(this.pages);
			}else{
				html += this.itemHtml(1);
				html += '<li><span>...</span></li>';
				for(i = this.pages-4; i <= this.pages; i++){
					html += this.itemHtml(i);
				}
			}
		}
		html += '<li id="page-next"><a href="javascript:;" data-goto="Next"><span aria-hidden="true">»</span></a></li>';
		return html;
	}
	this.itemHtml = function (page){
		if(page == this.curr){
			return '<li class="active"><a href="javascript:;" data-goto="' + page + '">' + page + '</a></li>';
		}else{
			return '<li><a href="javascript:;" data-goto="' + page + '">' + page + '</a></li>';
		}
	}
	this.bindGoto = function (obj, cb){
		var list = this.pageObj.find('a');
		$.each(list, function(i, v) {
			$(v).click(function(){
				cb(obj, $(this).data('goto'));
			});
		});				
	}
	this.clickFunction = function (obj, data){
		//this = obj;
		switch(data){
			case "":
				break;
			case "Prev":
				obj.curr = obj.curr - 1;
				break;
			case "Next":
				obj.curr = obj.curr + 1;
				break;
			default:
				obj.curr = parseInt(data);
				break;
		}
		obj.fun(obj.pageSize, obj.curr, obj.pages);
		obj.loadPageHtml();
		
		//console.log(obj);
		return obj;
	}
}

参数说明：

  • that是存放分页html代码的DOM元素，比如$(“#pager”)；
  • size是每页显示的数量，比如10；
  • count是条目总数量，比如100；
  • f是回调函数，比如点击后执行Ajax操作。

使用方法

直接按如下方法使用：

1
2
3
4
...
var p = new Pager($("#pager>ul"), 10, 115, function(args){do something;});
p.initPage();
...

还想要吐槽一下IE，针对IE还要单独写CSS代码，要多麻烦有多麻烦。所以不想兼容IE了，爱咋咋的吧，要想看，请放弃IE，转Chrome吧。

修复小BUG

  • 计算总页数时有问题，原来是this.pages = parseInt(count/size) + 1;。也就是说，当可以整除的时候，会多出一页空白页，需要修改成：this.pages = count%size == 0 ? parseInt(count/size) : (parseInt(count/size) + 1);，先判断是否整除，如果整除就不用加1，如果有余数就加1页。

  • 当然实现过程中可能容错性比较差，将就着用吧。