How to lower the loading time with too much data

How to lower the loading time with too much data

Ed--Ed-- Posts: 3Questions: 1Answers: 0

Hello everyone,

Since I used datatables, This is the first time I will try to have many data to load. I used ajax to minimize the loading time but after I tried with <150k rows it took the datatables 4 seconds to load.

Is there any other way to minimize the loading time to 1 sec if possible ? Thank you.

         function fnInitDataTable(headers) {
            var tableReport = $('.table-reports').dataTable( {
                'ajax': {
                    'url': '/admin/retrieveUsers',
                    'contentType': 'JSON',
                    'type': 'GET',
                    'dataSrc': function(data) {
                        var return_data = [];
                        $.each( data, function(index, value){
                             return_data.push({
                                'id': value.user_id,
                                'name': value.user_name,
                                'username': value.user_username,
                                'email': value.user_email
                            }) 
                        })
                        return return_data; 
                    }
               },
               'columns': fnPopulateColumn(headers),
               'deferRender': true,
               'serverSide': false
            });
        }
        
        function fnPopulateColumn(headers) {
            var columnArray = [];
            $.each( headers, function(index, value) {
                var columnJson = {};
                columnJson['data'] = value.toLowerCase();
                columnArray.push(columnJson);
            })
            return columnArray ;
        }

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @Ed-- ,

    There's a few things you could do. The first is to get the server to send the data in the supported format, that would reduce the need to have to fiddle with it later - see this example here. Also, the FAQ has some suggestions on speed improvements there.

    Cheers,

    colin

  • Ed--Ed-- Posts: 3Questions: 1Answers: 0

    Thank you @colin for the suggestion, I tried reducing my code (remove the 'datasrc') and still load 4 seconds for 150k data.

    I tried adding 'serverSide' : true but the initial load takes about 10-15 seconds. and the paging and searching is not working properly.

    Btw, The server is returning JSONArray.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @Ed-- ,

    Yeah, you'll need to configure the serverSide correctly with a functioning server-side script. When it is in place, the load will be instant, as it only returns the data being displayed. This section here discusses what's needed for the serverSide protocol,

    Cheers,

    Colin

  • Ed--Ed-- Posts: 3Questions: 1Answers: 0

    Good day @colin

    I guess I found the answer why it took 4 seconds to display, On my server I loop the 150k data and that alone took 3 seconds.

    Thank you for the suggestions.

This discussion has been closed.