Dynamically Ajax Drop-Down List xml Binding Data Filter

smeca50

Hello folks,
Checked back again with a rather classical xml related question.
I'm sort of old-fashioned guy which has been sticked over the xml related tech.
As such, I'm particularly interested in asynchronously loading/binding some xml data through a
drop-down list in order to filter out all the xml data currently loaded over the datatable.
I'm also a newcomer about all this datatable technlgy. so I'd kindly asky you guys to (really) help me with this
matter.
Ain't got no test case to show you guys, as I think my question is pretty straightforward.
However the whole "story" is depicted through a SO link which is down bellow:

https://stackoverflow.com/questions/61149513/xml-jq-datatable-enhanced-with-drop-down-filter-data-controls

So you guys, please go there and check it for you'll eventually come up with something through this respect.
I'm really struggling with this for weeks now ...
Thank you very much
and sorry for bother with this "silly" issue

kthorngren

Took a look at your SO thread. Its difficult to look through that much code to figure out what its doing and how its handling your data. Please create a simple test case so we can help. Use the following as a template to get started:
http://live.datatables.net/

Since you have a sample of tour XML data you can modify the Ajax request code to simple parse the XML data as a Javascript variable then use row.add() to add the data. So you won't need the Ajax request.

Let us know if you have any questions building the test case.

Kevin

smeca50

Ok, here's a fiddle where one is roughly showing what that drop-down is all about
(in context of xml data loading, of course)

https://jsfiddle.net/taditdash/jmkp5csz/

But, as one'll notice, that xml data drop-down binding is not working
Only for showing my requirment.
I'd very much appreciate a code snippet for I can really use it ..

Thank you very much for your quick reply

kthorngren

Found a few issues, thanks for the test case. Here is the working example:
https://jsfiddle.net/87dqLswu/3/

1. The main problem is using initComplete to build the select inputs on an empty table. This is done before you added the XML rows so they are empty. I moved the code to parse the XML above the Datatable init code and pushed the row data into an array. Then used data to add the data during initialization. I recommend you do the same in your Ajax success function.
2. I added, via clone(), a second header to allow for the search select lists. Used orderCellsTop to move the sorting event listeners to the top header row so that the table isn't sorted while searching. Also changed the select appendTo() to append to the second header:
   $("#emplys thead tr:eq(1) th").eq(column.index()).empty()
3. You have searching: false which not only removes the default search input but also disables the ability to search the table. Commented this out and used the dom option to remove the search input but leave the other Datatables elements.

Kevin

smeca50

            Hello mr. Kevin,

Thank you oh so very much !!
Thank you again !!
Appreciate it a great deal !!
Good work !

smeca50

Hello all,
Checked back once more with a small issue related with that previous Kevin's answer on that drop-down list binding regard.
I tried that code over my own machine and I got stuck through the following line:

        $('#emplys thead tr').clone(true).appendTo('#emplys thead')

Ain't working whatsoever ! Doesn't fire no error message either.
In order to add a new html table <thead> <tr> element.
I also tried other combinations but a couple of them gave me errors.
Thing is that all is working smoothly over that fiddle example !

Could anybody help me with this, please?
Thank you very much

kthorngren

Is emplys the id of your table tag?

You can always create a second header in your HTML if you are unable to get the clone() to work. Without seeing your page it will be impossible to say what the problem might be.

Kevin