NeXTs / Clusterize.js

Tiny vanilla JS plugin to display large data sets easily
https://clusterize.js.org
MIT License
7.22k stars 412 forks source link

Manipulating data & DOM #64

Closed david-nguyen closed 8 years ago

david-nguyen commented 8 years ago

Hi there thanks for making this script, I have a question is there a way to programatically manipulate the data and/or dom?

For example I do an initial load of data and initialize clusterize. Now for each row I would like to perform an ajax call that will return additional data. so I won't be able to dom directly since only 200 rows are shown at a time - so can I access the data object directly to update a specific index? or would the best strategy be to make my ajax call and append?

NeXTs commented 8 years ago

Hi David

Clusterize only responsible for representation, I suggest you to keep data separately in place that is convenient for you and call clusterize.update only when you need to update view.

What do you need to do directly with DOM tags? Fetch some data from them?

You could have separated arrays, like

var data = [{
    id: 0,
    data: 'zero'
  }, {
    id: 1,
    data: 'one'
}];

from this data array you could generate array with layout
var layout = ['<tr>…</tr>', '<tr>…</tr>', …];

Those layout array you pass to clusterize during initialization in rows field.

So then later you will be able to use data from data array for example for ajax call. As soon as you know index of fetched item, you able to regenerate single item in layout array by index. After this you could call clusterize.update(layout) and plugin will update view.

david-nguyen commented 8 years ago

thank you, after playing round with the script I cam to the same conclusion that clusterize should just store the presentation - I modified my data array directly and called the update function instead of manipulating the dom. cheers.