Search child entries

Xoxxoxuatl

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

allan

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 searchable .

The fixed header is shifted for any reason?

Yes, 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

Xoxxoxuatl

....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.

Great Allan, this is the issue i wanted to address.

Xoxxoxuatl

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

allan

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

kthorngren

I was looking at this too. The misalignment is due to the dt-type-numeric class 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 like R1400. @allan can explain why. Possibly for natural sorting type capability?

You can add that class to the child td like 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

allan

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.type to be string for that column to bypass that for now.

Allan

Xoxxoxuatl

...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

Xoxxoxuatl

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?

....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.
https://live.datatables.net/minijusa/64/edit

BR, Thomas

allan

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

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

Xoxxoxuatl

Great to see to have this fix, thank you Allan.

BR, Thomas

Xoxxoxuatl

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

In the examples, the "Run with JS" button needs to be explicit clicked to have the alert box functionality.

Any ideas?

Thanks and BR,
Thomas

allan

Thanks for the test case, although it appears to be working as expected for me.

1. Load https://live.datatables.net/gecoqimo/1/edit
2. Type "1" into the column header filter for "Device Name"
3. Table draws to show just a single row
4. Click "Device 1"
5. alert() popup shows.

Did I miss a step?

Allan

Xoxxoxuatl

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

allan

Hi Thomas,

Try this one: https://live.datatables.net/gecoqimo/4/edit . I've removed the change event from your header input.

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 draw action must mess with Chrome's event tree.

Allan

Xoxxoxuatl

Great, that's it!
Next time i will use a different browser for cross checking .

Thomas