Displaying XML data in jQuery datatable with Expand and Collapse functionality

Question

I am using jQuery in my project. I am very new to jQuery and learning the things now. My requirement is to display XML data in datatables and with expand and collapse functionality.

My XML will be something like below:

<?xml version="1.0" encoding="UTF-8"?>
<root>
   <case>
      <case-column-one>case-one</case-column-one>
      <case-column-two>case-two</case-column-two>
      <issue>
         <issue-column-one>issue-one</issue-column-one>
         <issue-column-two>issue-two</issue-column-two>
      </issue>
   </case>
   <case>
      <case-column-three>case-three</case-column-three>
      <case-column-four>case-four</case-column-four>
      <issue>
         <issue-column-three>issue-three</issue-column-three>
         <issue-column-four>issue-four</issue-column-four>
      </issue>
   </case>
</root>

Each <case> (parent) contains few <issue> tags (children). Upon expanding the <case> , the children <issue> should be opened.

I have to render the above XML data in the jQuery datatable and add expand and collapse functionality to it. I have gone through the following link and got few things about handling the JSON response.

jQuery datatable expand and collapse functionality

By using the information given in the above link, I am able to render the parent tags <case> , but I am not able render the child tags <issue> under respective parent tags ie <case> .

Can anyone help me on this?

The code that I tried is given below:

$(".dataTables_scrollBody").find(".details-control").on("click", function() {
  var tr = $(this).closest('tr');
  var row = table.row(tr);
  if (row.child.isShown()) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // Open this row

    row.child('<h4>hello</h4>').show();
    tr.addClass('shown');
  }
});

I just tried to render a hard coded value hello in place children. But in reality I have render <issue> under <case> when it is expanded.

Can anyone help me out?

Answer 1

I can give you a head start . I have taken your sample XML and parse it in JSON Array

HTML:

<div id="demo_jui">
    <table id="events" class="display">
            <thead>
                    <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>Issuer</th>

                    </tr>
            </thead>
            <tbody>
            </tbody>
    </table>
</div>

JS:

var thisTable = $("#events").dataTable();

//Simulated data response
var data = {
    xml: "<root><case><case-column-one>case-one</case-column-one><case-column-two>case-two</case-column-two><issue><issue-column-one>issue-one</issue-column-one><issue-column-two>issue-two</issue-column-two></issue></case><case><case-column-three>case-three</case-column-three><case-column-four>case-four</case-column-four><issue><issue-column-three>issue-three</issue-column-three><issue-column-four>issue-four</issue-column-four></issue></case></root>"
}

$.ajax({
    url:"/echo/xml/",
    data:data,
    type:"POST",
    success: function(response){
        var $events = $(response).find("case");

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

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

            thisTable.fnAddData(addData);
        });
    }
});

Working Code Here