Datatable dynamic column - Spinner don't show

spy20

Hi,
I've a datable with many entries.
I want to show a spinner when the data are loading.
Without ajax code, the spinner work well.

$(document).ready(function() {
var columns = []; 
$.ajax({
        url: "/fwru/get",
        dataType: "json",
        success: function (data) {
            var columns = [];
            var maxLength = data.reduce(function(max, row) {
                    return Math.max(max, row.length);
                }, 0);
            //build the DataTable dynamically.
            for (var i = 0; i < maxLength; i++) {
                columns.push({
                    data: i,
                    title: "Cond" + i
                });
            }
            $('#listeFWRU').DataTable({
                data: data,
                processing: true,
                language: {
                        'loadingRecords': '&nbsp;',
                        'processing': '<div class="spinner"></div>'
                    },
                columnDefs: [{
                    "defaultContent": "-",
                    "targets": "_all"
                    }],
                scrollX: true,
                scrollCollapse: true,
                    scrollY: '45vh',
                    scrollX: true,
                    layout: {
                            top1: 'searchBuilder',
                            top1Start: {

                                buttons: [
                                'copy',
                                    'print',
                                    {
                                        extend: 'spacer',
                                        style: 'bar',
                                        text: '| Export files:'
                                    },
                                    'csv',
                                    'excel',
                                    'spacer',
                                    'pdf'
                                ]},
                        },
                columns: columns
            });
            }
        })
});          

Here, with the ajax code, and maybe the 'success' option, the datable show only when all entries are loading. So without spinner.
I don't know how can I resolve this ?
Thanks for your advice.

kthorngren

You are using jQuery ajax() which is not controlled by Datatables. So the Datatables spinner won't be used while the ajax data is loading. You will need to use something like blockui to show the spinner. Enable it before the jQuery ajax() request then disable it after Datatables initializes in the success function.

Kevin

spy20

Thanks I don't know this plugin.
I finally use another different method that show a gif on loading data and hide it when the datatable is finish.

 $(document).ready(function() {
     var columns = []; 
     $('#spinner').show();
     $.ajax({
 ...ajax code....
 })
        .done(function () {
        // hide spinner
        $('#spinner').hide();
    });
});      

It's work and for now, I'm good with it.
I think this thread is solved.