Главная » Языки программирования

Страница отборов

Содержание
  1. JavaScript | Пагинация силами клиента
  2. Решение задачи пагинации на клиенте
  3. Этап № 1 — Инициализация общего блока для всех HTML-элементов пагинации
  4. Этап № 2 — Инициализация HTML-элементов для пагинации
  5. Этап № 3 — Создание переменной с количеством элементов на странице
  6. Этап № 4 — Объявление функций для генерации разметки на основании массива товаров
  7. 4.1 — Обёртка для абзацев — HTML-разметка
  8. 4.2 — Подсчёт количества кнопок(страниц) для пагинации
  9. 4.3 — Обёртка для линий с кнопками пагинации — HTML-разметка
  10. 4.4 — Обработчик события нажатия на кнопку страницы пагинации
  11. Этап № 5 — Первичная отрисовка. Размещение элементов на страницу
  12. Полный код. Протестируй!
  13. Товары по 7 штук на странице
  14. Paging script in html
  15. HTML Basics
  16. HTML Tags
  17. HTML Attributes
  18. HTML Graphics
  19. HTML APIs
  20. HTML DOM
  21. HTML Audio/Video
  22. HTML 5
  23. HTML 5 MathML
  24. HTML Course

JavaScript | Пагинация силами клиента

Смысл такой. Мы каким-то образом получили на клиенте нужный массив данных. Оперативная память хранит этот массив во вкладке по определённому адресу.

После получения массива, мы его отрисовываем на странице «частично» — как-бы постранично. На деле мы просто режем исходный массив на куски и каждый «переклик» по странице пагинации возвращает нам набор элементов из части исходного массива.

То есть на текущей странице мы создаём информационный блок, в котором будет лежать наш результат отбора, а также сами кнопки возможного клика страницы. При клике по кнопке считывается её номер положения и по этому номеру делается сдвиг выборки элементов из оригинального массива.

Решение задачи пагинации на клиенте

Предлагаю рассмотреть пример. Начнём с самого массива данных:

Есть 31 товар из интернет-магазина:

var goods = [ "Телевизор Haier LE24K6000S", "Телевизор LG 32LM630BPLA", "Телевизор Samsung UE32M5550AU", "Телевизор Haier 32 Smart TV BX", "Телевизор Haier 55 Smart TV BX", "Телевизор LG 49NANO816NA", "Телевизор LG 55NANO866NA", "Телевизор Samsung UE55TU7097U", "Телевизор LG 55UN74006LA", "Телевизор Samsung UE55TU8570U", "Телевизор Haier LE24K6500SA", "Телевизор Samsung UE43J5272AU", "Телевизор Samsung BE32R-B", "Телевизор Samsung UE43TU7570U", "Телевизор Samsung UE75TU7100U", "Телевизор Samsung QE55Q87TAU", "Телевизор LG 49NANO866NA", "Телевизор Samsung UE50TU7170U", "Телевизор Samsung UE43TU7097U", "Телевизор Samsung UE50TU8570U", "Телевизор Samsung UE43T5300AU", "Телевизор LG 49UN73906LE", "Телевизор LG 55UN70006LA", "Телевизор LG 65UN73506LB", "Телевизор Haier 58 Smart TV BX", "Телевизор Haier 50 Smart TV BX", "Телевизор Samsung QE50Q87TAU", "Телевизор Samsung UE32T5300AU", "Телевизор LG 49UK6200PLA", "Телевизор LG 49UM7020PLF", "Телевизор Samsung UE24N4500AU" ]

Мы хотим отобразить товары по 7 штук на странице. Это наше условие. Мы так захотели. Можно и по 5, и по 10, и по 50, и т.п.. Вы можете потренироваться на своём количестве отбираемых элементов.

Читайте также:  Docxtemplater html module free

Этап № 1 — Инициализация общего блока для всех HTML-элементов пагинации

// Главный DIV для результатов пагинации var pagDiv = document.createElement("div"); pagDiv.setAttribute("class","pagDiv"); // Получаем элемент h1 var pagH1 = document.getElementsByTagName("h1")[0]; // Устанавливаем общий блок пагинации под заголовком h1 pagH1.after(pagDiv);

В элемент pagDiv будут сложены элементы из следующего этапа.

Этап № 2 — Инициализация HTML-элементов для пагинации

Мы хотим, чтобы в общем блоке под заголовком H1 были блоки, отвечающие за саму пагинацию. Создадим их:

