Search child entries

Search child entries

XoxxoxuatlXoxxoxuatl Posts: 25Questions: 4Answers: 0
edited February 22 in Free community support

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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • XoxxoxuatlXoxxoxuatl Posts: 25Questions: 4Answers: 0

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

  • XoxxoxuatlXoxxoxuatl Posts: 25Questions: 4Answers: 0
    edited February 26

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    edited February 26

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    edited February 26

    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

  • XoxxoxuatlXoxxoxuatl Posts: 25Questions: 4Answers: 0

    ...despite my horrible programming, it works :smile:
    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

  • XoxxoxuatlXoxxoxuatl Posts: 25Questions: 4Answers: 0
    edited February 28

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • XoxxoxuatlXoxxoxuatl Posts: 25Questions: 4Answers: 0

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

    BR, Thomas

  • XoxxoxuatlXoxxoxuatl Posts: 25Questions: 4Answers: 0
    edited March 19

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    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

  • XoxxoxuatlXoxxoxuatl Posts: 25Questions: 4Answers: 0
    edited March 19

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    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

  • XoxxoxuatlXoxxoxuatl Posts: 25Questions: 4Answers: 0

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

    Thomas

Sign In or Register to comment.