Fill table B on selecting row in table A

Fill table B on selecting row in table A

asystemsausasystemsaus Posts: 15Questions: 5Answers: 0
edited January 2018 in Free community support

HI, I have 2 datatables.
one cell on table A has a onClick to do a task. part of that task should also to go to a mysql db and get values and create table B.
Table B contains notes about things on the row in Table A. inside the function which runs with the onClick i get DataTable to make the table B

   $('#notestable').DataTable({
                "scrollY": "100px",
                "scrollCollapse": true,
                "paging": false
            });

then create the table.

var table = "<?php $notequery = \"select * from notes where callID ='" + callID + "'\"; $noteresult = mysqli_query($db, $notequery); echo $notequery;?><table id=\"notestable\" class=\"table table-striped table-bordered nowrap\" data-toggle=\"table\" cellspacing=\"0\"><thead><tr><th>Posted</th><th>Notes</th></tr></thead><tbody><?php  while($notes = mysqli_fetch_assoc($noteresult)) {?><tr><td><?php echo $notes['posted']; ?></td><td><?php echo $notes['note']; ?></td></tr><?php } ?></tbody></table>";

And display table B in a <div>

    document.getElementById('DisplayCallDiv').innerHTML = table;

the table gets rendered but no data is ever displayed. The query works. I can cut and paste it and run it as a sql query and it returns the 3 rows I expect to see.

As you may gather i'm pretty new at this stuff... there has to be a much easier way to do what i'm trying to achieve.
Any help most gratefully received.

Asystems

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,665Questions: 1Answers: 10,096 Site admin
    Answer ✓

    You would need to call $().DataTable() after you have written the HTML table to the document.

    That approach will work, but personally I would just use two DataTables (instead of one and then creating a new one for every click to display the second table). The second table could use ajax to get the data for it to display via Ajax and then use ajax.url().load() to set a new URL (i.e. new query parameters based on the row in the top table that was clicked) and that would draw the new data in quite efficiently.

    Allan

This discussion has been closed.