Solved

How to create a colaspible table using xml and xslt

Posted on 2011-02-11
7
205 Views
Last Modified: 2012-05-11
I have an xml structure that contains data from a database. It has multiple rows and multiple columns.

I like to figure out an xsl that would take the data from the xml and create a html table component show the data from the xml.

I would also like to have the table use +/- to expand/colaspe sections based on differnent values in fields as well as total some columns.

Is this something doable with xslt?
0
Comment
Question by:robert_jenkin
  • 4
  • 3
7 Comments
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 34874723
well, XSLT can be used to build any html table based on values and structures in the data table.
but in order to do the collapse and expand, potentially sorting and all that, you will need something that controls the rendering of the table.

Most common way to achieve this task is to use an Ajax type approach
Use javascript in an HTML page to launch the XSLT that returns an HTML table with controls (buttons or whatever)
Make the click events refresh the table by running the XSLT with different parameters rendering a different type of table

This is pretty easy to set up if you would use a library such as Sarissa,
which would make running the XSLT in JavaScript browser independent

I have done a large amount of similar projects using XSLT and Sarissa to give full control on data in an HTML page
If that is what you want, you need to give us some more detaisl so we could come up with an example

Answer to your question: Is this doable using XSLT?
Yes
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 34937832
You can't simply delete this question.
You have asked a question, I have given a complete answer
please accept the answer, or give more detail as requested
0
 

Author Comment

by:robert_jenkin
ID: 34937881
All data to/from webpage is done by means of webservices. Aweb service is call and xml is returned. The tools be used are pure java (web service) and java script. The xml returned is basically data from a sql datas (the system is a report writer) the user chooses the columns to be included, the columns to order by, group by and to tally on.  

I am trying to find a way to take the xml and present it on the web page where by sections of the data (controled by group by columns) can be colapsed/expanded and to also show the tallys. The basic structure is a control-break report. the xml is already provided in data order based on use section.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 60

Accepted Solution

by:
Geert Bormans earned 500 total points
ID: 34965540
All of this is pretty much in line with what I wrote before

use javascript (with sarissa library) to start the XSLT and based on user events,
start the same XSLT with different parameters to render the table in a different way
This seems like a pretty straightforward usecase for this approach
0
 

Author Closing Comment

by:robert_jenkin
ID: 34970106
Was of little help was expect some type of example. but I guess its the way I asked the question
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 34970188
yep, you could have asked for an example.

question was "Is this something doable with xslt?"
Not directly a request for examples, I just told you how, noone stops you from given more detail.
Note that I made the offer in my first response
"If that is what you want, you need to give us some more details so we could come up with an example"
0
 

Author Comment

by:robert_jenkin
ID: 34970353
I have reviewed your recommended library and it does not address the need, helps... Like I said when I closed this, it was the way I asked the question... I need a javascript solution that can do the following ;

sample xml (note actual will include alot more columns).


 <data>
 <row>
  <reference_no>00700010000208NA</reference_no>
  <balance>1500</balance>
  </row>
   <row>
  <reference_no>00700010000208NA</reference_no>
  <balance>1500</balance>
  </row>
 <row>
  <reference_no>00700010000208NA</reference_no>
  <balance>1500</balance>
  </row>
 <row>
  <reference_no>00700010000208</reference_no>
  <balance>1500</balance>
  </row>
 <row>
  <reference_no>00700010000208</reference_no>
  <balance>1500</balance>
  </row>
 <row>
  <reference_no>00700010000208</reference_no>
  <balance>1500</balance>
  </row>
 <row>
  <reference_no>00700010000208</reference_no>
  <balance>1500</balance>
  </row>
</data>

 I currently return the xml to the webbrowser via webservice. In the browser I like to display the data in some type of table form where sections can be colapsed and expanded and all so so totals. using the sample data below I would like to see something like this

+/-   Reference                                       Balance
-     00700010000208NA                       4,500.00
      00700010000208NA                       1,500.00
      00700010000208NA                       1,500.00
      00700010000208NA                       1,500.00
+     00700010000208                           6,000.00

The columns that control the grouping and totals are not always the same.

I like to do this with xsl and javascript. I assume I would have to write the xsl on the fly based on the columns being returned in xml. it is my understanding that xsl can handle the task of totals and the generating of the table. if I am wrong please let me know and I will look for a different solution.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

785 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question