how to add "processing animation" when ajax is a function

xshion13

i am stucked at this part trying to add custom animation or "processing" message because my script is a function wich loads datatable when page loads and is executed again when datepicker is clicked:
please tell me how to add this on this case because i am new on js and i have to learn a lot.

Please help!

function search(){
        $.ajax({
            method: "POST",
            url: "json/module_table_fetch04.php",
            dataType: "json",
            data: {
                keyword : $(".date-picker").val(),
            }, 
            success: function(res){
                var col = [];
                var rdata=[];
                $.each(res, function (index, element) {
                    for (var key in element) {
                        if (col.indexOf(key) === -1) {
                            col.push(key);
                        }
                    }
                })
                for (var i = 0; i < col.length; i++) {
                    rdata.push({data:col[i]})
                }
                var tableHeaders="";
                $.each(col, function (i, val) {
                    tableHeaders += '<th class="sorting">' + val + "</th>";
                });

                $("#perf_u_dia").empty();
                $("#perf_u_dia").append('<table id="disp_u_dia" class="table table-bordered table-hover table-striped dataTable" cellspacing="0" width="%"><thead><tr>' + tableHeaders + '</tr></thead></table>');

                $('#disp_u_dia').DataTable({
                    "aaData": res,
                    "responsive": true,
                    "order": [],
                    "bDestroy": true,
                    "columns": rdata,
                    "scrollX": true,
                    "bInfo": false,
                    "bPaginate": false,
                    "bLengthChange": false,
                    "searching": false,
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "Campo vacío",
                    "info": "Página _PAGE_ de _PAGES_",
                    "infoEmpty": "No hay registros disponibles",
                    "search": "Buscar:",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)"

                });
            },
            failure: function (res) {
                alert(res)
            }
        });
}

elijah71

I made use of the following packages
import { BusyConfig, IBusyConfig, NgBusyModuel } from 'ng-busy';

public busyConfig: IBusyConfig;
private busySubscription: Subscription;

ngOnInit() {
    this.busyConfig = new BusyConfig(this.ngBusyModule);
    ....
}

function search(){
        this.busySubscription = $.ajax({...});

        // Show the busy component
        this.busyConfig.busy = [this.busySubscription];

I also created a default-busy.html file for my spinner that I had use. I did not type it up as I have to transcribe from that system to this as it's on another network.

xshion13

seems good but i am not using node, just cpanel i can't figure how to apply this

colin

Have you tried processing? Though from your code, it seems you only initialise DataTables when you have all the data, so I suspect you need to do that processing animation outside of DataTables.

Coin

xshion13

i am looking many methods to get this even using "processing: true" but not sucess, that's why i am looking for help

david.j.meyer2@boeing.com

I'm using Impromptu to show a progress dialog when the page is loading and when server side processing is occurring. Shows a loading gif animation.

On document ready i launch the dialog.
var loading_prompt = '

Loading....

';

        $.prompt(loading_prompt, {
            title: "Loading Table",
            buttons: {}
        });

I also open and close based on xhr.dt event(s).

        $('#rcpsdrl').on('preXhr.dt', function (e, ctx) {
            var loading_prompt = '<table id="progress_prompt" class="display nowrap" style="width:100%; "><thead><tr><th>Loading....</th><th><img src="' +  '/common/img/loading.gif" /></th></tr></thead></table>';
            $.prompt(loading_prompt, {
                title: "Loading Table",
                buttons: {}
            });
        });

        $('#rcpsdrl')
            .on('xhr.dt', function (e, settings, json, xhr) {
                $.prompt.close();
            });

Seems to work well for me.