Highlighted

Populating a table with data from javascript

Explorer ,
Jul 05, 2014

Copy link to clipboard

Copied

I have a CFC that returns (via ajax) an array with a length anywhere from 1 to n. I need to display the contents of that array on a webpage in a table (one row per array element). Since I do not know the length of the array, what would be the best way to render the table? My first thought was to build the table inside a string variable and then use jQuery's html() method. I also considered using ColdFusion to format the table in the CFC and pass that back to the ajax call. Either way seems very tedious. Was wondering if there is a better way.

Views

451

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Populating a table with data from javascript

Explorer ,
Jul 05, 2014

Copy link to clipboard

Copied

I have a CFC that returns (via ajax) an array with a length anywhere from 1 to n. I need to display the contents of that array on a webpage in a table (one row per array element). Since I do not know the length of the array, what would be the best way to render the table? My first thought was to build the table inside a string variable and then use jQuery's html() method. I also considered using ColdFusion to format the table in the CFC and pass that back to the ajax call. Either way seems very tedious. Was wondering if there is a better way.

Views

452

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 05, 2014 0
Engaged ,
Jul 06, 2014

Copy link to clipboard

Copied

Building the table server-side and sending all the HTML to the client, or sending the table data to the client and then building the table, are really the only two ways of approaching this problem, as you say. Tabels suffer badly from blocking/slow loading issues as they are rendered, especially large and complex tables. Why not send the data across in a structured way, and then build the table out of CSS (using DIV tags) instead of HTML table tags? That should render the table a lot more faster. It's worth experimenting.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 06, 2014 0
BKBK LATEST
Adobe Community Professional ,
Jul 07, 2014

Copy link to clipboard

Copied

Design Patterns can help when you are faced with a decision like this. Take the Model-View-Controller pattern, more commonly known as MVC. It tells us that the server should restrict itself to business logic, hence to business code. An example of business code is a CFC that returns data in the form of an array.

To display the data as a table requires presentation logic and presentation tools. That responsibility usually falls on the client. The browser is typically the client equipped to render the data in visual form.

You could, for example, get the CFC to return an array in the default JSON format. The client could then use jQuery to convert the JSON array into a table. A quick search on the web produced the following jQuery tools: datatables, jqGrid and jsonTable.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 07, 2014 2