dt_test2

by mircea s

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 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>>>>',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) 
						{ 
						 if($(this).hasClass('filterhead'))
						  { 
						   var column = api.column(i)
	select = $('<select><option value=""></option></select>').appendTo($(this)).on('change',function()
								{
								 var val = $.fn.dataTable.util.escapeRegex($(this).val())
								  column.search(val ? '^' + val + '$' : '', true, false).draw()
								})
						 column.data().unique().sort().each(function(d, j)
										{
          					  select.append('<option value="' + d + '">' + d + '</option>')
										})
						 }								
						api.columns.adjust()  // fix header alignment after applying the select inputs 
					      })
					}
			}),		
  oTable = $('#tprsns').DataTable()

$.ajax({type:"GET", url:"https://iliman.ro/tmpxml/pers-en.xml", dataType:"xml", success: function(xml)
		{ 
     var prsns = $(xml).find("prsn")
     prsns.each(function(idx,prs)
               {
                var dtaTble = [] 
	             $(prs).children().each(function(j,chldnd)
				  												{
				dtaTble[$(chldnd).get(0).tagName] = $(chldnd).text() 
																	})
	      prsntbl.fnAddData(dtaTble) //prsntbl.row.add(tblDte)  
           }) 
       },
       error: function...