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

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

user12user12 Posts: 17Questions: 4Answers: 0
edited December 2021 in DataTables

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

Answers

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,953

    Start with this FAQ about speed improvement options.

    Kevin

  • user12user12 Posts: 17Questions: 4Answers: 0

    I have tryen but not work for me

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Colin

  • user12user12 Posts: 17Questions: 4Answers: 0

    this is the script

    https://prnt.sc/21kzdae

  • user12user12 Posts: 17Questions: 4Answers: 0
    edited December 2021

    @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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • user12user12 Posts: 17Questions: 4Answers: 0

    And how supose to be script for that?

  • user12user12 Posts: 17Questions: 4Answers: 0
    edited December 2021

    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.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • user12user12 Posts: 17Questions: 4Answers: 0
    edited December 2021

    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.

  • user12user12 Posts: 17Questions: 4Answers: 0
    edited December 2021

    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>

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

Sign In or Register to comment.