Where do I start to create a searchable, sortable table w/expandable rows?

Where do I start to create a searchable, sortable table w/expandable rows?

CalskinatorCalskinator Posts: 18Questions: 3Answers: 0

Is there a place where I can get sample code for a table with searchable content plus sortable columns and expandable rows to show hidden content when clicked? I actually already have my content in two different tables, one is searchable and sortable, and the other is expandable, but I came to DataTables hoping I could create a table with all 3 features. Thanks!

This question has accepted answers - jump to:

Answers

  • CalskinatorCalskinator Posts: 18Questions: 3Answers: 0

    This is what I want to accomplish:

    https://i.stack.imgur.com/jzwik.jpg

  • CalskinatorCalskinator Posts: 18Questions: 3Answers: 0

    Oh I think I found it!

    https://datatables.net/examples/api/row_details.html

    Is that the right spot?

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    Hi @Calskinator ,

    Yep, looks good to me. The child rows can be configured anyway you choose, so would cater for your needs.

    Cheers,

    Colin

  • CalskinatorCalskinator Posts: 18Questions: 3Answers: 0

    Sweet thanks!! I got it. So funny, I can search forever and the moment I ask the question on a forum I find the answer :)

  • CalskinatorCalskinator Posts: 18Questions: 3Answers: 0
    edited September 2018

    Hi Colin,

    Is it possible to use just Javascript to display data in the child rows? Or does it have to be Ajax? Is there any other way? I realize Ajax is probably better, but it's got some drawbacks for my project.

    I'm working on a project with thousands of links, and the idea of having to escape all of my quotes and brackets inside of my HTML in the text file is too immense even with search & replace.

    This is what I'd like ideally... can I use Ajax to return a whole HTML page? Like... instead of loading different items in the list that are predefined, is it possible to have each child row return a separate HTML page that I format however I wish? I'm hiring a programmer to do most of this for me, since I'm not that great with JS, so if it's possible I'll refer him to this thread.

    If there's no other way, I will have to forego the child rows :( but this is seriously the best searchable table EVER I'm so stoked about using it regardless!

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    Hi @Calskinator ,

    Yep, see this blog post here - it shows how you can use Ajax to load the data for a child row. Also, the Ajax can return the page as you said, and then you initialise DataTables in the success function, like this.

    Hope that helps,

    Cheers,

    Colin

This discussion has been closed.