Browser error code : Out of memory, when DataTables is displaying

lucasvavon

I get my data to display with ajax and I manage to display them in the browser console. For information: Ajax retrieves about 20k rows.

However, if I implement the DataTables construction, the browser indicates after 30 seconds: Out of memory.

function loadStocks() {
    $('#divModalLoading').show();
    var datas = {
        path : "manage_stock",
        page : "manage_stock_list",
        bJSON : 1,
        command_days : CommandDays
    }
    $.ajax({
        type: "POST",
        url: "route.php",
        async: true,
        data: datas,
        dataType: "json",
        cache: false
    })
        .done(function(result) {
            console.log(result)
            path_admin = result.path_admin
            var iStock = 0;
            for (var ligne in result)   {
                if (ligne != 'path_admin') {
                    aOfStocks[iStock] = [];
                    aOfStocks[iStock]["product_id"] = result[ligne]["product_id"];
                    aOfStocks[iStock]["product_reference"] = result[ligne]["product_reference"];
                    aOfStocks[iStock]["id_image"] = result[ligne]["id_image"];
                    aOfStocks[iStock]["link_rewrite"] = result[ligne]["link_rewrite"];
                    aOfStocks[iStock]["product_name"] = result[ligne]["product_name"];
                    aOfStocks[iStock]["product_attribute_id"] = result[ligne]["product_attribute_id"];
                    aOfStocks[iStock]["product_attribute_group_name"] = result[ligne]["product_attribute_group_name"];
                    aOfStocks[iStock]["product_attribute_name"] = result[ligne]["product_attribute_name"];
                    aOfStocks[iStock]["date_add"] = result[ligne]["date_add"];
                    aOfStocks[iStock]["sales_stats_duration_1"] = result[ligne]["sales_stats_duration_1"];
                    aOfStocks[iStock]["sales_stats_duration_2"] = result[ligne]["sales_stats_duration_2"];
                    aOfStocks[iStock]["sales_stats_duration_3"] = result[ligne]["sales_stats_duration_3"];
                    aOfStocks[iStock]["sales_stats_duration_all"] = result[ligne]["sales_stats_duration_all"];
                    aOfStocks[iStock]["physical_quantity"] = result[ligne]["physical_quantity"];
                    aOfStocks[iStock]["reserved_quantity"] = result[ligne]["reserved_quantity"];
                    aOfStocks[iStock]["quantity"] = result[ligne]["quantity"];
                    aOfStocks[iStock]["low_stock_threshold"] = result[ligne]["low_stock_threshold"];
                    aOfStocks[iStock]["ideal_stock"] = result[ligne]["ideal_stock"];
                    aOfStocks[iStock]["stock_ideal_conseille"] = result[ligne]["stock_ideal_conseille"];
                    aOfStocks[iStock]["etat_stock_dans_1_mois"] = result[ligne]["etat_stock_dans_1_mois"];
                    aOfStocks[iStock]["a_acheter_pour_avoir_bon_stock"] = result[ligne]["a_acheter_pour_avoir_bon_stock"];
                    aOfStocks[iStock]["a_acheter_qui_sera_vendu_dans_1_mois"] = result[ligne]["a_acheter_qui_sera_vendu_dans_1_mois"];
                    aOfStocks[iStock]["product_visibility"] = result[ligne]["product_visibility"];

                    aOfStocks[iStock]["supplier_names"] = 'Loading...';
                    aOfStocks[iStock]["supplier_references"] = 'Loading...';
                    aOfStocks[iStock]["supplier_prices_te"] = 'Loading...';

                    aOfStocks[iStock]["all"] = [];

                    aOfStocks[iStock]["all"][0] = 'Loading..._Loading..._Loading...'
                    iStock++;
                }
            }

           // INIT DATATABLE
            /* constructTableStocks(); */
            // reload datatable configuration
            /* tablesStocks = $('#datatable').DataTable(configuration); */
            $('#divModalLoading').hide();
        })
        .fail(function(err) {
            // error
            console.log('error : ' + err.status);
        });
}

And this is the datatbles config :

const configuration = {
    "order": [[1, "asc"]],
    "pageLength": 25,
    "pagingType": "simple_numbers",
    "search" : {
        'search': search
    },
    "searching": true,
    "lengthMenu": [[25, 50, 100, 250, 500, 1000, 2000, 5000, 10000, 15000, -1], [25, 50, 100, 250, 500, 1000, 2000, 5000, 10000, 15000, 'All']],
    "language" : {
        "info": "Affichage des lignes _START_ à _END_ sur _TOTAL_ résultats au total",
        "emptyTable": "Aucun résultat disponible",
        "lengthMenu": "Affichage de _MENU_ résultats",
        "search" : "Rechercher : ",
        "zeroRecords" : "Aucun résultat trouvé",
        "paginate" : {
            "previous": "Précédent",
            "next": "Suivant"
        },
        "sInfoFiltered": "(filtr&eacutes à partir de _MAX_ résultats au total)",
        "sInfoEmpty": "Aucun résultat disponible"
    },
    "dom": 'flrtip',
    "retrieve": true,
    "responsive": true,
    "autoWidth": false
};

I deleted columns configuration to reduce text.

Does anyone have any idea how to fix this problem?

Thanks, Regards.

allan

20k rows isn't that many - the browser and DataTables should easily handle that. See your 'Loading...' cells - are you firing off Ajax calls to get data for them? That might do it.

If its not that can you link to a test case so I can take a look.

Thanks,
Allan

ayumixlain

someone has a solution to that problem?, the same thing happens to me, only in chrome, firefox it works.

kthorngren

@ayumixlain see if this thread with a similar question helps.

Kevin

ayumixlain

thanks kevin, "paging": true in datatable was the solution.