1

Допустим, что есть 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.

1 ответ 1

3

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

'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>

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.