Content Table

jQuery 分页插件

介绍 2 个效果不错、使用简单的 jQuery 分页插件

  • jqPagination

  • simplePagination

jqPagination

主页为 http://beneverard.github.io/jqPagination

jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application. Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive ‘Page 1 of 5’ input that, when selected, allows the user to enter their desired page number. The plugin will ensure that only valid pages can be selected, a valid request will result in the paged callback. First, previous, next and last buttons work out of the box, but are optional.

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
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>jqPagination</title>
<link rel="stylesheet" href="jqpagination.css">
</head>

<body>

<center>
<!-- 分页组件 -->
<div class="gigantic pagination">
<a href="#" class="first" data-action="first">&laquo;</a>
<a href="#" class="previous" data-action="previous">&lsaquo;</a>
<input type="text" readonly="readonly"/>
<a href="#" class="next" data-action="next">&rsaquo;</a>
<a href="#" class="last" data-action="last">&raquo;</a>
</div>
</center>

<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.jqpagination.js"></script>
<script>
$('.pagination').jqPagination({
max_page: 30, // 总页数
page_string: '{max_page} 页之 {current_page}', // 页数显示样式
paged: function(page) {
alert(page);
}
});
</script>
</body>

</html>
  • 设置总页数为 100: $(‘.pagination’).jqPagination(‘option’, ‘max_page’, 100);
  • 设置当前页为第 5 页: $(‘.pagination’).jqPagination(‘option’, ‘current_page’, 5);
  • 这 2 个设置都会触发 paged() 回调函数

simplePagination

主页为 http://flaviusmatis.github.io/simplePagination.js/

A simple jQuery pagination plugin, 3 CSS themes and Bootstrap support.

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
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>simplePagination</title>
<link rel="stylesheet" href="simplePagination.css">
<style media="screen">
a {
text-decoration: none;
}
</style>
</head>

<body>
<center>
<!-- 分页组件,inline-block 是为了居中显示 -->
<div id="paginator" style="display: inline-block;"></div>
</center>

<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.simplePagination.js"></script>
<script>
$('#paginator').pagination({
pages: 50,
currentPage: 30,
prevText: '上一页',
nextText: '下一页',
cssStyle: 'compact-theme',
onPageClick: function(page) {
alert(page);
}
});
</script>
</body>

</html>
  • 设置总页数为 100: $(‘#paginator’).pagination(‘updateItems’, 100);
  • 设置当前页为第 5 页: $(‘#paginator’).pagination(‘drawPage’, 5);
  • 这 2 个设置都不会触发 onPageClick() 回调函数