Json object converted into a Datatable

Question

Using a server call the user of my web application is creating a json object d. This object contains numerous keys (think of "Mean", "Stdev", etc.). The user is changing the underlying timeseries on a webpage.

    <script type="text/javascript">
        function myFunction(d) {
            $('#myid').html(d["Mean"])
        }
    </script>

An jquery $.POST is executed and if successful returns the json object and calls the method above. The above scheme works already. This updates

    <div class="container-fluid">
        <div class="row-fluid">
            <div id="myid">some value</div>
        </div>
    </div>

However, I would really like to update a complete datatable (datatable as in http://datatables.net/examples/advanced_init/ ).

At runtime I don't know what key are in d. Is datatables.js the right tool for dynamic data in a table?

Answer 1

Yep, that is what dataTables.js was made for. Although it is unclear what you mean exactly with datatable , table and dataTable .

dataTable.js is responsible for the display (rendering) of a table like structure on your page with lots of functionality (like sorting, searching, filtering, pagination, editing etc.) that would otherwise be very difficult to achieve. It is not a tool that helps you to maintain the field in a table (or datatable) of your DB. (But it can be)

dataTable.js uses server sided code with some cleverly helper functions to help you to use a mySql database via PHP. But it does not rely on this examples. You can use any serversided code and any database as long as it understands the query that is sent from dataTables.js and resturns the json-data that dataTables.js expects.

For complex (DB)-table manipulation you need to write your own server sided code.

Regarding your question I guess you should have a look at the serversided examples that come with dataTables.js.

For getting individual values of cell or row values on the actual page the user sees you should look at the column rendering examples.

Don't regard this as an Answer, it is just to lengthy for a comment. Be prepared that using dataTables.js is way different from the working code of your question.

Answer 2

Here's a fragment of the code. It works actually now. However, I find the concept (removing content and adding row-wise) super dodgy:

<div class="col-md-3">
                <table id="example" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Value</th>
                        </tr>
                    </thead>
                </table>
            </div>



            <script type=text/javascript>
                $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};

                $TABLE = $('#example').DataTable({
                                "info": false,
                                "bPaginate": false,
                                "paging": false,
                                "bScrollCollapse": false,
                                "search": false,
                                "sort": false,
                                "filter": false}

                );

            </script>

            <script type="text/javascript">
                function myFunction(d)
                {
                    console.log("Refill table");
                    console.log(d);
                    $TABLE.clear();
                    for (var key in d) {
                        $TABLE.row.add([key, d[key]]);
                    }
                    $TABLE.draw();
                }
            </script>

Please note that I have not included the code for the computation of d (done on the server with a $.ajax POST call.