How can I reload a table with javascript or jQuery in ajax?

0

I would like to reload a DataTable after the confirmation of a modal and thus add or remove some checkboxes, but every time I do it, another table is generated on top of the other, and the Datatable is unconfigured. (I am using this after the confirmation of the modal $ ('# user-list'). load ('# user-list');).

(function ($, window, document, undefined) {
$('#user-list').DataTable({
    pageLength: 20,
    rowCallback: function (row, data) {
        $('.assigned').closest('tr').find('[data-assigned]').on('click', function (e) {
            e.stopImmediatePropagation();
            const btn = $(this);
            const url = $(btn).data('url');
            const fullname = $(btn).data('fullname');

            $.confirm({
                columnClass: 'col-md-12',
                content: function () {
                    const self = this;

                    return $.ajax({
                        url: url,
                        dataType: 'html',
                        method: 'GET'
                    }).done(function (response) {
                        self.setContent(response);
                        self.setTitle('<h4 class="text-blue">
                                             <i class="icon fa fa-user"></i> ${fullname}
                                       </h4>');
                    }).fail(function () {
                        self.setContent('<div class="alert alert-danger alert-dismissible">
                                            <h4>
                                                <i class="icon fa fa-ban"></i> Error
                                            </h4>
                                         </div>');
                    });
                },
                buttons: {
                    cancel: {
                        text: 'Cerrar',
                        btnClass: 'btn-default',
                        keys: ['enter'],
                        action: function () {
                        }
                    },
                }
            });
        });
        $('.summary').closest('tr').find('[data-summary]').on('click', function (e) {
            e.stopImmediatePropagation();
            const btn = $(this);
            const url = $(btn).data('url');
            const fullname = $(btn).data('fullname');

            $.confirm({
                columnClass: 'col-md-12',
                content: function () {
                    const self = this;

                    return $.ajax({
                        url: url,
                        dataType: 'html',
                        method: 'GET'
                    }).done(function (response) {
                        self.setContent(response);
                        self.setTitle('<h4 class="text-blue">
                                             <i class="icon fa fa-user"></i> ${fullname}
                                       </h4>');
                    }).fail(function () {
                        self.setContent('<div class="alert alert-danger alert-dismissible">
                                            <h4>
                                                <i class="icon fa fa-ban"></i> Error
                                            </h4>
                                         </div>');
                    });
                },
                buttons: {
                    cancel: {
                        text: 'Cerrar',
                        btnClass: 'btn-default',
                        keys: ['enter'],
                        action: function () {
                        }
                    },
                }
            });
        });

        __getChangeStatus(row);
    }
});


/**
 * @private __getChangeStatus
 */
function __getChangeStatus(tr) {
    $('.basic-checkbox').closest(tr).find('[data-checkbox]').on('click', function (e) {
        e.stopImmediatePropagation();
        const that = $(this);
        const id = $(that).data('id');
        const isCheck = $(that).is(':checked');
        let content = 'La evaluación ha sido abierta con éxito';

        if (isCheck) {
            content = 'La evaluación ha sido cerrada con éxito';
        }

        $.ajax({
            'async': true,
            'crossDomain': true,
            'url': '/api/employee/retrieve-opening-evaluation/',
            'method': 'POST',
            'headers': {
                'Content-Type': 'application/json',
                'Cache-Control': 'no-cache',
            },
            'processData': false,
            data: JSON.stringify({
                is_closed: isCheck,
                employee_id: id,
            }),
        }).done(function (response, status) {
            if ('success' === status) {
                $.confirm({
                    icon: 'fas fa-check-circle',
                    title: '',
                    content: content,
                    theme: 'modern',
                    closeIcon: false,
                    animation: 'scale',
                    type: 'green',
                    buttons: {
                        confirm: {
                            text: 'Cerrar',
                            btnClass: 'btn-blue btn-xs btn-disabled',
                            action: function () {
                                location.reload();
                            }
                        },
                    }
                });
            }
        }).fail(function (response, status) {
            if (status === 'error') {
                $.confirm({
                    icon: 'fas fa-times-circle',
                    title: status,
                    content: response.responseJSON.message,
                    theme: 'modern',
                    closeIcon: false,
                    animation: 'scale',
                    type: 'red',
                    buttons: {
                        cancel: {
                            text: 'Cerrar',
                            btnClass: 'btn-xs btn-danger',
                            action: function () {
                                location.reload();
                            }
                        },
                    }
                });
            }
        });
    });
}

$('[id="close-evaluation-btn"]').on('click', function (e) {
    e.preventDefault();
    $.confirm({
        title: '<h4>¿Esta seguro que desea cerrar la evaluación?.</h4>',
        content: '',
        icon: 'fas fa-unlock-alt',
        theme: 'modern',
        animation: 'scale',
        closeAnimation: 'scale',
        boxWidth: '100%',
        className: 'col-md-12',
        opacity: 0.5,
        buttons: {
            confirm: {
                text: 'Cerrar',
                btnClass: 'btn-danger',
                action: function () {
                    let dialog = __getDialogSave(
                        'Evaluación',
                        'Espere un momento mientras la evaluación es cerrada...'
                    );
                    setTimeout(() => {
                        __getEvaluation(
                            dialog,
                            {
                                'is_closed': true
                            },
                            'La evaluación ha sido cerrada satisfactoriamente'
                        );
                    }, 500);
                }
            },
            cancel: {
                text: 'Cancelar',
                btnClass: 'btn-default',
                action: function () {

                }
            },
        }
    });
});

$('[id="opennig-evaluation-btn"]').on('click', function (e) {
    e.preventDefault();
    $.confirm({
        title: '<h4>¿Esta seguro que desea abrir la evaluación?.</h4>',
        content: '',
        icon: 'fas fa-lock',
        theme: 'modern',
        animation: 'scale',
        closeAnimation: 'scale',
        boxWidth: '100%',
        className: 'col-md-12',
        opacity: 0.5,
        buttons: {
            confirm: {
                text: 'Abrir',
                btnClass: 'btn-success',
                action: function () {
                    let dialog = __getDialogSave(
                        'Evaluación',
                        'Espere un momento mientras la evaluación se abre...'
                    );
                    setTimeout(() => {
                        __getEvaluation(
                            dialog,
                            {
                                'is_closed': false
                            },
                            'La evaluación ha sido abierta satisfactoriamente'
                        );
                    }, 500);
                }
            },
            cancel: {
                text: 'Cancelar',
                btnClass: 'btn-default',
                action: function () {
                }
            },
        }
    });
});

/**
 * @param modal
 * @param data
 * @param content
 * @private fn __getEvaluation
 */
function __getEvaluation(modal, data, content) {
    $.ajax({
        'async': true,
        'crossDomain': true,
        'url': '/api/employee/opening-evaluation/',
        'method': 'POST',
        'headers': {
            'Content-Type': 'application/json',
            'Cache-Control': 'no-cache',
        },
        'processData': false,
        'data': JSON.stringify(data),
    }).done(function (response, status) {
        modal.close();
        $.confirm({
            icon: 'fas fa-check-circle',
            title: '',
            content: content,
            theme: 'modern',
            closeIcon: true,
            animation: 'scale',
            type: 'green',
            buttons: {
                confirm: {
                    text: 'Cerrar',
                    btnClass: 'btn-blue btn-xs',
                    action: function () {
                        $('#user-list').load('  #user-list');
                    }
                },
            }
        });
    }).fail(function (response, status) {
        if (status === 'error') {
            modal.close();
            $.confirm({
                icon: 'fas fa-times-circle',
                title: status,
                content: response.responseJSON.message,
                theme: 'modern',
                closeIcon: true,
                animation: 'scale',
                type: 'red',
                buttons: {
                    cancel: {
                        text: 'Cerrar',
                        btnClass: 'btn-xs btn-primary',
                        action: function () {

                        }
                    },
                }
            });
        }
    });
}

/**
 * @private fn __getDialogSave
 */
function __getDialogSave(name, message) {
    return $.dialog({
        title: '<h4 class="text-info"> ❝${name}❞</h4>',
        closeIcon: false,
        theme: 'modern',
        animation: 'scale',
        closeAnimation: 'zoom',
        icon: 'fa fa-cog fa-spin fa-1x fa-fw',
        content: function () {
            let self = this;
            setTimeout(() => {
                self.setContent(message);
            }, 100);
        },
    });
}

} (jQuery, window, document));

    
asked by Ciro 12.09.2018 в 17:46
source

1 answer

1

Declare your table this way:

var table = $('#user-list').DataTable({

Then to reload the table:

table.draw();
    
answered by 12.09.2018 в 17:52