Простая нумерация страниц в JavaScript — переполнение стека

Простая нумерация страниц в JavaScript

Я отвечу на любые ваши вопросы … но вот улучшенный шаблон, которому вы должны следовать, чтобы уменьшить дублирование кода.

Тем не менее, стоит отметить, что вы не должны делать нумерацию страниц на стороне клиента. Поскольку, если у вас огромный набор данных, это означает, что вам нужно загрузить все данные до загрузки страницы. Вместо этого лучше реализовать разбиение на страницы на стороне сервера.

Скрипка: http://jsfiddle.net/Lzp0dw83/

HTML

 {amp}lt;div id="listingTable"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;a href="javascript:prevPage()" id="btn_prev"{amp}gt;Prev{amp}lt;/a{amp}gt; {amp}lt;a href="javascript:nextPage()" id="btn_next"{amp}gt;Next{amp}lt;/a{amp}gt; page: {amp}lt;span id="page"{amp}gt;{amp}lt;/span{amp}gt; 

Javascript (положить в любом месте):

 var current_page = 1; var records_per_page = 2; var objJson = [ { adName: "AdName 1"}, { adName: "AdName 2"}, { adName: "AdName 3"}, { adName: "AdName 4"}, { adName: "AdName 5"}, { adName: "AdName 6"}, { adName: "AdName 7"}, { adName: "AdName 8"}, { adName: "AdName 9"}, { adName: "AdName 10"} ]; // Can be obtained from another source, such as your objJson variable function prevPage() { if (current_page {amp}gt; 1) { current_page--; changePage(current_page); } } function nextPage() { if (current_page {amp}lt; numPages()) { current_page  ; changePage(current_page); } } function changePage(page) { var btn_next = document.getElementById("btn_next"); var btn_prev = document.getElementById("btn_prev"); var listing_table = document.getElementById("listingTable"); var page_span = document.getElementById("page"); // Validate page if (page {amp}lt; 1) page = 1; if (page {amp}gt; numPages()) page = numPages(); listing_table.innerHTML = ""; for (var i = (page-1) * records_per_page; i {amp}lt; (page * records_per_page); i  ) { listing_table.innerHTML  = objJson[i].adName   "{amp}lt;br{amp}gt;"; } page_span.innerHTML = page; if (page == 1) { btn_prev.style.visibility = "hidden"; } else { btn_prev.style.visibility = "visible"; } if (page == numPages()) { btn_next.style.visibility = "hidden"; } else { btn_next.style.visibility = "visible"; } } function numPages() { return Math.ceil(objJson.length / records_per_page); } window.onload = function() { changePage(1); }; 

ОБНОВЛЕНИЕ 2014/08/27

Выше есть ошибка, при которой ошибки цикла for выводятся, когда конкретная страница (обычно последняя страница) не содержит количество записей records_per_page , поскольку она пытается получить доступ к несуществующему индексу.

Исправление достаточно простое, добавив дополнительное условие проверки в цикл for для учета размера objJson :

Обновленная скрипка: http://jsfiddle.net/Lzp0dw83/1/

 for (var i = (page-1) * records_per_page; i {amp}lt; (page * records_per_page) {amp}amp;{amp}amp; i {amp}lt; objJson.length; i  ) 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector