Search child entries
Search child entries
Xoxxoxuatl
Posts: 25Questions: 4Answers: 0
Link to test case: https://live.datatables.net/minijusa/64/edit
Debugger code (debug.datatables.net): none
Error messages shown: none
Description of problem:
Dear folks,
my next approach is to bundle table rows (parent row + up to 3 child rows).
All rows shall be searchable (search and column search).
To achieve this goal following steps are necessary.
- Extending the table for the child row columns
- Hide the new child row columns
- Attach the child row data to the parent via drawCallback function
- Extend the searchs for the corresponding hidden child columns
Is this the way?
Currently, i struggle with the first steps using hidden columns and fixed header.
The fixed header is shifted for any reason? https://live.datatables.net/minijusa/64/edit
Kind Regards,
Thomas
This question has an accepted answers - jump to answer
Answers
Hi Thomas,
Child row content is not searchable in DataTables. Instead, put the content for the child row into a column, make that column hidden (
.
columns.visible) and then the content will be searchableYes, you've got
headerOffset: 92.That said, when it is removed, there is still a problem in that the header column widths are getting mashed in that example. I'm not sure why that is. I'll look into that.
Allan
Great Allan, this is the issue i wanted to address.
Hello,
i created another test case with a single child entry.
https://live.datatables.net/minijusa/66/edit
When i am going to look up the child’s device name "Device4, the search gives me no results.
Additionally, i have noticed a different alignment on the childs rack column entry.
Is there a reinitialization of the table necessary after the drawCallback, or is my usage of the child functionality simply wrong?
It would be great if you can help me with these topics!
Thanks Thomas
Device 4 isn't in the data for the table. It gets added as a child row, but as I noted, that isn't searchable.
If I was doing this myself, what I would do is have a rendering function that would take the child data to display and return the string that should be displayed for it (as is done in this example).
Then, use a rendering function (
columns.render) to create that display string inside a hidden column. Then it will be searchable, and you can use the rendering function for the child rows.Allan
I was looking at this too. The misalignment is due to the
dt-type-numericclass added to the Rack column during Datatables 2.0 type detection. Numeric and date type detected columns will have this class assigned to right align the data. I'm not sure why its detecting numeric type for data likeR1400. @allan can explain why. Possibly for natural sorting type capability?You can add that class to the child
tdlike this:https://live.datatables.net/minijusa/67/edit
Here is an example that shows how to align the columns with the child detail rows solution Allan pointed you to.
https://live.datatables.net/gupazase/338/edit
Kevin
It is seeing that column as currency (JS source) - i.e. South African Rand. Maybe I need to make that plugable, so currency symbols can be added and removed... You could set
columns.typeto bestringfor that column to bypass that for now.Allan
...despite my horrible programming, it works
https://live.datatables.net/minijusa/68/edit
Thanks to Allan (once more) and Kevin!
My next step on this trip is to enable the coloumn search for the child entries, this here seems to be a good start. https://datatables.net/forums/discussion/27851/column-search-within-child-rows
Cheers Thomas
After stumbling over different examples i found the custom search engine providing a proper solution for the child column filtering. Maybe for someone useful, too.
https://live.datatables.net/minijusa/69/edit
@allan, without pushing... were you able to check the mashed header topic?
BR, Thomas
Apologies, I've not had a chance to do so yet. I'll try to do so as soon as possible, but there is quite a backlog atm.
Allan
I've managed to do so now and this commit addressed the issue with the fixed header column alignment. I'll issue a release with the fix tomorrow.
Allan
Great to see to have this fix, thank you Allan.
BR, Thomas
Hello,
there is still a bug in my column filtering, which i can not resolve.
My goal is to have a popup triggered by a click event on a <td> element.
(In the example the popup is realized as an alert box)
The issue is, after filtering the column "Device Name" the <td> needs to be clicked twice to open the alert box.
https://live.datatables.net/gecoqimo/1/edit
The issue doesn't appear with a single column.
https://live.datatables.net/xitobogi/1/edit
Any ideas?
Thanks and BR,
Thomas
Thanks for the test case, although it appears to be working as expected for me.
alert()popup shows.Did I miss a step?
Allan
Hi Allan, thank you for taking at look at this.
Additionally, to your reproduction steps above i have to hit the "Run with JS" button first.
In my case the focus is lost on step 4, but the alert box is not shown.
After repeating step 4 clicking "Device 1" the alert box comes up.
Please see here my screen capture.
I am using MS Edge Version 122.0.2365.92, double checked on a different client using Chrome Version 122.0.6261.129.
Thomas
Hi Thomas,
Try this one: https://live.datatables.net/gecoqimo/4/edit . I've removed the
changeevent from your headerinput.It looks like it is a Blink (i.e. Chrome based) issue. I was using Firefox before and it doesn't have the same problem. The
drawaction must mess with Chrome's event tree.Allan
Great, that's it!
.
Next time i will use a different browser for cross checking
Thomas