Si usamos, por ejemplo, bootstrap editable para editar campos inline y estos están dentro de una tabla que usa DataTables, seguramente nos hemos encontrado con el problema que al filtrar o paginar los resultados, desaparece la opción de edición. Esto lo solucionaremos cargando (en este caso) el código del Bootstrap editable mediante la propiedad “DrawCallback” de la siguiente forma:
$('#state-saving-datatable').DataTable({
stateSave: true,
language: {
url: '{{ url("assets-backoffice/libs/datatables/i18n/ca.json") }}'
},
"drawCallback": function () {
$('.dataTables_paginate > .pagination').addClass('pagination-rounded');
$(function() {
$.fn.editableform.buttons =
'<button type="submit" class="btn btn-primary editable-submit btn-sm waves-effect waves-light"><i class="mdi mdi-check"></i></button>' +
'<button type="button" class="btn btn-danger editable-cancel btn-sm waves-effect"><i class="mdi mdi-close"></i></button>';
$.fn.editable.defaults.params = function (params) {
params._token = $("meta[name=_token]").attr("content");
return params;
};
$('.text-box').editable({
type: 'text',
pk: 1,
name: 'title',
title: 'Enter username',
mode: 'inline',
inputclass: 'form-control-sm',
validate: function(value) {
if($.trim(value) == '') return '{{ trans('elements.field-required') }}';
},
});
});
}
});

