How do you speed up the load time-column with long string entries

harrypotter123

Hello,

One of my columns could potentially have very long strings, and Datatables is taking a long time resizing the column width to fit the page. The first image, "datatables_before.png" shows the table when the page first loads. You can see that the "location" column extends way out of the screen snippet. Around 30-40 seconds later, the table resizes to the size that it should be, shown by the second image, "datatables_after.png" Is there a way to load the correct sized table faster?

I'm using Laravel 5 web framework, which shouldn't influence the speed much, since I've loaded tables with shorter entries much quicker.

For data loading, I'm using the following technique where I pass the data from the controller instead of the traditional way in which you specify the source in the JavaScript:
<td>{{$data->id}}</td>

This is my JS:

        var table= $('#table').DataTable({
            'scrollbar': true,
            'bSortable': true,
            "ordering": true,
            "info": true,
            "autoWidth": true,
            "sDom": 'Bfrtip',
            "buttons": [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });

These are all the scripts I'm loading (since I also need to support exporting data, etc)

        <script src="https://code.jquery.com/jquery-1.12.3.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>     
        <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.html5.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.colVis.min.js"></script>

Any help/thoughts/suggestions would be greatly appreciated!

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Could you link to the page so I can try profiling it and see what it is running so slowly please?

Thanks,
Allan