How to speed up table loading?

ezelbanaan

I have a website which is using the Datatable component. I am very new to this and hence i might be facing a very trivial issue here but just wanted to ask everyone's opinion on it.

I am using it in combination with flask to load a webpage with just this table. The data from the table is coming from a locally hosted SQL server. The data contains about 2.000 rows at the moment. When loading the page for a few seconds (~10 seconds) I can see the data but not in the table format. Then after those few seconds the table component will load. Is there any way to speed this up?

The html/python i'm using:

            <table id="table_data" class="display">
                <thead>
                    <tr>
                        <th scope="col">Meting ID</th>
                        <th scope="col">Locatie</th>
                        <th scope="col">Apparaat ID</th>
                        <th scope="col">Temperatuur</th>
                        <th scope="col">Buiten Temperatuur</th>
                        <th scope="col">Tijd</th>
                        <th scope="col">Datum</th>
                        <th scope="col">Temperatuur ok</th>
                    </tr>
                </thead>
                <tbody>
                    {% for data in all_data %}
                        <tr>
                            <th scope="row">{{data[3]}}</th>
                            <td>{{data[0] + ', ' + data[1]}}</td>
                            <td>{{data[2]}}</td>
                            <td>{{data[4]}}°C</td>
                            <td>{{data[5]}}°C</td>
                            <td>{{data[6]}}</td>
                            <td>{{data[7]}}</td>
                            <td>
                                <div class="row justify-content-center">
                                    {% if data[8] %}
                                        <img class="mb-4" src="{{ url_for('static', filename='cross.png')}}" alt="Te hoog" width="30" height="30">
                                    {% else %}
                                        <img class="mb-4" src="{{ url_for('static', filename='check.png')}}" alt="Ok" width="30" height="30">
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
            <script type="text/javascript">
                $(document).ready( function () {
                $('#table_data').DataTable();
                } );
            </script>

any help to make the loading go faster (since there will be more data later) would be appreciated.

kthorngren

When loading the page for a few seconds (~10 seconds) I can see the data but not in the table format.

Sounds like this part is the Flask template loading the table.

Then after those few seconds the table component will load.

Sounds like this is the Datatables initialization. If this is correct then the delay is with how you are loading the data with Flask not with Datatables. You can comment out $('#table_data').DataTable(); to verify.

I would use ajax to fetch the data. See the Ajax docs for more details. You Flask route can then return the data as a JSON string. If the dataset gets large you can use Server side processing. You will need to create or use a prebuilt Flask SSP library, for example:
https://github.com/SergioLlana/datatables-flask-serverside

Kevin