ajax xml display with master-detail relationship

ajax xml display with master-detail relationship

smeca50smeca50 Posts: 15Questions: 3Answers: 0

Through this jQ bootstrap 4 datatable grid I want for tabular display the following xml file:

<?xml version="1.0" encoding="UTF-8"?>
<persns> 
 <prsn> 
  <fname>Smith</fname>  <!-- first name-->
  <lname>Milton</lname> <!-- last name --> 
  <age>44</age> 
  <e-mail>smilt@gmail.com</e-mail> 
  <phnmbr>3568236712</phnmbr>
  <addrss>5th summer st, mntb</addrss>
  <city>Portland</city>
 </prsn>
 <prsn> 
  <fname>Ken</fname> 
  <lname>Jackson</lname> 
  <age>37</age>
  <e-mail>ken.jackson@yahoo.com</e-mail> 
  <phnmbr>2638762076</phnmbr> 
  <addrss>19th Penfield ave, brtcl</addrss>
  <city>Kelowna</city>
 </prsn>
 <prsn> 
  <fname>Susan</fname>
  <lname>Arkland</lname> 
  <age>48</age>
  <e-mail>s.arklnd@hotmail.com</e-mail>
  <phnmbr>50834219704</phnmbr>
  <addrss>34th Mansfield st, sgtp</addrss>
  <city>Raleigh</city>
 </prsn>
 <prsn>
  <fname>Patsy</fname> 
  <lname>Brighton</lname>
  <age>38</age>
  <e-mail>patsy.brghton@gmail.com</e-mail> 
  <phnmbr>814522096358</phnmbr> 
  <addrss>12th Peel st, pnslv</addrss>
  <city>Philadelphia</city>
 </prsn>
 <prsn>
  <fname>John</fname>
  <lname>Torg</lname>
  <age>54</age>
  <e-mail>john.torg@tzeus.com</e-mail> 
  <phnmbr>042197327784</phnmbr>
  <addrss>27th north st, cnda</addrss>
  <city>Penticton</city>
 </prsn>
</persns>

but with master-detail functionality as it is shown over the dt's link:
https://datatables.net/examples/api/row_details.html
Only that up to that fiddle there is .json data ! (and I need for .xml display)
The corresponding (almost functional) .js (through the master table I only want to display the following table headers:
fname, lname, age, city while the rest would be hidden; they'll only be displayed as related child table lines) is as follows:

$(function(){
 var prstbl = $("#prsns").dataTable(columns: [{"class":'details-control', "orderable":false, "data":null, "defaultContent":''},
              {dtaTbl:"fname"},
              {dtaTbl:"lname"},
              {dtaTbl:"age"},
              {dtaTbl:"city"},
              {dtaTbl:"e-mail", "visible":false},
              {dtaTbl:"phnmbr", "visible":false},
              {dtaTbl:"addrss", "visible":false}
             ]}),
     oTable = $('#prsne').DataTable()

 function format(d)
 { 
  return '<table cellpadding="3" cellspacing="0" border="0" style="padding-left:40px">'
    + '<tr>' + '<td>e-mail addrss</td>'
    + '<td>' + d.email + '</td>' + '</tr>'
    + '<tr>' + '<td>phn nmber</td>'
    + '<td>' + d.phnmbr + '</td>' + '</tr>'
    + '<tr>' + '<td>address</td>'
    + '<td>' + d.addrss + '</td>' + '</tr>'
    + '</table>'
}

 $.ajax({type:"GET", url:"persns.xml", dataType:"xml", success:
  function(xml)
  {
   var prsns = $(xml).find("prsn")
   prsns.each(function(idx, prs)
            {
             var prs = $(prs), dtaTbl = [] 
             prs.children().each(function(j,chdnd)
                 {
                  dtaTbl.push($(chdnd).text())  
                 })
             prstbl.fnAddData(dtaTbl)
          })
     }
 })

 $('#prsns tbody').on('click', 'td.details-control', function()
            {
             var tr = $(this).closest('tr'),
                 row = oTable.row(tr) 
             if(row.child.isShown()) // if the row is already expanded, collapse it
             {
              row.child.hide()
              tr.removeClass('shown')
             }
             else // if collapsed row, expandit it 
             {
              row.child(format(row.data())).show()
              tr.addClass('shown')
          }
       })
})

The relevant .html part is like this:

<body>
 <h5>Master-detail persons display</h5>
 <table id="prsns" border="1" class="table display" width="60%">
 <thead><tr><th></th><th>frst nme</th><th>name</th><th>age</th><th>city</th> <th>e-mail addrss</th></tr></thead> 
 <tbody></tbody>
</table>
</body>

And there is also a small .css file like this:

td.details-control
 {
background:url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control
{ background:url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
}

I repeat, all the displaying I need to be done regarding this .xml file and not .json or only .html !
I know how to do it with .json table.
So you guys please help me with this issue.
Thank you all in advance

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040
    Answer ✓

    Looks like the $.ajax({type:"GET", url:"persns.xml".... request is parsing the XML into an array called dtaTbl. Looks to me like this is an array of arrays not objects. The Data Sources doc explains how to handle the different structures.

    You have {dtaTbl:"fname"}, which is not a Datatable option. If your data from the above ajax call where added as objects then you would use columns.data, like this {data:"fname"},. Your prs.children().each(function(j,chdnd) loop should be changed to create an array of objects to match the rest of your config.

    Kevin

  • smeca50smeca50 Posts: 15Questions: 3Answers: 0

    Ok I got it. I'll double check the doc and eventually i'll try correct my code accordingly ..
    Thank you for this tip.

Sign In or Register to comment.