Генерировать номера страниц с помощью javascript/jquery?
Как генерировать номера страниц как ниже использования javascript/jquery?
Если 5-я страница выбрана, я должен показать 3,4 и 6,7 и также 1, последняя страница с предыдущим, затем... Любое предложение....
Править:
Как работать с json данными, которые используют их отделение разбиения на страницы? (т.е.) Мои json данные содержат 50 записей, которые я хочу к 10 на странице 1 и так далее... Как нумеровать страницы json данные с этими числами...
Я хочу, чтобы функция jQuery передала currentpageno,lastpagenumber и функция должна генерировать меня номера страниц как ниже для меня
Если это - первая страница
Если это находится в середине,
Если это - последняя страница,
Второе РЕДАКТИРОВАНИЕ:
Я попробовал эту функцию, но, кажется, не получает желаемый результат
function generatePages(currentPage, LastPage) {
if (LastPage <= 5) {
var pages = '';
for(var i=1;i<=5;i++)
{
pages += "" + i + ""
}
$("#PagerDiv").append(pages);
}
if (LastPage > 5) {
var pages = '';
for (var i = 1; i <= 5; i++) {
pages += "" + i + ""
}
$("#PagerDiv").append(pages);
}
}
Я имею lastPage и currentPage значения помогите мне, получив это...
3 ответа
То, что вы ищете, называется "пагинация", и есть (как всегда) плагин jQuery, который делает эту работу за вас:
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
(Скачать его здесь)
Редактировать: Поскольку вы, похоже, не можете заставить его работать, вот один способ (из нескольких разных), как вы можете использовать плагин.
Шаг 1: Сгенерируйте разметку из ваших JSON-данных следующим образом:
<div id="display">
<!-- This is the div where the visible page will be displayed -->
</div>
<div id="hiddenData">
<!-- This is the div where you output your records -->
<div class="record">
<!-- create one record-div for each record you have in your JSON data -->
</div>
<div class="record">
</div>
</div>
Идея заключается в том, чтобы скопировать соответствующую запись в display div при нажатии на страницу-ссылку. Поэтому плагин предлагает функцию pageSelect-callback. Шаг 2 заключается в реализации этой функции, например:
function pageselectCallback(pageIndex, jq){
// Clone the record that should be displayed
var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();
// Update the display container
$('#display').empty().append(newContent);
return false;
}
Это означает, что у вас есть одна страница на запись. Если вы хотите отображать несколько записей на одной странице, вам необходимо соответствующим образом изменить вышеуказанную функцию.
Третий и последний шаг заключается в правильной инициализации всего этого.
function initPagination() {
// Hide the records... they shouldn't be displayed
$("#hiddenData").css("display", "none");
// Get the number of records
var numEntries = $('#hiddenData div.result').length;
// Create pagination element
$("#pagination").pagination(numEntries, {
num_edge_entries: 2,
num_display_entries: 8, // number of page links displayed
callback: pageselectCallback,
items_per_page: 1 // Adjust this value if you change the callback!
});
}
Итак, вам просто нужно сгенерировать HTML-разметку из ваших JSON-данных и после этого вызвать init-функцию.
Это не так сложно, не так ли?
Да, @SLaks прав. здесь нет ничего сумасшедшего. У вас будет 2 переменные currentPageNumber и lastPageNumber.
$("div.paginator").append("<a...>prev</a>");
$("div.paginator").append("<a...>1</a>");
for (x = (currentPageNumber - 2; x <= (currentPageNumber + 2); x++) {
$("div.paginator").append("<a...>"+ x +"</a>");
}
$("div.paginator").append("<a...>"+ lastPageNumber +"</a>");
$("div.paginator").append("<a...>next</a>");
// you could apply styles to and a tag in the div.paginator
// you could apply a special class to the a tag that matches the currentPageNumber
// you can also bind some click events to each a tag and use the $(this).text() to grab the number of the page to go to
Используйте ЭТО или ТО плагин. Это оба простых плагина html-пагинации. Поместите все в html сразу и сделайте пагинацию с помощью одного из них.