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));