I have a table of IDs that I want to pass as input to another URL if the ID's row is selected, via a RowSelection component. My code below works great as long as the table fits on one page. But, if the table has more elements than the pagination limit, only the row IDs from pages I've actually displayed get passed. To clarify, say the pagination limit is 10, and the table has 100 rows. If I click select all, then export, it will only pass the 10 IDs displayed. If I click select all with page 1 open, then click page 2 and 3, the first 30 IDs will get passed.
I think the problem is that I'm updating rowIds by the on('updated') listener, which is only triggered when the element is visually activated, not when its data is set to true.
Removing pagination works but makes the page lag very badly when I click Select All if there is too much data.
Javascript:
const grid = new gridjs.Grid({
columns: [{
id: 'myCheckbox',
name: 'Select',
plugin: {
component: gridjs.plugins.selection.RowSelection,
props: {
id: (row) => row.cell(1).data
}
}
}, {
name: 'Job ID'
},
],
sort: true,
pagination: {
enabled: true,
limit: 100
},
fixedHeader: true,
resizable: true,
height: "70%",
data: [
//Data goes here, inserting with jinja in the real code
],
})
var rowIds = []
grid.on('ready', () => {
// find the plugin with the give plugin ID
const checkboxPlugin = grid.config.plugin.get('myCheckbox');
// read the selected rows from the plugin's store
checkboxPlugin.props.store.on('updated', (state) => {
rowIds = state.rowIds;
})
})
grid.render(document.getElementById('table'));
function selectAll() {
grid.config.columns[0].data = true;
grid.forceRender();
}
function deselectAll() {
grid.config.columns[0].data = null;
grid.config.plugin.get('myCheckbox').props.store.state.rowIds = [];
grid.forceRender();
}
function export_() {
if (rowIds.length === 0) {
console.log("Job IDs empty!");
return
}
params = rowIds.toString();
var url = '/export?jobs=' + params;
window.open(url, 'Download');
}
var el = document.getElementById("selectAll");
if (el.addEventListener)
el.addEventListener("click", selectAll, false);
else if (el.attachEvent)
el.attachEvent('onclick', selectAll);
var el = document.getElementById("deselectAll");
if (el.addEventListener)
el.addEventListener("click", deselectAll, false);
else if (el.attachEvent)
el.attachEvent('onclick', deselectAll);
var el = document.getElementById("export");
if (el.addEventListener)
el.addEventListener("click", export_, false);
else if (el.attachEvent)
el.attachEvent('onclick', export_);