“Показать ещё” N-элементов из Array-Like объекта

260

04 апреля 2017, 11:32

Допустим, что есть Array-Like объект, структура в котором:

let array = [{
    "title": "Title",
    "description": "Details",
    "date": "31.03.2017 17:13"
},
{
    "title": "Title",
    "description": "Details",
    "date": "30.03.2017 17:23"
},
{
    "title": "Title",
    "description": "Details",
    "date": "29.03.2017 17:33"
}];

Таких элементов может быть несколько сотен или тысяч. Я ищу плагин, который выводил бы на страницу эти данные в размере 10 штук, например. И чтобы внизу страницы была кнопка "Показать ещё N элементов". Все плагины, которые я нашёл, работают в основном с серверной частью. Подскажите, пожалуйста, нужный мне плагин.

P.S. - это фича называется, вроде, infinite scroll.

Answer 1

Плагины здесь вообще не нужны.

'use strict'; 
 
let array = [ 
    {'title': 'Статья 1', 'description': 'Details', 'date': '31.03.2017 17:13'}, 
    {'title': 'Статья 2', 'description': 'Details', 'date': '30.03.2017 17:23'}, 
    {'title': 'Статья 3', 'description': 'Details', 'date': '29.03.2017 17:33'}, 
    {'title': 'Статья 4', 'description': 'Details', 'date': '31.03.2017 17:13'}, 
    {'title': 'Статья 5', 'description': 'Details', 'date': '30.03.2017 17:23'}, 
    {'title': 'Статья 6', 'description': 'Details', 'date': '29.03.2017 17:33'}, 
    {'title': 'Статья 7', 'description': 'Details', 'date': '31.03.2017 17:13'}, 
    {'title': 'Статья 8', 'description': 'Details', 'date': '30.03.2017 17:23'}, 
    {'title': 'Статья 9', 'description': 'Details', 'date': '29.03.2017 17:33'}, 
    {'title': 'Статья 10', 'description': 'Details', 'date': '31.03.2017 17:13'}, 
    {'title': 'Статья 11', 'description': 'Details', 'date': '30.03.2017 17:23'}, 
    {'title': 'Статья 12', 'description': 'Details', 'date': '29.03.2017 17:33'}, 
    {'title': 'Статья 13', 'description': 'Details', 'date': '31.03.2017 17:13'}, 
    {'title': 'Статья 14', 'description': 'Details', 'date': '30.03.2017 17:23'}, 
    {'title': 'Статья 15', 'description': 'Details', 'date': '29.03.2017 17:33'}, 
    {'title': 'Статья 16', 'description': 'Details', 'date': '31.03.2017 17:13'}, 
    {'title': 'Статья 17', 'description': 'Details', 'date': '30.03.2017 17:23'}, 
    {'title': 'Статья 18', 'description': 'Details', 'date': '29.03.2017 17:33'}, 
    {'title': 'Статья 19', 'description': 'Details', 'date': '31.03.2017 17:13'}, 
    {'title': 'Статья 20', 'description': 'Details', 'date': '30.03.2017 17:23'}, 
    {'title': 'Статья 21', 'description': 'Details', 'date': '29.03.2017 17:33'} 
]; 
 
let itemsContainer; 
let nextItem = 0; 
 
function initPage() 
{ 
    const scroller = document.getElementById('infinitescroller'); 
    itemsContainer = scroller.getElementsByClassName('content')[0]; 
    loadmore(); 
} 
 
function loadmore() 
{ 
    const nextBunchFirstItem = nextItem + 10; 
    for(let i = nextItem; i < nextBunchFirstItem && i < array.length; ++i) 
    { 
        const record = array[i]; 
     
        const recordElement = document.createElement('div'); 
        itemsContainer.appendChild(recordElement); 
     
        const titleElement = document.createElement('h2'); 
        titleElement.textContent = record['title']; 
        recordElement.appendChild(titleElement); 
         
        const descriptionElement = document.createElement('p'); 
        descriptionElement.textContent = record['description']; 
        recordElement.appendChild(descriptionElement); 
         
        const dateElement = document.createElement('time'); 
        dateElement.textContent = record['date']; 
        var parts = record['date'].match(/(\d{2})\.(\d{2})\.(\d{4}) (\d{2}):(\d{2})/); 
        dateElement.setAttribute( 
            'datetime', 
                new Date( 
                    Date.UTC(+parts[3], parts[2] - 1, +parts[1], +parts[4], +parts[5]) 
                ).toISOString() 
            ); 
        recordElement.appendChild(dateElement); 
    } 
     
    nextItem = nextBunchFirstItem; 
}

#infinitescroller 
{ 
    border: 1px solid blue; 
    border-radius: 3pt; 
    padding: 7pt; 
    text-align: center 
} 
 
#infinitescroller .content 
{ 
    text-align: left 
} 
 
#infinitescroller .content > div 
{ 
    background-color: lightgray; 
    border-radius: 3pt; 
    margin-bottom: 7pt; 
    padding: 6pt 
} 
 
#infinitescroller .content > div > h2 
{ 
    font-size: 100%; 
    margin: 0pt 
} 
 
#infinitescroller .content > div > p, 
#infinitescroller .content > div > time 
{ 
    margin-left: 7pt; 
} 
 
#infinitescroller .content > div > time 
{ 
    font-style: italic 
} 
 
#infinitescroller button 
{ 
    margin: 7pt auto 0pt auto 
}

<body onload="initPage()"> 
    <div id="infinitescroller"> 
        <div class="content"></div> 
        <button onclick="loadmore()">Показать ещё десять элементов</button> 
    </div> 
</body>

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

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как нажав на текстовом поле клавишу стрелки вверх или вниз перемещаться по списку снизу циклически

Как используя jquery написать событие которое сделало бы следующие действия - нажав на текстовом поле клавишу стрелки вверх или вниз перемещаться...

295

CSS

Контроль изменений объекта с помощью CSS

Всем приветНа сайте есть изменяющийся под нужды пользователя блок

338

CSS

Как скрыть меню поверх фрейма

У меня на странице есть iframe с видео с YouTube, и есть фиксированный хедер, который при перемещении по странице скрывается и появляетсяКогда открываю...

375

CSS

checkbox label menu JavaScript

У меня есть checkboxКогда он checked, выпадает меню

258