Table within table within table - doable or daft?

pcal90

Hi all,
I've built a table for our warehouse staff that allows them see orders. If you click on the row, it currently opens a new table (on a new page) which shows them the individual items in each order (including quantities available, quantities to be picked, etc) and then when you click on the individual items it takes you to a new table (again, on a new screen) with details about where those items are in the warehouse.

Building this allows us free up some very costly licenses.

What I am trying to do is to streamline it - all on one page. Here is what the first table looks like -

<table id="pickexample" class="display table-responsive table">
                        <thead>
                            <tr style="text-align: center;">
                                <th class="muted">
                                </th>
                                <th scope="col" class="">
                                    <button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="">
                                        RefNo
                                    </button>
                                </th>
                                <th scope="col" class="">
                                    <button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="">
                                        <i class="fas fa-file-alt"></i>
                                    </button>
                                </th>
                                <th scope="col" style="text-align: center; font-size: 10px;">
                                    <button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="">
                                        A/C
                                    </button>
                                </th>
                                <th scope="col">
                                    <button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="Due Date">
                                        Due
                                    </button>
                                </th>
                                <th scope="col">
                                    <button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="">
                                        Status
                                    </button>
                                </th>                                
                            </tr>
                        </thead>
                        <tbody>
                            {% for value in data %}

                                <tr class="pick" style="text-align: center;">
                                    <td><a href="{{url_for('picks_line',  PickRefNo = value[1])}}" target="_blank"><i class="fas fa-info-circle"></i></a></td>
                                    <td>{{ value[0] }}</td>
                                    <td>{{ value[2] }}</td>
                                    <td>{{ value[5] }}</td>
                                    <td>{{ value[4] }}</td>
                                    <td>{{ value[3] }}</td>
                                    <td>{{ value[1] }}</td>                                    
                                </tr>                             
                        {% endfor %}
           </tbody>
</table>

Again, clicking on the 'RefNo' opens up a new table on a new page, and then another cell on that table opens up a new table on another page.

I have tried to follow along with the accepted answer here - https://datatables.net/forums/discussion/39958/display-another-data-table-on-click-of-data-of-data-tables-row-column - however trying to initialise a second table does not work and seems to stop my first one from initialising too.

I also tried to follow along with the Parent/child rows here - https://datatables.net/blog/2019-01-11 - I don't need the edit part of it.

Is what I am looking for realistic or is it something that will be too heavy to carry out? I would be conscious of the fact that opening so many tables could cause browser to crash so can I close the tables I don't need open any more to prevent something like that happening?

Would love some advice on this one!
Many thanks

tangerine

Sounds like you need to look into child rows:
https://datatables.net/examples/api/row_details.html

pcal90

Thanks @tangerine

This particular section is where I think I must be going wrong -

function format ( d ) {
    // `d` is the original data object for the row
    return '{% for value in pick_data %}'+ 
        '<tr class="pick" style ="text-align: center;">'+
        '<td></td >' +
            '<td><a class="black-text" href="{url_for(\'picks_line\',  PickRefNo = value[1])}}" target="blank">{{ value[0] }}</a></td>'+
                '<td>{value[2]}}</td>'+
                '<td>{value[5]}}</td>'+
                '<td>{value[1]}}</td>'+
                '<td>{value[4]}}</td>'+
                '<td>{value[10]}}</td>'+
                '<td>{value[9]}}</td>'+
                '<td>{value[11]}}</td>'+
                '<td>{value[13]}}</td>'+
                '<td>{value[15]}}</td>'+
                '<td>{value[16]}}</td>'+
                '<td>{value[3]}}</td>'+
                '<td>{value[6]}}</td>'+
                '<td>{value[17]}}</td>'+
                '<td>{value[8]}}</td>'+
            '</tr >'+
        '{% endfor %} ';

This is not loading the child table and not sure how I would return rows from the child table which comes from a different SQL Server table?

My Python script for getting the info for parent table and what I want to be the child table are here -

@app.route('/pick-info', methods=['GET']) 
@login_required
def picks(): # Parent table
   cursor = cnxn.cursor()
   cursor.execute(select_picks)
   data = cursor.fetchall()
   return render_template('picks.html', data=data)


@app.route('/pick-info/<int:PickRefNo>') 
@login_required
def picks_line(PickRefNo): # Child table
   cursor = cnxn.cursor()
   cursor.execute(pick_lines, (PickRefNo,))
   pick_data = cursor.fetchall()
   return render_template('picklines.html', pick_data=pick_data)

Would I be far away or moving in the right general direction?

kthorngren

This is not loading the child table and not sure how I would return rows from the child table which comes from a different SQL Server table?

Do you get errors in the browser's console? What happens? Not really sure how this would work with your templates.

I don't use templates with my Python scripts. I use Ajax to fetch the table data and return JSON data as described in the Ajax docs](https://datatables.net/manual/ajax). The first request loads the page then I have a second Python function to return the data.

Doing this I would also, if possible, return the child detail data in the ajax request. You can still show only the columns you want but the detail data is with the data for the row making it easy to access for display.

Or you could use the technique described in the Ajax loaded row details blog.

Kevin

pcal90

Thanks @kthorngren

I know next to nothing about Ajax so I will have to look into it. Appreciate the advice

pcal90

Hi again @kthorngren

So I have tried to follow along with the Ajax loaded row details blog and the first table still initialises but the 'details-control' button does not appear so I don't get as far as even seeing a 'Loading' div under the row.

Also, in my Ajax url, is it appropriate to use url:"{{url_for('picks_line', PickRefNo = value[0])}}" as this is the url that brings me to the second table, which I'd like to appear as a child row? I get a Jinja exception that value is undefined so I'm not sure if I should not use it at all or have I passed it incorrectly?