javascript to run first time cell is displayed

cindy_dolan

I am creating a table for a group of system capacity planners. The table will have about 9 columns, 3 of which will contain mini-charts drawn with a product which uses Flash. I am sourcing the table via json and plan to allow the planners to choose a different planner from a drop down to view a different group of systems. The table has one row per system, and the tables will vary from 5 to 200 rows total, approximately.

The cells with charts each have a element with a specific id, e.g. id="forecast1234" where 1234 uniquely identifies the particular system. The chart software (Fusion Charts) requires 3 lines of javascript to be run to create each chart, and that javascript requires the name of the div for rendering the chart. The must be available, of course, for the javascript to work, and the javascript needs some kind of event to trigger it to create the chart.

Ideally, I would call the javascript function once for each chart, the first time its cell is displayed. I haven't been able to figure out how to do this. I can pre-load the table - bring the data over as an HTML string, plug it into the element and run the chart-creation on the cells with charts before I invoke DataTables on the table. This works, although it's a lot of overhead for the larger tables. When I want to re-source the table (for another planner), it fails. I suppose I could destroy the table then reload it (same process as before), but I think there must be a more elegant solution.

Most of the data table functions I have tried have failed because (I think) the which will have the chart is not yet part of the DOM. Is there an event / function which will allow me to trigger the chart-creation the first time a cell is displayed?

allan

Hi!

I would suggest that fnDrawCallback is the function that you want to work with here, as when this is called the TR elements have been put into the DOM for the draw that has just occurred - so you are working with what is live. fnRowCallback is almost what you want, but the elements are actually not yet in the document's DOM when it is called, so fnDrawCallback it is :-).

Now the "trick" with fnDrawCallback is that you need to know when a row has been displayed before and when it is the first time that it has been been displayed, and make a decision to call the Fusion Charts initialisation or not. There are two ways of doing this:

- Attach a flag to the DOM node which indicates if the chart has already been initialised for this row or not (and check for this flag for each TR that is being displayed), or

- Check the contents of the cell to see if the chart is present or not. If not then do the initialisation - if it is then skip on to the next.

I'm not sure what the contents of the cell will look like when the chart has been initialised, so here is an example of the first option: http://live.datatables.net/usagux/edit#javascript,html (click the 'Render' button to see it run). In this example it just sets the second column to a counter, which if you play with the sorting and filtering you will see only runs once per row, but you just need to replace that counter with the Fusion Charts initialisation.

Let us know how you get on :-)

Regards,
Allan

cindy_dolan

Wonderful. I love DataTables. I've still got a js error to chase down but I'm out of the woods on the other issue. The charts are building nicely when they are requested (and not before and not twice ...).

You asked (somewhere) how people are using DT. We're an intranet site, so I can't give you a link, but here's a couple of examples - our users deal a lot in numbers - trends, growth, usage, etc. so they consume a lot of different tables. Instead of giving them a screen which scrolls on forever or always giving them Excel output, I can give them a searchable, sortable HTML table - saves them the download and review in Excel + I can format it for them. I've created sorted tables before - but they were quite slow and couldn't handle anything more than a very few rows.

I love the selectable rows - we have systems grouped into named groups in various ways. There are enough groups that planners are not always able to pick out what they want just by remembering the group name - I give them a table of groups with assorted information and they can choose from the table which group they want for further processing (usually charting).

I also love the searchable part - especially that it is so simple to use. We have results, statuses, comments etc attached to each system from various applications by various people (planners, application owners, exception/forecasting software, etc). With DT I can pull it all into one place and let the users sort by date or source or person and search through the freeform comments.

So - keep up the good work !

allan

Superb - good to hear that does the job for you. If you would like a hand tracking down the JS error, do just let me know.

Fantastic to hear how you are using DataTables - I do appreciate it! It really is excellent to hear that DataTables is up to par for what you are trying to do :-)

Regards,
Allan