• Главная»
  • Уроки»
  • jQuery»
  • Clusterize.js – легковесный плагин для отображения больших объёмов данных

Clusterize.js – легковесный плагин для отображения больших объёмов данных

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

Последнюю версию плагина можно скачать на GitHub или через bower:

bower install clusterize

Далее необходимо подключить плагин:

<link rel="stylesheet" href="bower/clusterize/clusterize.css">
<script src="bower/clusterize/clusterize.min.js"></script>

Использование

Таблица

<!--HTML-->
<div class="clusterize">
  <table>
    <thead></thead>
  </table>
  <div id="scrollArea" class="clusterize-scroll">
    <table>
      <tbody id="contentArea" class="clusterize-content">
        <tr class="clusterize-no-data">
          <td>Loading data...</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

// JavaScript
var data = ['<tr>…</tr>', '<tr>…</tr>', …];
var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea'
});

Нумерованный список

<!--HTML-->
<div id="scrollArea" class="clusterize-scroll">
  <ol id="contentArea" class="clusterize-content">
    <li class="clusterize-no-data">Loading data...</li>
  </ol>
</div>

// JavaScript
var data = ['<li>…</li>', '<li>…</li>', …];
var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea'
});

Ненумерованный список

<!--HTML-->
<div id="scrollArea" class="clusterize-scroll">
  <ul id="contentArea" class="clusterize-content">
    <li class="clusterize-no-data">Loading data...</li>
  </ul>
</div>

// JavaScript
var data = ['<li>…</li>', '<li>…</li>', …];
var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea'
});

Блок

<!--HTML-->
<div id="scrollArea" class="clusterize-scroll">
  <div id="contentArea" class="clusterize-content">
    <div class="clusterize-no-data">Loading data...</div>
  </div>
</div>

// JavaScript
var data = ['<div>…</div>', '<div>…</div>', …];
var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea'
});

Настройки

Название Обязателен Описание
data Да Массив тегов или строка. Пример: ['<tr><td>First</td></tr>', '<tr><td>Second</td></tr>'];
scrollId или scrollElem Да Id или объект DOM родительского тега, который будет использоваться в качестве области прокрутки. Пример: scrollId: 'scrollArea' или scrollElem: document.getElementById('scrollArea')
contentId или contentElem Да Id или объект DOM куда будет вставлен контент. Пример: contentId: 'contentArea' или contentElem: document.getElementById('contentArea')
tag Нет По идее данный элемент будет сформирован сам при передаче данных плагину. Если данные поступают на страницу не при инициализации, то лучше указать значение экстра-тега. По умолчанию: null
rows_in_block Нет Количество строк в блоке. Если данное значение повышать, то браузер будет более нагружен; если уменьшать, то кластер будет использоваться чаще. Самый лучший вариант - количество строк, которой помещается в одном экране. По умолчанию: 50
blocks_in_cluster Нет Количество строг в кластере. При прокрутке к последнему блоку, будет подгружен следующий кластер. По умолчанию: 4
show_no_data_row Нет Отображать или нет строчку с сообщением, если данных не будет предоставлено. По умолчанию: true
no_data_text Нет Текст, который будет отображён в случае, если данных не будет предоставлено. По умолчанию: 'No data'
no_data_class Нет Класс, который будет присвоен если данных не будет предоставлено. По умолчанию: 'clusterize-no-data'
keep_parity Нет Экстра-тег для сохранения очерёдности строк. Полезен при использовании :nth-child(even/odd). По умолчанию: true
verify_change Нет Проверка изменились ли данные перед вставкой в DOM. По умолчанию: false

Методы

Название Параметр Описание
.update() Массив Обновить список новыми данными
.append() Массив Добавить новые данные в список
.getRowsAmount()   Вернуть общее количество строк
.clear()   Очистить список
.destroy() Булево значение Удаление объекта плагина. Параметры: true - удалить все данные из списка; false - вставляет скрытые данные в список

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.webappers.com/2015/05/04/clusterize-js-a-tiny-plugin-to-display-large-data-sets/
Перевел: Станислав Протасевич
Урок создан: 7 Мая 2015
Просмотров: 11811
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^