How to create dynamic html table from a xml file

I have a requirement to create a dynamic table from an xml file similar to below, where I can use xpath or similar to show filesystem content in it, with proper variable pagination, filtering, sort and selection of particular row.

<?xml-stylesheet type="text/xsl" href="csmclientiir.xsl"?>
<csmclient product="abc"   date="4/26/11 2:05 PM">
<system>
    <osname>Linux
    </osname>
    <hostname>AbhishekNix
    </hostname>
    <release>2.6.18-128.el5
    </release>
    <filesystem>
        <file mount='/home/hp1' home='(innfs2:/vol/home/shome/home/hp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/par21' home='(innfs2:/vol/home/shome/home/par21)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/h231' home='(innfs2:/vol/home/shome/home/h231)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/avallin1' home='(innfs2:/vol/home/shome/home/avallin1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/park' home='(innfs2:/vol/home/shome/home/park)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/sp1' home='(innfs2:/vol/home/shome/home/sp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/ganga1' home='(innfs2:/vol/home/shome/home/ganga1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
        <file mount='/home/nbp1' home='(innfs2:/vol/home/shome/home/nbp1)' total='1717567488' free='644306780' used='1073260708' percentage='62' />
    </filesystem>
</system>
<product>
    <showtime>Tue Apr 26 14:05:23 2011
    </showtime>
</product>
</csmclient>

Edited

Here is what I used using jqGrid

jQuery("#listTable").jqGrid({
    url: cpath, 
    datatype: "xml",
    colNames:["Total Space","Free Space","Used Space", "Used Percentage"], 
    colModel:[ {name:"Total Space",index:"Total Space", width:90, xmlmap:"system>filesystem>file>@total"},
               {name:"Free Space",i开发者_Python百科ndex:"Free Space", width:120, xmlmap:"system>filesystem>file>@free"},
               {name:"Used Space",index:"Used Space", width:180,xmlmap:"system>filesystem>file>@used"},
               {name:"Used Percentage",index:"Used Percentage", width:100, align:"right",xmlmap:"system>filesystem>file>@percentage", sorttype:"float"}
             ],
    height:250,
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30], 
    viewrecords: true, 
    gridview: true,
    loadonce: true, 
    xmlReader: { 
        root : "csmclient",
        row: "system>filesystem",
        repeatitems: false,
        id: "ASIN"
        },
    caption: "Disk Usage"
    });

it only shows heading without any data

Note: my xml file structure is fixed

---

Recently I used jqGrid for a project but I was using JSON instead of XML as it's data. But this plugin also accepts the XML type of data. It's pretty dynamic and have all the functionalities you want. You might want to check the demo here. There's a section named Data Mapping which explains how to map XML files.

Comment on the edit
I would change your code this way:

 xmlReader: {
    root : "filesystem",
    row: "file",
    repeatitems: false,
 }

Since I guess it's the file attributes you want to show in a single row. Also make sure the colModel name maps to the name of your node. I still don't know if you could map node attributes but assuming you do:

    colModel:[ {name:"total",index:"total", width:90},
           {name:"free",index:"free", width:120},
           {name:"used",index:"used"},
           {name:"percentage",index:"percentage", width:100, sorttype:"float"}
         ]

This wiki is also useful it can help you to start with jqGrid.