Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.11.2015, 21:46
Аспирант
Отправить личное сообщение для piraids Посмотреть профиль Найти все сообщения от piraids
 
Регистрация: 20.08.2013
Сообщений: 88

Пейдженатор с помощью скриптов
Добрый вечер. Хотелось бы реализовать пейдженатор на скриптах.
чтобы выводилось что то вроде:
Код:
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,078

пагинатор ...
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.
Ответить с цитированием
  #3 (permalink)  
Старый 21.11.2015, 00:49
Аспирант
Отправить личное сообщение для piraids Посмотреть профиль Найти все сообщения от piraids
 
Регистрация: 20.08.2013
Сообщений: 88

рони,
спасибо за код
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проверка встроенной поддержки типа с помощью библиотеки Modernizr viy.li Общие вопросы Javascript 1 16.08.2013 12:02
Проверка встроенной поддержки типа с помощью библиотеки Modernizr viy.li Библиотеки/Тулкиты/Фреймворки 3 15.06.2013 15:48
Оптимизация выполнения скриптов Mcqueen Общие вопросы Javascript 1 10.01.2013 23:56
Прокрутка страницы с помощью клавиш Mirgorod Events/DOM/Window 0 17.06.2010 22:39
Проверка наличия логина в БД при регистрации, с помощью ajax storng Общие вопросы Javascript 4 09.04.2010 20:24