Welcome

.

xml jQ datatable enhanced with drop-down filter data controls

by

Questions › xml jQ datatable enhanced with drop-down filter data controls
0
Vote Up
Vote Down
Garmaine asked 3 years ago

Checked back again with another datatable small request. Got the following .xml file which I want for tabular data display with jQ datatable grid:

<emplyees>
 <emplyee>
  <empNme>Cedric Kelly</empNme> 
  <posn>Senior js Developer</posn>  
  <city>Edinburgh</city>    
  <extn>6224</extn> 
  <hrngDte>2012/03/29</hrngDte>
  <SlryPYear>$433,060</SlryPYear>
 </emplyee>
 <emplyee>
  <empNme>Brielle Williamson</empNme>
  <posn>Integration Specialist</posn>
  <city>New York</city>
  <extn>4804</extn>
  <hrngDte>2012/12/02</hrngDte>
  <SlryPYear>$372,000</SlryPYear>
 </emplyee>
 <emplyee>
  <empNme>Herrod Chandler</empNme>
  <posn>Sales Assistant</posn>
  <city>San Francisco</city>
  <extn>9608</extn>
  <hrngDte>2012/08/06</hrngDte>
  <SlryPYear>$137,500</SlryPYear>
 </emplyee>
 <emplyee>
  <empNme>Rhona Davidson</empNme>
  <posn>Integration Specialist</posn>
  <city>Tokyo</city>
  <extn>6200</extn>
  <hrngDte>2010/10/14</hrngDte>
  <SlryPYear>$327,900</SlryPYear>
 </emplyee>
 <emplyee>
  <empNme>Jena Gaines</empNme>
  <posn>Office Manager</posn>
  <city>London</city>
  <extn>3814</extn>
  <hrngDte>2008/12/19</hrngDte>
  <SlryPYear>$90,560</SlryPYear>
 </emplyee>
 <emplyee>
  <empNme>Quinn Flynn</empNme>
  <posn>Support Lead</posn>
  <city>Edinburgh</city>
  <extn>9497</extn>
  <hrngDte>2013/03/03</hrngDte>
  <SlryPYear>$342,000</SlryPYear>
 </emplyee>
 <emplyee>
  <empNme>Haley Kennedy</empNme>
  <posn>Senior Marketing Designer</posn>
  <city>London</city>
  <extn>3597</extn>
  <hrngDte>2012/12/18</hrngDte>
  <SlryPYear>$313,500</SlryPYear>
 </emplyee>
 <emplyee>
  <empNme>Michael Silva</empNme>
  <posn>Marketing Designer</posn>
  <city>London</city>
  <extn>1581</extn>
  <hrngDte>2012/11/27</hrngDte>
  <SlryPYear>$198,500</SlryPYear>
 </emplyee>
 <emplyee>
  <empNme>Paul Byrd</empNme>
  <posn>Chief Financial Officer (CFO)</posn>
  <city>New York</city>
  <extn>3059</extn>
  <hrngDte>2010/06/09</hrngDte>
  <SlryPYear>$725,000</SlryPYear>
 </emplyee>
 <emplyee>
  <empNme>Bradley Greer</empNme>
  <posn>Software Engineer</posn>
  <city>London</city>
  <extn>2558</extn>
  <hrngDte>2012/10/13</hrngDte>
  <SlryPYear>$132,000</SlryPYear>
 </emplyee>
 <emplyee>
  <empNme>Doris Wilder</empNme>
  <posn>Sales Assistant</posn>
  <city>Sidney</city>
  <extn>3023</extn>
  <hrngDte>2010/09/20</hrngDte>
  <SlryPYear>$85,600</SlryPYear>
 </emplyee>
</emplyees>

Besides this displaying also need to append another row header where I have to appropriately place a couple of drop-down controls by which one needs to filter off the corresponding table columns data. Actually a way is needed to put those drop-downs only over some particular columns and not through all of them. Saying that drop-downs only for "Position's " column and on "City's Office" column. Also those little up/down sorting arrows I want them sticked over the column headers name and not slide them down through the second header row (where drop-downs resides). The datatables's like drop-down example is here:

https://datatables.net/examples/api/multi_filter_select.html

Only this is about .html data table and not .xml as my requirment.

So the relevand .html part is here:

...
<body>
 <h5 style="text-align:center;margin-bottom:1em">xml dt employees display</h5>
 <div class="table-responsive container-fluid" style="width:83%;height:101%">  
  <table id="emplys" border="1" class="table display" width="90%" style="border-collapse:collapse;text-align:center">
  <thead><tr><th>Empl Name</th><th>Position</th><th>City's Office</th><th>Phn.Extn</th><th>Hrng. Date</th><th>Annl.Salary</th></tr>
  <tr><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead>  
 </table>
 </div>
</body>
...

and the corresponding .js/ .jQ is as follows:

$(function(){
var prstbl = $('#emplys').dataTable({searching:false,info:false,"iDisplayLength":5,lengthMenu: [1, 5, 10],initComplete:function()
{   
 this.api().columns().every(function() 
 {
  var select = $('<select><option value=""></option></select>').appendTo($(this.header()).empty()).on('change', function()
                                  {
            var val = $.fn.dataTable.util.escapeRegex($(this).val())
            this.search(val ? '^' + val +'$' : '', true, false).draw()
                                  })
             this.data().unique().sort().each(function(d,j)
                                      {
                             if(this.search() === '^'+d+'$')
                        select.append('<option value="'+ d +'" selected="selected">'+ d +'</option>')
                             else 
                        select.append('<option value="'+ d +'">'+ d +'</option>')
                                     }) 
                                 })
    },
   columns: [{data:"empNme"},{data:"posn"},{data:"city"},{data:"extn"},{data:"hrngDte"},{data:"SlryPYear"}]
 })

$.ajax({type:"GET", url:"xml/emplys.xml", dataType:"xml", success:
   function(xml)
   {
    var prsns = $(xml).find("emplyee")
        prsns.each(function(idx, prs)
                 {
                  var dteTbl = [] 
                  $(prs).children().each(function(j,chlnd)
                                  {
                    dteTbl[$(chlnd).get(0).tagName] = $(chlnd).text() 
                                 })
                  prstbl.fnAddData(dteTbl) //prstbl.row.add(dteTbl) - not working
           }) 
      }
    })
})

But as one can notice that drop-down part is not working whatsoever ! It was took from datatables.net site.

So please you guys help me with this issue. Thank you very much