0

Quisiera recargar un DataTable después de la confirmación de un modal y así se agreguen o quiten unos checkbox, pero cada vez que lo hago se me genera otra tabla encima del otro, y se desconfigura el Datatable.( estoy usando esto después de la confirmación del 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));

1 respuesta 1

1

Declara tu tabla de esta forma:

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

Luego para recargar la tabla:

table.draw();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.