Programmatic usage of FilteringTable

I’m using FilteringTable in a dynamically generated website, here’s how I got it working…

Thanks to Tom Trenka for the original nudge in the direction of the Dojo nightly test for the programmatic usage of FilteringTable

``

/* * Dynamic Filtering Table */

// Creates the FilteringTable widget and ties it to an existing HTML Table. // Call once on load.

function doCreateFilteringTable(view) { // debugger; dojo.io.bind({ url: “/get_columns?view=“+view, load: handleCreateFilteringTable, error: handleError, timeout: handleTimeout, mimetype: “application/json” }); }

// Populates the FilteringTable widget with live data. // Call whenever you want.

function doUpdateFilteringTable(view) { // debugger; var url; url=“/get_rows?view=“+view;

dojo.io.bind({ url: url, load: handleUpdateFilteringTable, error: handleError, timeout: handleTimeout, mimetype: “application/json” }); }

function handleCreateFilteringTable(type,data,evt) { var e;

// debugger;

try {

var tableid=“tbl”+data.view; var widget_id=table_id; // they don’t need to be the same

var table; table=dojo.widget.createWidget( “dojo:FilteringTable”, { // this provides unique id for table rows valueField:“id”,

// must provide this so that we can find it again, // otherwise random id is generated widgetId: “tbl_“+data.view,

}, dojo.byId(table_id) );

// add the columns for (x in data.columns) { var col=data.columns[x]; table.columns.push(table.createMetaData(col)); }

// set the initial data set to be empty table.store.setData([]);

// fetch the data doUpdateFilteringTable(data.view); } catch (e) { var errstr=e.name+”: “+e.message; doLog(errstr,“error”); } }

function handleUpdateFilteringTable(type,data,evt) { // debugger;

var e;

/* get list of tickers and build table from them */ try { var view=data.view;

// fill in table body var tabledata=[]; var table; var id; var entry; var x; var col;

table=dojo.widget.byId(“tbl_“+view); for (id in data.list) { // construct line var line={}; entry=data.list[id];

for (x in entry) { // add one cell // This is the format expected by dojo:filteringTable var value; col=entry[x]; line[“id”]=id; line[col[“heading”]]=col[“value”] }

// now add the row tabledata.push(line); }

table.store.setData(tabledata); } catch (e) { var errstr=e.name+”: “+e.message; doLog(errstr,“error”); } }

In this example, the server is returning this for get_columns():

{ “columns”: [ {“dataType”: “String”, “field”: “Column1”}, {“dataType”: “String”, “field”: “Column2”}, {“dataType”: “String”, “field”: “Column3”}, etc… ], other stuff… }

and get_rows() returns this from the server:

{ “list”: { “id1”: [ {“heading”: “Column1”, “value”: 25}, {“heading”: “Column2”, “value”: “ABC.L”}, {“heading”: “Column3”, “value”: 395} ], “id2”: [ {“heading”: “Column1”, “value”: 57}, {“heading”: “Column2”, “value”: “MFXYZ.L”}, {“heading”: “Column3”, “value”: 42} ] } }

(I’ve removed non-relevant stuff from these responses for clarity.)