How to code datalistbox onchange to clear a Zen tablepane?

I have a tablepane in my Zen page that is tied to a class query. When the page first loads, the table is empty. A button onclick event causes the tablepane query to execute and load query results into the table. I want an onchange event from a datalistbox to clear the tablepane so that it looks empty as it was when the page first loaded. I have had no luck fiddling with javascript in the datalistbox's onchange.

Timothy Leavitt · Mar 14, 2016

This should accomplish what you want:

var tablePane = zen('yourTablePaneId');

// Don't actually execute the query the next time the table is rendered.
tablePane.setProperty('initialExecute',false);

// Clear the snapshot (cached results of the query, used for quick pagination) before re-rendering.
// This is irrelevant if the tablePane isn't using snapshots.
tablePane.setProperty('clearSnapshot',true);

// Regenerate HTML for the tablePane - it'll be empty.
tablePane.refreshContents();

Or, a bit more simply:

var tablePane = zen('yourTablePaneId');

// Don't actually execute the query the next time the table is rendered.
tablePane.setProperty('initialExecute',false);

// Re-execute the query (this also clears the snapshot if snapshots are in use)
tablePane.executeQuery();

If refreshContents() / executeQuery() is called again, query results will be shown, because initialExecute is set to true each time the tablePane is drawn.

1 0