Load data after creating my table?

Chris230291

Hello. First of all I'd like to say I am a complete beginner to any sort of web development... But I have a working datatable!

I use jinja2 with flask to create dynamic table data and then make it nice using datatables. The problem I have is that some of the data takes a while to get on the server side which is holding up the page. What I would like to do is get that data after the table is already created and let it slowly load in. After reading the documentation I found .rows().every() which sounds useful. I thought I could loop through all of the rows after the table is loaded and request the data for that row from the server.

I had a play with the example and added it after my table script.

    <script>
        $(document).ready(function () {
            $('#table').dataTable({
                "dom": 'lfrtip',
                "pageLength": 25,
                "lengthMenu": [[10, 25, 50, 75, 100, -1], [10, 25, 50, 75, 100, "All"]],
                "order": [0, 'asc'],
                "autoWidth": false,
                "ordering": false,
                "language": {
                    search: '<i class="fa fa-filter" aria-hidden="true"></i>',
                    searchPlaceholder: 'Filter',
                    "lengthMenu": "_MENU_",
                },
                "columns": [
                    { "width": "15%", "orderDataType": "dom-text", type: 'string' },
                    { "width": "40%" },
                    { "width": "40%" },
                ],
                stateSave: true,
                "stateSaveParams": function (settings, data) {
                    delete time;
                    delete start;
                    delete data.order;
                    delete data.search;
                    delete data.columns;
                },
            });
            $('#table').show();
        });
    </script>

    <script>
        $('#table').DataTable().rows().every(function (rowIdx, tableLoop, rowLoop) {
            var data = this.data();
            console.log(data);
        });
    </script>

This actually prints each row, but it also give an error...

DataTables warning: table id=table - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

What I would like to do is make a get request to my server for each row and use the return value to fill in the value for the column/s I 'skipped'.

Is this possible?

Thanks,
Chris

colin

rows().every() iterates through all the rows in the table, but in your case, the rows don't yet exist. It might be worth looking at serverSide as only the data you want will be loaded. The protocol is discussed here. Also see examples here.

Cheers,

Colin

Chris230291

Thanks for the reply. That seems a little advanced for me right now but I will look into it.

allan

You could use row.add() to add data to the table after initialisation. Make your Ajax call to get the data and then use row.add() / rows.add() to insert the data into the table as it becomes available.

It depends a little bit on how long it takes to calculate the rows to show?

Allan