jQuery UI Widgets Forums DataTable Binding DataTable to XML Attribute

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • 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

    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

    Binding DataTable to XML Attribute #48944

    dqninh09@gmail.com
    Participant

    Thanks Peter, that works like magic.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.