slow render

slow render

marcpiratmarcpirat Posts: 51Questions: 18Answers: 0
edited April 2018 in Free community support

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?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 17,238Questions: 25Answers: 4,091

    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

  • marcpiratmarcpirat Posts: 51Questions: 18Answers: 0

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

    problem is rendering

  • kthorngrenkthorngren Posts: 17,238Questions: 25Answers: 4,091

    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

  • marcpiratmarcpirat Posts: 51Questions: 18Answers: 0

    tried your code and that said me 315

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

  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin

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

    Thanks,
    Allan

  • marcpiratmarcpirat Posts: 51Questions: 18Answers: 0

    will provide one tonight

  • marcpiratmarcpirat Posts: 51Questions: 18Answers: 0

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

  • allanallan Posts: 57,236Questions: 1Answers: 9,113 Site admin
    Answer ✓

    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

  • marcpiratmarcpirat Posts: 51Questions: 18Answers: 0

    ok thanks a lot, will test your tips

  • cesar.sdredescesar.sdredes Posts: 1Questions: 0Answers: 0

    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.

  • colincolin Posts: 14,526Questions: 1Answers: 2,482

    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

  • kthorngrenkthorngren Posts: 17,238Questions: 25Answers: 4,091

    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

This discussion has been closed.