How to lower the loading time with too much data

Ed--

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 ;
        }

colin

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--

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.

colin

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--

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.