Форум

piraids · #1 (**permalink**) 19.11.2015, 21:46

Добрый вечер. Хотелось бы реализовать пейдженатор на скриптах.
чтобы выводилось что то вроде:

Код:

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>

но вот как то дальше не идет..

рони · #2 (**permalink**) 19.11.2015, 23:08

piraids,
вариант...

<!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; }
.page {
  margin: 0 5px;
  background-color: #D2691E;
   border-radius: 2px;
   padding: 4px;
}
span.cur{
  margin: 0 5px;
   border-radius: 2px;
   padding: 4px;
  background-color: #40E0D0;
}

</style>
</head>

<body>

<div id="pager" class="pager"></div>
<div id="curr-page"></div>

<script>
var currPage = 1,
total = 22;

function pagination(num, limit, range) {
    range = range || 3;
    var arr = [];
    for (var i = 1; i <= limit; i++)
        if (i <= range || i > num - range / 2 && i < num + range / 2 || i > limit - range) {
            if (arr[arr.length - 1] && i != arr[arr.length - 1] + 1) arr.push("...");
            arr.push(i)
        }
    return arr
}

function generateItems() {
    var items = pagination(currPage, total);
    items = items.map(function(el) {
        return el == currPage ? '<span class="cur" >' + el + "</span>" : el == "..." ? el : '<a class="page" data-page="' + el + '">' + el + "</a>"
    }).join("");
    $("#pager").html('<a class="prev">prev</a>' + items + '<a class="next">next</a>');
    $("#curr-page").text(currPage)
}

$(".pager").on("click", ".page", function(event) {
    event.preventDefault();
    currPage = $(this).data("page");
    generateItems()
});

$(".pager").on("click", ".prev,.next", function(event) {
    event.preventDefault();
    $(this).is(".prev") ? currPage-- : currPage++;
    currPage < 1 && (currPage = 1);
    currPage > total && (currPage = total);
    generateItems()
});
generateItems();

</script>

</body>
</html>

piraids · #3 (**permalink**) 21.11.2015, 00:49

рони,
спасибо за код

Форум

Справочник

Discord чат

Курсы javascript