A jquery plugin for pagination.
Jquery
git clone https://github.com/huyinghuan/jquery-honey-pagination.git pagination
cd pagination
bower install jquery.honey.paginationand open index.html see the demo
or open index-require.html in a http server. (because requirejs need it)
Just download it and import jquery.js and jquery.honey.pagination.js in your html page if you don't have bower.js .
git clone https://github.com/huyinghuan/jquery-honey-pagination.git paginationyou can get it from pagination/lib/jquery.honey.pagination.js
use it like this:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="pager.css" type="text/css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery.honey.pagination.js"></script>
</head>
<body>
<div id="test"></div>
<script>
var test = $("#test").pagination({pageIndex:12, pageCount: 25})
</script>
</body>
</html>If you want load it by requirejs, the demo become
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link href="pager.css" type="text/css" rel="stylesheet">
<script src="require.js"></script>
</head>
<body>
<div id="test"></div>
<script>
require.config({
paths:{
jquery: 'jquery'
}
});
require(['jquery.honey.pagination'], function(){
$('#test').pagination({pageIndex:12, pageCount: 25})
});
</script>
</body>
</html>git clone https://github.com/huyinghuan/jquery-honey-pagination.git paginationpagination/index.html or pagination/index-require.html
$(selector).pagination(setting)
the current page index.
the total page count.
default is 7
default is 7
default is 3
default is 3
default is 5
default is 15
default is #, if href is false then the a link's href is empty string
default is ...
default is hhoney-pagination
a callback. call after click page index.like this:
function(pageDate){
console.log(pageData.pageIndex)
console.log(pageData.pageCount)
}
pager = $(selector).pagination(setting)
pager.goto(2)
//or
pager.goto({pageIndex: 2})
//or
pager.goto({pageIndex: 2, pageCount: 45})
//or
$(selector).pagination('goto', 4)
//or
$(selector).pagination('goto', {pageIndex: 2})
//or
$(selector).pagination('goto' ,{pageIndex: 2, pageCount: 45})
pager.on('goto', function(event, data){
console.log(data)
})
the pagiantion structor is:
<ul class="honey-pagination">
<li><a href='#'><<</a></li>
<li class='active'><a href='#'>1</a></li>
...
<li class='active'><a href='#'>100</a></li>
<li><a href='#'>>></a></li>
</ul>if you want to change the css style. just override .honey-pagination or set ul className by setting.className
MIT
v0.0.3
- fix a bug
v0.0.2
- return a jquery object
- bind
gotofunction to pagination - add
gotoevent
v0.0.1
- finish version 0.0.1
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent