How to display a lot of data from db in datatables without long reload?

user12

Hello i am using datatables on my laravel adminpanel i use to display some data from my db. I have a problem couse i fetch a lot of rows from db, for moment i fetch about 20492 rows and when i reload page get slow down. What should i do to make my request fast with datatables. Note: Every day i add about 500-1000 rows on this table, so it will be more large

kthorngren

Start with this FAQ about speed improvement options.

Kevin

user12

I have tryen but not work for me

colin

There are a lot of options on that page - what have you tried and what were the results?

Colin

user12

this is the script

https://prnt.sc/21kzdae

user12

@colin i have tryed this script on screenshot. can you sugest me a solution. i cant try every option couse i will slow down my server.
The result with this script is page stay at reloading

just to add, i use laravel get() function to fetch all data

colin

With serverSide, you shouldn't be fetching all data, only the records needed for the page being displayed. That would be the place to start. You haven't defined an end-point, so there's nowhere for DataTables to request for that data.

Colin

user12

And how supose to be script for that?

user12

i have try and not working for me
this is the entire script

************************

<script>
 $(document).ready( function () {
    $('#dataTableSnd').DataTable( {
    processing: true,
    serverSide: true,
    ordering: false,
    searching: false,
    paging: true,
    lengthChange: false,
    
    "columnDefs": [
        {
            orderable: false,
            className: 'select-checkbox',
            targets: 0
        }
    ],
    select: {
        style: 'multi',
        selector: 'td:first-child'
    },

    dom: 'R<"clear">Blfrtip', // import B (for button) dom and R (for reorder) dom
        colReorder: true,
        "oColReorder": {
            "bAddFixed":false
        },
        buttons: [ 
            {
                extend: 'pageLength',
                className: 'btn btn-outline-dark rounded'
            },
        @can('user_access') 
            {
                extend: 'selectAll',
                // text: '<h4 style="font-size: 12px;"> <i class="fas fa-check-square"></i> Select All </h4>', // Add custom tittle for buttons
                className: 'btn btn-primary rounded'
            },
            {
                extend: 'selectNone',
                className: 'btn btn-secondary rounded'
            },
            {
                extend: 'copyHtml5',
                className: 'btn btn-info rounded',
                exportOptions: {
                    columns: [ 0, ':visible' ],
                    modifier: { search: 'none', selected: true}
                }
            },
            {
                extend: 'excelHtml5',
                className: 'btn btn-success rounded',
                exportOptions: {
                    columns: [ 0, ':visible' ],
                    modifier: { search: 'none', selected: true}
                }
            },
            {
                extend: 'csvHtml5',
                className: 'btn btn-danger rounded',
                exportOptions: {
                    columns: [ 0, ':visible' ],
                    modifier: { search: 'none', selected: true}
                }
            },
            {
                extend: 'pdfHtml5',
                className: 'btn btn-warning rounded',
                exportOptions: {
                    columns: [ 0, ':visible' ],
                    modifier: { search: 'none', selected: true}
                }
            },
        @endcan
            {
                extend: 'colvis',
                className: 'btn btn-light rounded'
            }
        ],
    "scrollY": "100vh",
    scroller: {
            loadingIndicator: true
        },
    "scrollCollapse": true,
    } );
 
    table.buttons().container()
        .appendTo( '#dataTableSnd .col-md-6:eq(0)' );
} );
</script>
*************

i use method get() on laravel to fetch all data. Just to let you know

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

colin

You're saying you're fetching all data - so that means serverSide isn't being implemented. For server side processing, enable serverSide. The protocol is discussed here. Also see examples here. If you download the DataTables repo, there are examples of the server-side scripts in /examples/server_side/scripts,

Cheers,

Colin

user12

Hello again i change script as you edited. But this show me an error like this

DataTables warning: table id=dataTableSnd - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

I try to fetch just 1000 record now.

Sory for those question. Iam new on this and i dont understand very good how this work.

user12

This is controller i use i fetch data
$test = Table::skip(0) ->take(1000) ->get(); // 1000 just for now but will be linke this
*******$test = Table::all();******

and this is how i fetch on blade larvel
<td> {{ $test->id ?? '' }} </td>

colin

Have you followed the steps in the technical notes linked to in the error? That'll be the place to start. If so, what did you find?

Colin