dt_test1

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<body>
 <h5>xml data prsns display over the jQ datatable grid</h5>
 <div class="table-responsive container-fluid" style="width:75%;height:101%">
  <table id="tprsns" border="1" class="table-sm display table-striped" width="50%" style="border-collapse:collapse;text-align:center"> 
  <thead>
  <tr>
  <th style="text-align:center;min-width:1em"><img src="https://iliman.ro/imgs/crss_yllw_grn.png" style="margin-left:1em"></th>
  <th>F.Name</th>
  <th>L.Name</th>
  <th>Age</th>
  <th>Address</th>
  </tr>
   <tr>
  <th class="thead2"></th>
  <th class="thead2 filterhead"></th>
  <th class="thead2 filterhead"></th>
  <th class="thead2"></th>
  <th class="thead2"></th>
  </tr>
  </thead>
 <tbody></tbody>
 </table>
 </div> 
</body>

CSS

td.details-control
{
 background: url('https://iliman.ro/imgs/open_icn.png') no-repeat center center;
 cursor: pointer;
}

tr.shown td.details-control
{
 background: url('https://iliman.ro/imgs/close_icn.png') no-repeat center center;
}

h5
{
 margin-left:8cm;
}

.dataTables_wrapper .dataTables_paginate .paginate_button
{
 padding: 0px;
 margin-top: -0.4em; 
 
 min-width: 0.1em; !important 
 max-height: 0.6em; !important 
 margin-left: 0px;
 display: inline;
 border: 0px;
 
}

.paginate_button > a 
{
 height:2.4em; !important
 padding: 0em 0em; !important 
}

.previous > a >img 
{
 margin-top: -0.23em;
}

.next > a >img 
{
 margin-top: -0.23em;
}

#prsne_info  
{
 margin-top:-3.2em; 
 margin-left:38em; 
 margin-right:-1em; 
 float: right !important;
} 

.dataTables_length /* don't think this matters .. */
{
 padding-right:2em;
}

JavaScript

$(function()
 {
  var sxml = '<?xml version="1.0" encoding="UTF-8"?> <persns> <prsn><fname>Smith</fname><lname>Milton</lname><age>44</age><addrss>5th summer st, mntb</addrss><city>Portland</city></prsn>'
+ '<prsn><fname>Ken</fname><lname>Jackson</lname><age>37</age><addrss>19th Penfield ave, brtcl</addrss><city>Kelowna</city></prsn>'
+ '<prsn><fname>Susan</fname> <lname>Arkland</lname> <age>48</age> <addrss>34th Mansfield st, sgtp</addrss><city>Raleigh</city></prsn>'
+ '<prsn><fname>Patsy</fname><lname>Brighton</lname><age>38</age><addrss>12th Peel st, pnslv</addrss><city>Philadelphia</city></prsn>'
+ '<prsn><fname>John</fname><lname>Torg</lname><age>54</age> <addrss>27th north st, cnda</addrss><city>Penticton</city></prsn></persns>', prsns = $(sxml).find("prsn"), data = []

prsns.each(function(idx, prs){
    var dteTbl = []
    $(prs).children().each(function(j, chlnd){
      dteTbl[$(chlnd).get(0).tagName] = $(chlnd).text()
    })
    data.push(dteTbl)
  })

//$('#tprsns tr').clone().appendTo('thead')

var prsntbl = $('#tprsns').dataTable({"iDisplayLength":5, lengthMenu: [1, 5, 10, 15],scrollY: 210,scroller:true,responsive: true,orderCellsTop:true,
"sLengthMenu": "_MENU_ &#523nrg","oPaginate": {"sPrevious": '<img id="i_antr" src="imgs/btn_rctngl_bl_stg_01.png">',"sNext": '<img src="imgs/btn_rctngl_bl_dr_01.png">'},"dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-12 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"p><"col-md-6"l><"col-md-10"i>>>>',data:data,columns: [{"class": 'details-control', "orderable": false,"data": null, "defaultContent": ''},{data:"FNAME"}, {data:"LNAME"}, {data:"AGE"}, {data:"ADDRSS"}, {data: "CITY", "visible": false}],"order": [[1, 'asc']],
initComplete: function()
 					{
          var api = this.api();
          $('.thead2', api.table().header()).each( function (i) {
            console.log(i)
              if ( $(this).hasClass('filterhead')) {
              var column = api.column(i);
                var select =...