How to build datatable using jQuery from REST xml response?

Question

I have a XML response from an Ajax REST call. Similar to the one below.

    <eventBlock>
        <event eventId="641">
            <processId>myprocess</processId>
            <batchId>15581</batchId>
            <user>Ajay</user>
            <participant>XYZ</participant>
            <activity>Jogging</activity>
            <note>Athletic</note>
            <createdOn>2011-11-22 00:00:00.0</createdOn>
            <createdBy>User5</createdBy>
        </event>
    </eventBlock>

My HTML:

    <form class="searchform" id="searchform" action="javascript: submitForm();">
     .....
    </form>
    <div id="UI">
        <table id="events" class="display">
                <thead>
                        <tr>
                            <th>eventId</th>
                            <th>processId</th>
                            <th>batchId</th>
                            <th>user</th>
                            <th>participant</th>
                            <th>activity</th>
                            <th>note</th>
                            <th>createdOn</th>
                            <th>createdBy</th>
                        </tr>
                </thead>
                <tbody>
                </tbody>
        </table>
    </div>

Javascript:

<script type="text/javascript">
var thisTable;
thisTable = $("#events").dataTable(
    {
        "sPaginationType": "full_numbers",
        "bJQueryUI": true
    }
);
        function addToTable(response){
            var $events = $(response).find("event");

            $events.each(function(index, event){
                var $event = $(event),
                    addData = [];

                addData.push($event.attr("eventId"));
                addData.push($event.children("processId").text());
                addData.push($event.children("batchId").text());
                addData.push($event.children("user").text());
                addData.push($event.children("participant").text());
                addData.push($event.children("activity").text());
                addData.push($event.children("note").text());
                addData.push($event.children("createdOn").text());
                addData.push($event.children("createdBy").text());

                thisTable.fnAddData(addData);
            });
        }

        function submitForm() {
            $.ajax({
                url:'../../data.xml',
                data:{
                    batchId:1234,
                    processId:afsfafgg  
                },
                type:"GET",
                success:addToTable
            });
            return false;
        }
</script>

When I hit the submit. I get below error on firebug. Can someone help me resolve this?

oSettings is null [Break On This Error]
var iRow = oSettings.aoData.length;

Thanks in advance!

@FlorianMargaine Yep, I'm aware of that. But how do I make it work with datatables plugin? Any suggestions? — Slick
– Slick, Commented Mar 6, 2012 at 15:14
This - I was working on JSON response. Was curious on handling XML response.Tried fnServerData with datatables. — Slick
– Slick, Commented Mar 6, 2012 at 15:30

Community · Accepted Answer · 2017-05-23 12:26:00Z

3

An XML response is handled just like any other data type. As long as you specify what type it should be expecting.

This question shows you how to parse XML in JQuery. XML is handled like any other element.

Here's an example.

$.ajax({
    url:"xml.xml",
    dataType: "xml",
    type:"POST",
    success: function(response){
        var $events = $(response).find("event");

        $events.each(function(index, event){
            var $event = $(event),
            addData = [];

            $event.children().each(function(i, child){
                addData.push($(child).text());
            });

            dataTable.fnAddData(addData);
        });
    }
});

If you don't want to loop through all the children within each event, you can just assign them manually

$.ajax({
    url:"xml.xml",
    dataType: "xml",
    type:"POST",
    success: function(response){
        var $events = $(response).find("event");

        $events.each(function(index, event){
            var $event = $(event),
            addData = [];

            addData.push($event.children("processId").text());
            addData.push($event.children("batchId").text());
            addData.push($event.children("user").text());
            addData.push($event.children("participant").text());
            addData.push($event.children("activity").text());
            addData.push($event.children("note").text());
            addData.push($event.children("createdOn").text());
            addData.push($event.children("createdBy").text();

            dataTable.fnAddData(addData);
        });
    }
});

Make sure that the array you send to fnAddData has as many items as the table has headers.

Edit

After checking your HTML and Javascript, I can't reproduce the problem.

Check out this test example

I'm going to guess and say that there are more code, that you did not include, that's affecting the outcome.

I should probably point out that inline javascript functions are usually frowned upon in webdev circles. You should instead try to separate your javascript code from your html code, like in the latter example.

Use $("#form").submit(function{...}); instead of inlining the function in your html.

Read up on early event handler registration vs traditional event registration model

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Mar 6, 2012 at 15:23

ShadowScripter

7,3695 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Slick Over a year ago

Thanks again for the response @ShadowScripter. I could get and parse XML data. But at fnAddData, I get this error: oSettings is null var iRow = oSettings.aoData.length;.

ShadowScripter Over a year ago

@Ajay In my example I loop through each child node from the XML, and I also have each table header for each node. If the corresponding column lengths do not max, datatables will throw that error. Make sure you're adding as many rows as the datatable has headers. Since my example works just fine, it is most likely a problem on your end. How many table headers do you have, and which nodes do you want to display on the table?

Slick Over a year ago

Thanks. I double checked the number of nodes and the headers. I have 9 headers and I'm passing 9 variables inside fnAddData. I could see all the 9 variables being assigned values in Firebug console. Thanks much.

ShadowScripter Over a year ago

@Ajay I updated my answer to show you how to assign values manually. If you think my answer was satisfactory, please mark as answered. :)

Slick Over a year ago

Thanks again. No luck this time too. I am still getting the oSettings is null error @ var iRow = oSettings.aoData.length; addData is of length 9 and I have 9 <th> tags. :(

|

charlietfl · Accepted Answer · 2012-03-06 15:07:11Z

The REST is likely cross domain, in which case you would need to create a proxy on your server to retrieve the XML . Proxy becomes your ajax url.

If your objective is to create a "read only" table you could simply print the xml as output to an ajax request and parse output to a table yourself in ajax sucecss callback prior to calling datatables.

If you need edit capability and want the datasource passed directly to datatables plugin, you would need to parse xml server side to json.

How you handle this all depends on your needs. Proxy is relatively easy to set up either way.

If REST serves JSONP, can bypass the proxy

EDIT. Another approach is to use a service like Yahoo YQL as proxy. Can set that up in minutes

Collectives™ on Stack Overflow

How to build datatable using jQuery from REST xml response?

2 Answers 2

Edit

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related