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.)
Tags: Dojo
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?
In my previous post, my JSTL stuff somehow didn’t show up…basically it was a forEach statement with items=”${companies}” and var=”company”
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.
What does the data format returned by get_columns and get_holdings look like?
Joshua,
I’ve added some detail about the returned data from get_columns and get_holdings above, hope that helps…
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?
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.
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.
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.
The filtering table test is available in
http://www.buildingblocks-inc.com/projects/tools/dojo/dojo-0.4.0-ajax/tests/widget/test_FilteringTable_programmatic.html
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?
How do I programatically destroy the table.
Can we add image in a filtering table?
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