Добрый вечер. Хотелось бы реализовать пейдженатор на скриптах.
чтобы выводилось что то вроде:
|
Код:
|
prev 1 2 ... 4 5 6 ... 8 9 next |
вот придумал пока вот так:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
.pager a { margin: 0 5px; cursor: pointer; }
.pager a.active { color: red; }
</style>
</head>
<body>
<div id="pager" class="pager"></div>
<div id="curr-page"></div>
<script type="text/javascript">
var currPage = 1;
total = 22;
function generateItems() {
var items = '',
i = 0;
for (i; i < total; i++){
var p = i + 1;
if (p < currPage + 2) {
items += '<a data-page="'+(i+1)+'">'+(i+1)+'</a>';
}
if (p == currPage + 2) {
items += '<span>...</span>';
}
if (p == currPage - 2) {
items += '<span>...</span>';
}
if (p > total - 2) {
items += '<a data-page="'+(i+1)+'">'+(i+1)+'</a>';
}
}
$('#pager').html( '<a class="prev">prev</a>'+ items +'<a class="next">next</a>' );
}
generateItems();
$('#curr-page').text( currPage );
$('#pager a[data-page="'+currPage+'"]').addClass('active');
$('#pager a').click(function(){
var currPage = $(this).data('page');
$('#curr-page').text( currPage );
});
$('#pager .next').click(function(){
var currPage = parseInt($('#curr-page').text()) + 1;
if (currPage >= total) currPage = total;
$('#curr-page').text( currPage );
$('#pager a').removeClass('active');
$('#pager a[data-page="'+currPage+'"]').addClass('active');
});
$('#pager .prev').click(function(){
var currPage = $('#curr-page').text() - 1;
if (currPage <= 1) currPage = 1;
$('#curr-page').text( currPage );
$('#pager a').removeClass('active');
$('#pager a[data-page="'+currPage+'"]').addClass('active');
});
</script>
</body>
</html>
но вот как то дальше не идет..