slow render

marcpirat

I use latest version of datatables with thyme leaf

My table have less then 150 row

<table id="citiesTable" class="table table-striped table-hover responsive" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th th:text="#{id}">Id</th>
                        <th th:text="#{name}">Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="city : ${cities}">
                        <td th:text="${city.id}">Id</td>
                        <td th:text="${city.name}">Name</td>
                    </tr>
                </tbody>
</table>

I init table with this code

         $(document).ready(function () {

                   var url = '/i18n/' + '[(${#authentication.getPrincipal().getLang()})]' + '.json';

                    var citiesTable = $('#citiesTable').DataTable({
                        "language": {
                            "url" :  url
                       },
                        dom: 'Bfrtip',
                        buttons: [
                            {
                                text: '[(#{city.new})]', 
                                action: function ( e, dt, node, config ) {
                                     $("#citiesFragment").load("/template/new/cities");
                                }
                            }
                        ],
                        "bLengthChange": false,
                        'pagingType': 'simple_numbers'
                    });
                    
                    $('#citiesTable tbody').on('click', 'tr', function () {
                        var data = citiesTable.row(this).data();

                        var id = data[0];

                        var url = '/template/edit/cities/' + id;
                        $("#citiesFragment").load(url);

                    });

                });

I can see during less then one second, table very big and smaller because of the paging... is there a way to avoid that?

kthorngren

It looks like you are loading the data directly into HTML then initializing Datatables. Not sure I understand what you are asking for. Are you trying to resolve the issue with slow rendering? If so then you probably need to start with looking at the server code to see if the delay is in fetching the data.

Or, are you wanting to maybe hide the table until it is rendered then show it? If yes then try using jQuery's hide() then in initComplete use jQuery's show() to display the Datatable. You may also need to use columns.adjust() after showing the table to align the columns.

If this doesn't help then please provide more details regarding the issue you want to solve.

Kevin

marcpirat

it's less then 200ms to take data from server, so not really the problem

problem is rendering

kthorngren

Can you provide a link to a page showing the issue?

Its hard to say without seeing the page and/or the data.

Maybe one way to determine if the delay is with initializing Datatables is to output the time it takes for DT to init, for example:

           var start = Date.now();  //start time
           var citiesTable = $('#citiesTable').DataTable({
               "language": {
                   "url" :  url
              },
               dom: 'Bfrtip',
               buttons: [
                   {
                       text: '[(#{city.new})]',
                       action: function ( e, dt, node, config ) {
                            $("#citiesFragment").load("/template/new/cities");
                       }
                   }
               ],
               "bLengthChange": false,
               'pagingType': 'simple_numbers',
               initComplete: function () {
                   var done = Date.now() - start;  //milliseconds to complete init
                   console.log('Milliseconds to init DT: ' + done)
               }
           });

What are the results?

Kevin

marcpirat

tried your code and that said me 315

I put a video of the problem to: https://drive.google.com/open?id=1EjXTYdOHzZQMvRfnxmTqMhFaOH8JJ4QC

allan

Can you post a link to the page showing the issue so we can help to debug it.

Thanks,
Allan

marcpirat

will provide one tonight

marcpirat

check your message.. I sent you url...

allan

Thanks - I understand now.

In essence no - the browser is working the way it is supposed to. You are download a reasonably large HTML page and it is rendering it in its unscripted state. Then Javascript kicks in and the DataTable is displayed properly. This is known as a FOUC (Flash Of Unscripted / Unstyled Content).

I would suggest that you Ajax load the data for the table which will resolve the issue. Another option is to hide the table until the DataTable is initialised.

Allan

marcpirat

ok thanks a lot, will test your tips

cesar.sdredes

Hello, could someone help me, I have a similar problem,
My ajax table displays the data, but the crash comes after displaying.
https://drive.google.com/file/d/1ME0ugT1ElczNTIxl7ZkDl_aI2dF9uIWx/view

In this case the table has only 50 records.

every time I run reload, my page crashes and then works again.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

every time I run reload, my page crashes and then works again.

Did you look at the browser's console for errors? Let us know what you find.

As Colin said we will need a link to your page to help debug.

Kevin