Objeto Json convertido en un Datatable

Question

Objeto Json convertido en un Datatable

2 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery json datatables or haz tu propia pregunta.

tschm · Answer 1

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?

mainguy · Answer 2

Yep, that is what dataTables.js was made for. Although it is unclear what you mean exactly with datatable, table e 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.

contestado el 28 de mayo de 14 a las 13:05

mainguy

Needless to say that I have spent quite a while on studying the examples. However, I am still too weak in JavaScript to make sense of all of them. It's not clear to me how to proceed. Shall I have a global variable in JavaScript pointing to the Datatable. And clear the content of the dataTable everytime before I refill it? It's all a bit too magic still - tschm

It is helpful to have the dataTables object in a global variable in case you want to acess its functionality after the initialisation. But if you want to use the serverside example you just need to init it with serversided:true and an url to your datasource. Reloading and refreshing of the content will be done by internal callbacks automatically. You only need to overwrite these callbacks if you want to do something that differs from default functionality. - chico principal

Have a further look around to grasp the concept, try to create a simple example and come back with more specified questions and some example code of what you have tried and where you are stuck. I'm glad to help you further! Good Luck and don't give up to soon. It's worth it. - chico principal

I have managed to come up with a semi-working solution. Based on total clearing and refilling whenever a function is fired off. This is still a bit unreliable though and it lacks any elegance. - tschm

tschm · Answer 3

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.