jQuery UI Widgets › Forums › DataTable › Binding DataTable to XML Attribute

Tagged: , , , , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  dqninh09@gmail.com 10 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Binding DataTable to XML Attribute Posts
  • February 4, 2014 at 12:44 am Binding DataTable to XML Attribute #48883

    dqninh09@gmail.com
    Participant

    Hi All,

    I used some demo code to bind data table to XML document. It works fine. However, I want to bind data table to a much simpler XML document and use attribute value instead of using element value. For example, my XML document has the following format:

    <table_name>
    <Record id=”1″ firstname=”Joe1″ lastname = “Smith1″ telephone=”1234567890″ />
    <Record id=”1″ firstname=”Joe2” lastname = “Smith2″ telephone=”1234567890″ />
    <Record id=”1″ firstname=”Joe3” lastname = “Smith3″ telephone=”1234567890″ />
    <Record id=”1″ firstname=”Joe4” lastname = “Smith4″ telephone=”1234567890” />
    </table_name>

    I tried to map the fields using the following xpaths, but it does not work:

    var source =
    {
    datatype: “xml”,
    datafields: [
    { name: ‘firstname’, map: ‘//Record[firstname]’, type: ‘string’ },
    { name: ‘lastname’, map: ‘//Record[lastname]’, type: ‘string’ },
    { name: ‘telephone’, map: ‘//Record[telephone]’, type: ‘string’ }
    ],

    How do I format the source datafields?

    Thanks

    February 4, 2014 at 9:12 am Binding DataTable to XML Attribute #48916

    Peter Stoev
    Keymaster

    Hi dqninh09,

    Please, find below how to load your data within jqxDataTable.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Data Binding to XML data in jqxDataTable</title>
    <meta name="description" content="This sample demonstrates how we can bind jQWidgets DataTable widget to XML Data by using jQWidgets DataAdapter plugin.">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> 
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source =
            {
                datatype: 'xml',
                url: 'data.txt',
                datafields: [
                    { name: 'firstname', map: '[firstname]', type: 'string' },
                    { name: 'lastname', map: '[lastname]', type: 'string' },
                    { name: 'telephone', map: '[telephone]', type: 'string' }
                ],
                root: 'table_name',
                record: 'Record'
            }

            var dataAdapter = new $.jqx.dataAdapter(source);

            // Create jqxGrid
            $("#dataTable").jqxDataTable(
            {
                width: 500,
                source: dataAdapter,
                pageable: true,
                pagerButtonsCount: 10,
                columnsresize: true,
                columns: [
                      { text: 'firstname', datafield: 'firstname', width: 250 },
                      { text: 'lastname', datafield: 'lastname', width: 150 },
                      { text: 'telephone', datafield: 'telephone', width: 180 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="dataTable"></div>
</body>
</html>

    where data.txt is:

    <?xml version="1.0"?>
<table_name>
<Record id="1" firstname="Joe1" lastname = "Smith1" telephone="1234567890" />
<Record id="1" firstname="Joe2" lastname = "Smith2" telephone="1234567890" />
<Record id="1" firstname="Joe3" lastname = "Smith3" telephone="1234567890" />
<Record id="1" firstname="Joe4" lastname = "Smith4" telephone="1234567890" />
</table_name>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    February 4, 2014 at 5:16 pm Binding DataTable to XML Attribute #48944

    dqninh09@gmail.com
    Participant

    Thanks Peter, that works like magic.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.