Dynamically xml Drop-Down List Binding Filter II

smeca50

Hello everyone,
I'm back with some almost previous problem's working solution.
Re-made it all over again with Kevin's code help and along with a couple of other things
DT need it for showing up but ain't working as it should; so I made two fiddles where everything is
depicted in detail; first one is about how things stands and how I actually want it to be while
the other is the actual code where one could check the current project stage.
So here's the description fiddle:

https://jsfiddle.net/MrcaS48/1L30ymr5/26/

and here's the actual fiddle's code:

https://jsfiddle.net/MrcaS48/ry2oegx6/13/

So you guys please take a look and help me get through with this as I stated over that first fiddle.
Thanks very much in advance.
ms

kthorngren

Looks like you want to use a complex header like this example. When enabling the scrolling options Datatables will clone the headers and use the cloned header to enable scrolling. I suggest creating the complex header in HTML like the example.

For the same reason when using scrolling you will need to create the selects differently, as discussed in this thread. Here is an example of one way you might be able to apply the filters to certain columns.
http://live.datatables.net/yivowize/1/edit

It also looks like you want to a click event to show and hide the second header row which contains the select filters. Similar to the child details code you can use the shown class to determine if the second header is hidden or not. You can use jQuery's show() and hide() for this.

Kevin

smeca50

Hello,
Thanks for your quick reply.
Your run-through are really useful.
Still can't quite get that "scrolling" point you mentioned about ..
One of the big issues there is on that drop-down dissapearance once the windows is redimensioned ..
Still being a newcomer with all this dt's stuff I'd really apreciate if you'd come up with a real solution, as it's very important for me to sort out this problem.
So please help me with this.
Thanks very much in advance

allan

I don't quite understand I'm afraid - doesn't Kevin's example show exactly what you need?

Or are you looking for someone to modify your code? If so, the problem is with the

.appendTo($("#tprsns thead tr:eq(1) th")

line. Use code similar to Kevin's to address that. At the moment your code is selecting the thead which is in the scrolling section of the table. But that is hidden to allow for scrolling - you need to select the visible header, which you can do using the API: table().header().

Allan

smeca50

Ok ..
thanks
I'll go throgh it and I'll see if I can solve it.
mircea s

smeca50

Hi again,

Have to admit ain't got no clue how to correctly am I suppose adding those drop-downs over the second html table head.
Just followed those couple of examples on how this could be done, but none of them actually worked for me.
There is an live example here:
http://live.datatables.net/saqozowe/2/edit
where this particular line of code

  .appendTo( $("#example thead tr:eq(1) th").eq(column.index()).empty()).on('change', function() { .. }

is identical with mine. Over there (in the example) dt seems to work while through my code ain't.
Through other example is also a line like this:
$('.filterhead', this.api().table().header()).each(function(i) { ..
which I also tried with no success either.
Please you guys point me over the right direction as really I don't know the right syntax for this line of code.
Thank you very much

kthorngren

I copied the code from initComplete in the example I provided ( http://live.datatables.net/yivowize/1/edit ), created a second header row and applied the thead class to each th in the second header for the loop in initComplete. Then added the class filterhead to the columns for the select input searches. Noticed the header alignment is off after adding the select inputs so I added a call to columns.adjust() to re-align the columns.

Also commented out this line:
//$('#tprsns tr').clone().appendTo('thead')

Here is the updated example:
https://jsfiddle.net/1tzn9uhf/1/

Kevin

smeca50

THANK YOU, THANK YOU THANK YOU !!!
I appreciate it a GREAT DEAL !
Really I owe you something !!!
Thank you very much to you and for all your team for all those quick replies.
Again appreciate it.
Best regards to you all
mircea s
Really sorry you guys for bugging with all this "stuff" !!

smeca50

Hello ...
I'm back again with a issue didn't figure out in the first place; over our test examples the data was represented as a xml string variable while my real thing is as a .xml data FILE remotely located through a particular site.
The refactored (almost working) fiddle is down here:

https://jsfiddle.net/MrcaS48/ry2oegx6

One could notice everything is working except for this (new) data is not loading through those drop-downs because is "not ready yet" ! Being an Ajax call it's natural things happening this way I guess ...
But, again I don't know how to make this (another) ajax call - or something - to load this data into those "damn" drop-downs! Could be done also through an fetch() with promise .. ?
Really sorry for keep poping up this way, but I was in some kind of hurry to make this tick .. so .. you know ..
So please, you guys help me once more with this "stuff" !
Thank you again very much in advance !
Sorry for being such a "pain"

kthorngren

Probably the easiest is to move the code from initComplete to the success function after you add the data to Datatables.

Kevin

smeca50

Hello K,
Tried this as you suggested, and it throws an error:

Uncaught TypeError: this.api is not a function

which is normal, as that api() is part of DT's library .. So it can't be seen
through that ajax call ..

Can you get a little into it and help me .. please .. ?
Thanks,
Mircea s

kthorngren

The API doc explains how to get an instance of the API. You have var prsntbl = $('#tprsns').dataTable(...). And are using prsntbl (an instance of the API) within the Ajax success function. Use prsntbl instead of this.api().

Kevin

smeca50

Ok ..
Simply this is drives me nuts ..
I've done the following
- replaced
this variable
api = this.api()
with
prsntbl

I'll put in here the whole ajax call (sorry for bloating in here with all this code stuff) for one'll notice the point (I know that won't be really neccesary but ..)

$.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) // chldnd = child node
            {
            dtaTble[$(chldnd).get(0).tagName] = $(chldnd).text() 
            })
      prsntbl.fnAddData(dtaTble) //prsntbl.row.add(tblDte)  
      }) 

    $('.thead2', **prsntbl**.table().header()).each(function(i) 
                    { 
                     if($(this).hasClass('filterhead'))
                      { 
                       var column = **prsntbl**.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>')
                                    })
                     }                              
                    **prsntbl**.columns.adjust()  // fix header alignment after applying the select inputs 
                      }) 
 }

I spotted with bold where I made the suggested replacements (this.api() with prsntbl)
and first error I've got is:

Uncaught TypeError: prsntbl.table is not a function

Really sorry but don't think I can figure out from there on.
Please help me with this !!
I don't know how on earth I am suppose to apologise for all this !!

kthorngren

You are running into the issue discussed in this FAQ. You have lower case d: $('#tprsns').dataTable(...).

I added this in the success function:
var table = $('#tprsns').DataTable();

https://jsfiddle.net/c456tsaq/

Kevin

smeca50

Oh, right !
Thanks Kevin very much !
I really don't know how to thank you for your time and patience with me !!
Thank you again very much.
I don't know, sometime one gets really freaked out about a lot of stuff and everything ...
Thank you and apologise for all this stupid craps ...
Best regards
Mircea S

kthorngren

You are welcome. Glad its working.

Kevin