// Линия кнопок над результатами отбора var bl1 = document.createElement("div"); bl1.setAttribute("class","bl1"); // Линия кнопок под результатами отбора var bl2 = document.createElement("div"); bl2.setAttribute("class","bl2"); // Блок для отрисовки результатов var result = document.createElement("div"); result.setAttribute("class","result");

Всего 3 элемента для удобства и простоты. Эти элементы появятся на странице чуть позже. Выглядеть это будет таким образом.

Инициализация HTML-элементов для пагинации - JavaScript

Этап № 3 — Создание переменной с количеством элементов на странице

var quantityforselection = 7;

Мы рассматриваем простой вариант пагинации, где у пользователя нет возможности выбирать нужное количество результатов на странице.

Этап № 4 — Объявление функций для генерации разметки на основании массива товаров

Мы хотим написать универсальное решение, которое не будет зависеть от длины массива. Для этого нам нужны такие функции.

Мы будем оборачивать каждый элемент массива (его значение) обычным абзацем

. Функция будет принимать отборный массив из «нужных» элементов и возвращать строку в виде HTML-разметки.

4.1 — Обёртка для абзацев — HTML-разметка

function paintResult (arr)< for(i=0, r=""; ir += ` $ ` > return r >
paintResult(["Телевизор LG 49UK6200PLA", "Телевизор LG 49UM7020PLF", "Телевизор Samsung UE24N4500AU"])

Функция оборачивает в параграфы - JavaScript 7 абзацев на странице - JavaScript

4.2 — Подсчёт количества кнопок(страниц) для пагинации

Считает нужное количество кнопок пагинации:

function numberofbuttons(arr, num)< return Math.ceil(arr.length / num) >

Получает длину массива. Делит её на 7. Дробное приводит к большему целому. Пример работы функции:

numberofbuttons([. ], 7) //3 - результат округления до целого

Функция расчёта количества кнопок пагинации - JavaScript

4.3 — Обёртка для линий с кнопками пагинации — HTML-разметка

function paintPaginationButton(count) < for(i=1, r=""; i $ ` > return r >

Функция принимает целое число, которое вычисляется предыдущей функцией. Возвращает HTML-разметку в виде линии кнопок с индексами страниц пагинации, начиная с 1. Всем кнопкам пагинации присваивается класс «pb» (это сокращение от pagination button).

paintPaginationButton(5) //

Функция оборачивает в кнопки страниц пагинации - JavaScript Линии кнопок - HTML

4.4 — Обработчик события нажатия на кнопку страницы пагинации

document.addEventListener('click', function(event)< if([. event.target.classList].includes("pb"))< var y = event.target.textContent; var start = quantityforselection*(y - 1); var end = quantityforselection*y; result.innerHTML = paintResult(goods.slice(start, end)); >else < console.log(event.target) >>);

Мы вешаем обработчик события на весь документ. Когда происходит клик в документе, тогда обработчик проверяет условие, что на нажатом элементе установлен класс «pb» (это сокращение от pagination button).

Если это кнопка пагинации, то у неё извлекается номер и записывается в переменную «y». Номер участвует в получении нужного диапазона элементов из оригинального массива. По этой причине абсолютно не важно сколько рядов с кнопками есть на странице. Сработает любая. «Кусок» массива будет получен.

Затем массив будет обойдён функцией paintResult() , которая отрисует абзацы из значений. Нам останется присвоить строку в свойство innerHTML объекта result. Визуально документ перерисуется после клика.

Этап № 5 — Первичная отрисовка. Размещение элементов на страницу

bl1.innerHTML = paintPaginationButton(numberofbuttons(goods,quantityforselection)); bl2.innerHTML = paintPaginationButton(numberofbuttons(goods,quantityforselection)); // Первичная отрисовка результата result.innerHTML = paintResult(goods.slice(0, quantityforselection)) // Помещаем линии кнопок и результат в общий блок пагинации pagDiv.append(bl1, result, bl2)

Полный код. Протестируй!

        
Товары по 7 штук на странице

Источник

Paging script in html

  • Create a Sticky Social Media Bar using HTML and CSS
  • Create a Search Bar using HTML and CSS
  • How to create Right Aligned Menu Links using HTML and CSS ?
  • How to add a Login Form to an Image using HTML and CSS ?
  • How to Create a Tab Image Gallery ?
  • How to create a Hero Image using HTML and CSS ?
  • How to design Meet the Team Page using HTML and CSS ?
  • How to Create an Image Overlay Icon using HTML and CSS ?
  • How to Create Browsers Window using HTML and CSS ?
  • How to Create Breadcrumbs using HTML and CSS ?
  • How to Create Section Counter using HTML and CSS ?
  • How to Create Toggle Switch by using HTML and CSS ?
  • How to Create a Cutout Text using HTML and CSS ?
  • How to make a Pagination using HTML and CSS ?

HTML Basics

  • HTML Tutorial
  • HTML Introduction
  • HTML full form
  • HTML Editors
  • HTML Comments
  • HTML Basics
  • HTML Layout
  • HTML Elements
  • HTML Heading
  • HTML Paragraphs
  • HTML Text Formatting
  • HTML Quotations
  • HTML Color Styles and HSL
  • HTML Links
  • HTML Images
  • HTML Tables
  • HTML Lists
  • HTML Block and Inline Elements
  • HTML Iframes
  • HTML File Paths
  • HTML Viewport meta tag for Responsive Web Design
  • HTML Computer Code Elements
  • HTML Entities
  • HTML Charsets
  • HTML | URL Encoding
  • HTML | Deprecated Tags

HTML Tags

HTML Attributes

  • HTML Attributes
  • HTML | accept Attribute
  • HTML accept-charset Attribute
  • HTML accesskey Attribute
  • HTML| action Attribute
  • HTML align Attribute
  • HTML alt attribute
  • HTML | async Attribute
  • HTML input autocomplete Attribute
  • HTML autocomplete Attribute
  • HTML autofocus Attribute
  • HTML input autofocus Attribute
  • HTML autofocus Attribute
  • HTML autofocus Attribute
  • HTML Attributes Complete Reference

HTML Graphics

HTML APIs

HTML DOM

  • DOM (Document Object Model)
  • HTML DOM activeElement Property
  • HTML DOM anchors Collection
  • HTML DOM close() Method
  • HTML DOM baseURI Property
  • HTML DOM body Property
  • HTML DOM createAttribute() Method
  • HTML DOM doctype Property
  • HTML DOM writeln() Method
  • HTML DOM console error() Method
  • HTML DOM URL Property
  • HTML DOM embeds Collection
  • HTML DOM console warn() Method
  • HTML DOM console trace() Method
  • HTML DOM Complete Reference

HTML Audio/Video

  • HTML DOM Audio Object
  • HTML DOM Video Object
  • HTML DOM Video canPlayType( ) Method
  • HTML DOM Audio audioTracks Property
  • HTML DOM Audio autoplay Property
  • HTML DOM Audio buffered Property
  • HTML DOM Audio controls Property
  • HTML DOM Audio currentSrc Property
  • HTML DOM Audio currentTime Property
  • HTML DOM Audio defaultMuted Property
  • HTML DOM Audio defaultPlaybackRate Property
  • HTML DOM Audio duration Property
  • HTML DOM Audio ended Property
  • HTML DOM Audio loop Property
  • HTML DOM Audio/Video Complete Reference

HTML 5

HTML 5 MathML

HTML Course

  • Introduction to HTML CSS | Learn to Design your First Website in Just 1 Week
  • HTML Course | Structure of an HTML Document
  • HTML Course First Web Page Printing Hello World
  • HTML Course Basics of HTML
  • HTML Course : Starting the Project – Creating Directories
  • HTML Course Understanding and Building Project Structure
  • HTML Course : Creating Navigation Menu
  • HTML Course : Building Header of the Website
  • HTML Course : Building Main Content – Section 1
  • HTML Course | Building Main Content – Section 2
  • HTML course | Building Main Content – Section 3
  • HTML Course | Building Footer
  • HTML Course | Practice Quiz 1
  • HTML Course | Practice Quiz 2
  • Create a Sticky Social Media Bar using HTML and CSS
  • Create a Search Bar using HTML and CSS
  • How to create Right Aligned Menu Links using HTML and CSS ?
  • How to add a Login Form to an Image using HTML and CSS ?
  • How to Create a Tab Image Gallery ?
  • How to create a Hero Image using HTML and CSS ?
  • How to design Meet the Team Page using HTML and CSS ?
  • How to Create an Image Overlay Icon using HTML and CSS ?
  • How to Create Browsers Window using HTML and CSS ?
  • How to Create Breadcrumbs using HTML and CSS ?
  • How to Create Section Counter using HTML and CSS ?
  • How to Create Toggle Switch by using HTML and CSS ?
  • How to Create a Cutout Text using HTML and CSS ?
  • How to make a Pagination using HTML and CSS ?

Источник

Оцените статью
© 2024 Программирование