YUI Library Examples: DataTable Control: XML Data with XPath

When working with XML data, use the DataSource's useXPath property to enable XPath syntax in your locator strings.

Sample Code for this Example

Data:

<myroot rootatt='5'>
    <top>topvalue</top>
    <second nested='nestedsecond' />
    <allitems>
        <livehere>
            <item type='foo'>
                <name type='nametype0'>Abc</name>
                <rank>0</rank>
                <subitem>
                    <name type='subnametype0'>subABC</name>
                    <age>10</age>
                </subitem>
            </item>
            <item type='bar'>
                <name type='nametype1'>Def</name>
                <rank>1</rank>
                <subitem>
                    <name type='subnametype1'>subDEF</name>
                    <age>11</age>
                </subitem>
            </item>
            <item type='bat'>
                <name type='nametype2'>Ghi</name>
                <rank>2</rank>
                <subitem>
                    <name type='subnametype2'>subGHI</name>
                    <age>12</age>
                </subitem>
            </item>
            </livehere>
        </allitems>
    </myroot>

CSS:

Markup:

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.XPath = function() {
        var myColumnDefs = [
            {key:"type"},
            {key:"rank"},
            {key:"subnameatt"},
            {key:"age"},
            {key:"name"}
        ];

var myDataTable = new YAHOO.widget.DataTable("xpath", myColumnDefs, myDataSource);

return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

DataTable Control Examples:

More DataTable Control Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.