| Row № | Scroll progress % |
|---|
| No data, follow steps on the left |
The main idea is not to pollute DOM with all used tags. Instead of that - it splits the list to clusters, then shows elements for current scroll position and adds extra rows to top and bottom of the list to emulate full height of table so that browser shows scrollbar as for full list
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>
<!--HTML-->
<div id="scrollArea" class="clusterize-scroll">
<ul id="contentArea" class="clusterize-content">
<li class="clusterize-no-data">Loading data...</li>
</ul>
</div>
<!--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 = ['<tr>…</tr>', '<tr>…</tr>', …];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});
// JavaScript
var data = ['<li>…</li>', '<li>…</li>', …];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});
// JavaScript
var data = ['<div>…</div>', '<div>…</div>', …];
var clusterize = new Clusterize({
rows: data,
scrollId: 'scrollArea',
contentId: 'contentArea'
});| Name | Required | Description |
|---|---|---|
| data | Required | Array of tags in String. Example: ['<tr><td>First</td></tr>', '<tr><td>Second</td></tr>']; |
| scrollId or scrollElem | Required | Id or DOM node of parent tag which used as scroll area. Example: scrollId: 'scrollArea' or scrollElem: document.getElementById('scrollArea') |
| contentId or contentElem | Required | Id or DOM node of tag where content will be placed. Example: contentId: 'contentArea' or contentElem: document.getElementById('contentArea') |
| tag | Optional | Tag name for supporting elements: spacing extra rows, empty-data row. It will be determined by itself once data provided, so it's optional. But if your data is not provided during initialization - it is better to specify this option because otherwise plugin will be unable to correctly render empty-data row. Default: null
Important note: Due to ie9 table restrictions currently this option is required if you need ie9 support and use tables. Example: 'tr'
|
| rows_in_block | Optional | Amount of rows in block. Increase means browser will be more loaded, decrease means browser will have to update clusters more often. This example would help to understand this property easier. Good practice will be to keep rows_in_block as amount of visible rows in your list. Default: 50 |
| blocks_in_cluster | Optional | Amount of blocks in cluster. When scroll reaches last block - content replaces with next cluster. Default: 4 |
| show_no_data_row | Optional | Specifies whether to display an "empty" placeholder row if there is no data provided. Default: true |
| no_data_text | Optional | Text for placeholder element if there is no data provided. Default: 'No data' |
| no_data_class | Optional | Class for placeholder element if there is no data provided. Default: 'clusterize-no-data' |
| keep_parity | Optional | Add extra tag to keep parity of rows. Useful when used :nth-child(even/odd). Default: true |
| verify_change | Optional | Verify data changes before add to DOM. May be useful in case of frequent "falsy" updates with unchanged data. Default: false |
| Name | Parameter | Description |
|---|---|---|
| .update() | Array | Updates list with new data |
| .append() | Array | Appends new data to the list |
| .getRowsAmount() | Returns total amount of rows | |
| .clear() | Clears the list | |
| .destroy() | Bool | Destroys clusterize instance. Parameter: true - removes all data from the list, not specify or false - inserts all hidden data to the list |
<div class="clusterize">
<table>
<thead></thead>
</table>
<div id="scrollArea" class="clusterize-scroll">
<table>
<tbody id="contentArea" class="clusterize-content">
<tr class="clusterize-extra-row clusterize-keep-parity"></tr>
<tr class="clusterize-extra-row clusterize-top-space" style="height:12345px;"></tr>
<!--tr>Your (rows_in_block * blocks_in_cluster) rows</tr-->
<tr class="clusterize-extra-row clusterize-bottom-space" style="height:12345px;"></tr>
</tbody>
</table>
</div>
</div>