Показать сообщение отдельно
  #2 (permalink)  
Старый 19.11.2015, 23:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

пагинатор ...
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>

Последний раз редактировалось рони, 19.11.2015 в 23:14.
Ответить с цитированием