How to perform the speed for ajax source with 15.000 rows ?

megadruck

I send the data via ajax source from server, which contains about 15.000 datarows.

Therefor I use the following code:

var otable = $('#datatable_fixed_column').DataTable({
            "order": [[ 0, "DESC" ]],
            "bStateSave": true, // saves sort state using localStorage
            "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6 hidden-xs'f><'col-sm-6 col-xs-12 hidden-xs'<'toolbar'>>r>"+
            "t"+
            "<'dt-toolbar-footer'<'col-sm-4 hidden-xs'i><'col-sm-4 col-xs-6'l><'col-xs-6 col-sm-4'p>>",
            "autoWidth" : false,
            "deferRender": true,
            "stateSave": true,
            "stateSaveParams": function (settings, data) {
                data.search.search = "";
                data.columns.forEach(function(data){data.search.search = "";})
            },
            "ajax": "{{ path('CustomerData') }}",
            "dataType": "json",
            "processing": true,
            "serverSide": false,
            "cache": true,

            columns: [
                { data: 'id' },
                { data: 'customer_code','width': '70px','render':function (data, type, row) {return (data === null) ? '':data; } },
                { data: 'company_name' },
                { data: 'salutation','width': '50px','render':function (data, type, row) {switch (data) {case 'm': return "{{ 'form.salutation.male'|trans({},'FOSUserBundle') }}"; case 'f': return "{{ 'form.salutation.female'|trans({}, 'FOSUserBundle') }}";}}} ,
                { data: 'first_name' },
                { data: 'last_name' },
                { data: 'email','render':function (data, type, row) {return '<a href="mailto:'+ data +'">'+data+'</a>' }},
                { data: 'telephone','width': '140px','type': 'telephone' },
                { data: 'enabled','render':function(data){return (data === true)? '<span class="label bg-color-green">aktiv</span>': '<span class="label bg-color-red">gesperrt</span>'}}
            ],
            // stateSave: true,
            "language": {
                "lengthMenu": "{{ 'datatable.lengthMenu'|trans }}",
                "zeroRecords": "{{ 'datatable.nothing_found'|trans }}",
                "info": "{{ 'datatable.showing_per_page'|trans }}",
                "infoEmpty": "{{ 'datatable.no_record'|trans }}",
                "infoFiltered": "{{ 'datatable.info_filtered'|trans }}",
                "sSearch": "",
                "searchPlaceholder": "{{ 'datatable.search'|trans }}",
                "oPaginate": {
                    "sFirst":       "{{ 'datatable.sFirst'|trans }}",
                    "sPrevious":    "{{ 'datatable.sPrevious'|trans }}",
                    "sNext":        "{{ 'datatable.sNext'|trans }}",
                    "sLast":        "{{ 'datatable.sLast'|trans }}"
                },
                "sProcessing": "{{ 'datatable.is_loading'|trans }}",
            }

        });
        $.fn.dataTable.ext.type.search.telephone = function ( data ) {
            return ! data ?
                '' :
                typeof data === 'string' ?
                    data + data.replace(/[ \-]/g, '') :
                    data;
        };

        $.fn.dataTable.ext.errMode = 'none';
        $.extend(true, $.fn.dataTable.defaults, {
            mark: true
        });

Is there a way to speed it up ?
Loading time is (depends on the Computer) 2-5 Seconds.

colin

Hi @megadruck ,

The FAQ has some suggestions in this area.

Cheers,

Colin

megadruck

For my example I just transfered data in json response, which I need. So I could reduce it from 8.8 MByte to 3.2MByte.
Then I used htaccess

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE application/json
</IfModule>

After that the response was 740KByte.
If I unterstand it right, I have to set "deferRender" to true

colin

Hi @megadruck ,

Yep, deferRender will defintely help as it will only build the nodes for the rows being displayed. If it's still too slow, it would be worth considering serverSide,

Cheers,

Colin