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 table_id="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.)

14 thoughts on “Programmatic usage of FilteringTable”

  1. Hi,

    Instead of using dojo.io.bind, I’m using Spring MVC to determine what JSP page will be displayed and what data is should display.

    So instead of data in your example, I would have companies that I would need to loop through.

    //populate my store for filteringTable

    My question is, how can I use company.id, company.symbol, company.name etc to populate a javascript array that would be my store for the table? I’m not able to figure out how to extract the value from JSTL variable into Javascript.

    Any suggestions?

  2. In my previous post, my JSTL stuff somehow didn’t show up…basically it was a forEach statement with items=”${companies}” and var=”company”

  3. I don’t use JSP or JSTL myself so don’t know the answer to your question.

    However, I wonder whether you are confusing client-side Javascript with server-side JSTL?

    In my example, the server-side is generating JSON which is being returned to the JavaScript client-side. Could you do the same from your JSP page? In this case, your question would really be: how to extract the variable from JSTL into JSON – the Javascript client should then be able to get direct access to the JSON data array.

  4. Hi Rachel,

    Do you know where I can find the complete list of data types supported by the table columns? Also, do you know if an image is displayed, if a sortable weight can be assigned?

  5. Hello all,

    I’m currently looking for a way to filter my data regarding a page size (max table length) and an offset, so I could reduced the size off the view of my table.

    Did someone managed to do it with the dojo library and the FilteringTable widget ?

    Thanks in advanced.

  6. The Link to the nightly build for demo of Filtering table is not working:
    Dojo nightly test for the programmatic usage of FilteringTable
    Can someone point to the updated page please.

  7. Apparently, they’re not going to put FilteringTable in the new 0.9 release, which the nightly build site is now using. There’s going to be a new Grid widget instead.

  8. Hi everyone,

    Each time a person wants to add data to a filteringTable the setData method is use.

    A filteringTable can’t be filled colum after column in a programmatic way?

    I need it to show a table with teacher name’s and for each teacher I need a column with his courses. The courses are contained in a Select widget

    For this kind of manipulation the setData method is inadapted

    How can I proceed?

  9. Hello.

    I am using this apprach to show the table.
    I got the problem with big tables.

    When we try sorting of big table (350rows X 6 columns)IE shows Dialog saying:

    Stop running this script?

    A script on this page is causing Internet Explorer to run slowly.
    If it continues to run, you computer may become unresponsive.
    Yes No

    The size of the table is like that:
    columns: 6
    rows: 350

    If the table have 300 rows it is ok.

    The table shows all loaded modules in the system like msinfo32.exe on XP and number of rows is 900 on my PC

    Anybody have such perfomance problem?
    Any idea how to solve?

    This IE Dialog appears each time I start Sorting of the table.

    I can send file with JSON table

    Thanks,
    Anatoly

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>