Datatable dynamic column - Spinner don't show

Datatable dynamic column - Spinner don't show

spy20spy20 Posts: 6Questions: 2Answers: 1

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,325Questions: 26Answers: 4,949
    Answer ✓

    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

  • spy20spy20 Posts: 6Questions: 2Answers: 1

    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.

Sign In or Register to comment.