agregando mejoras al makeDatatable

src/main/webapp/js/general.js

@@ -26,6 +26,55 @@ const URI_POLICIA_REPORTE_MONTOS = "http://sistem16:666/reporteMontosPolicias";
 
 //</editor-fold>
 
+
+
+$.extend($.fn.dataTable.defaults, {
+    bSort: false,
+    bFilter: false,
+    aaSorting: [],
+    ordering: false,
+    bLengthChange: false,
+    bInfo: true,
+    paging: true,
+    iDisplayLength: 20,
+    bStateSave: false,
+    autoWidth: false,
+    responsive: true,
+    stateSave: true,
+    scrollX: true,
+    responsive: true,
+    language: {
+        lengthMenu: "Mostrar: _MENU_",
+        zeroRecords: "&nbsp;&nbsp;&nbsp; No se encontraron resultados",
+        info: "&nbsp;&nbsp;&nbsp; Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
+        infoEmpty: "&nbsp;&nbsp;&nbsp; Mostrando 0 de 0 registros",
+        search: "Filtrar:",
+        loadingRecords: "Cargando...",
+        processing: '<span style="width:100%;"><img src="http://www.snacklocal.com/images/ajaxload.gif"></span>',
+        paginate: {
+            first: "First",
+            last: "Last",
+            next: "Siguiente",
+            previous: "Anterior"
+        }
+    }
+});
+
+axios.interceptors.response.use(function (response) {
+    // Do something with response data
+    let respuesta = {
+        status: response.data.status || true,
+        message: response.data.message || `Operación exitosa`,
+        data: response.data.data || response.data
+    };
+    console.log(respuesta)
+    return respuesta;
+}, function (error) {
+    // Do something with response error
+    return Promise.reject(error);
+});
+
+
 /*Ajax genral*/
 const ajaxRequestSendBody = obj => {
     let body = JSON.stringify(obj.body);
@@ -172,37 +221,8 @@ let logOut = () => {
 };
 
 
-function defaultConfigDataTable() {
-    $.extend($.fn.dataTable.defaults, {
-        bSort: false,
-        bFilter: false,
-        aaSorting: [],
-        ordering: false,
-        bLengthChange: false,
-        bInfo: true,
-        paging: true,
-        iDisplayLength: 20,
-        bStateSave: false,
-        autoWidth: false,
-        responsive: true,
-        stateSave: true,
-        language: {
-            lengthMenu: "Mostrar: _MENU_",
-            zeroRecords: "&nbsp;&nbsp;&nbsp; No se encontraron resultados",
-            info: "&nbsp;&nbsp;&nbsp; Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
-            infoEmpty: "&nbsp;&nbsp;&nbsp; Mostrando 0 de 0 registros",
-            search: "Filtrar:",
-            loadingRecords: "Cargando...",
-            processing: '<span style="width:100%;"><img src="http://www.snacklocal.com/images/ajaxload.gif"></span>',
-            paginate: {
-                first: "First",
-                last: "Last",
-                next: "Siguiente",
-                previous: "Anterior"
-            }
-        }
-    });
-}
+
+
 
 
 
@@ -278,7 +298,15 @@ function primeraLetraMayuscula(str) {
 
 
 
-const makeDatatable = (jsonForDatatable = { data: [], columns: [], columnDefs: [], wrapsNameDatatable: ``, classNameForDatatable: ``, footer: false, highlighting: true}) => {
+const makeDatatable = (jsonForDatatable = {
+data: [],
+        columns: [],
+        columnDefs: [],
+        wrapsNameDatatable: ``,
+        classNameForDatatable: ``,
+        footerFilter: false,
+        highlighting: true
+        }) => {
     let data = jsonForDatatable.data;
     let columns = jsonForDatatable.columns;
     let columnDefs = jsonForDatatable.columns;
@@ -288,6 +316,7 @@ const makeDatatable = (jsonForDatatable = { data: [], columns: [], columnDefs: [
     let classNameForDatatable = jsonForDatatable.classNameForDatatable
 
     let highlighting = jsonForDatatable.highlighting
+    let footerFilter = jsonForDatatable.footerFilter
 
     let table_head = `
 		<table id="${nameDatatable}" class="${classNameForDatatable} table-hover" cellspacing="0" width="100%">`;
@@ -310,7 +339,7 @@ const makeDatatable = (jsonForDatatable = { data: [], columns: [], columnDefs: [
 		</thead>`
 
     let table_foot_th = ``;
-    if (jsonForDatatable.footer) {
+    if (footerFilter) {
         table_foot_th = `
 			<tfoot>
 				<tr>`;
@@ -333,16 +362,47 @@ const makeDatatable = (jsonForDatatable = { data: [], columns: [], columnDefs: [
     let table_foot = `</table>`
 
     $(`#${wrapsNameDatatable}`).empty().append(`${table_head}${table_head_th}${table_foot_th}${table_foot}`);
+
+    if (footerFilter) {
+        // Setup - add a text input to each footer cell
+        $(`#${nameDatatable} tfoot th`).each(function () {
+            var title = $(this).text();
+            $(this).html(`<input type="text" class="form-control" placeholder="${title}" />`);
+        });
+    }
+
     $(`#${nameDatatable}`)
             .DataTable({
                 data,
                 columns,
-                columnDefs
+                columnDefs,
+                fixedColumns: {
+                    leftColumns: 1,
+                    rightColumns: 1
+                }
             });
 
-    if (highlighting) {
+    if (footerFilter) {
+        // DataTable
         let table = $(`#${nameDatatable}`).DataTable();
 
+        // Apply the search
+        table.columns().every(function () {
+            var that = this;
+            $('input', this.footer()).on('keyup change', function () {
+                if (that.search() !== this.value) {
+                    that
+                            .search(this.value)
+                            .draw();
+                }
+            });
+        });
+
+        $(`#${wrapsNameDatatable} .dataTables_scrollBody`).appendTo(`#${wrapsNameDatatable} .dataTables_scroll`);
+    }
+
+    if (highlighting) {
+        let table = $(`#${nameDatatable}`).DataTable();
         $(`#${nameDatatable} tbody`)
                 .on('mouseenter', 'td', function () {
                     let colIdx = table.cell(this).index().column;
@@ -352,7 +412,10 @@ const makeDatatable = (jsonForDatatable = { data: [], columns: [], columnDefs: [
                 });
     }
 
-    return Promise.resolve($(`#${nameDatatable}`));
+    return Promise.resolve({
+        datatable: $(`#${nameDatatable}`),
+        container: $(`#${wrapsNameDatatable}`)
+    });
 }
 
 
@@ -371,22 +434,4 @@ const cleanQueryParams = (params = {}) => {
     }
 
     return params;
-}
-
+}
\ No newline at end of file
-let interceptorsResponseAxios = () => {
-    axios.interceptors.response.use(function (response) {
-        // Do something with response data
-        let respuesta = {
-            status: response.data.status || true,
-            message: response.data.message || `Operación exitosa`,
-            data: response.data.data || response.data
-        };
-        console.log(respuesta)
-        return respuesta;
-    }, function (error) {
-        // Do something with response error
-        return Promise.reject(error);
-    });
-}
-
-interceptorsResponseAxios();
\ No newline at end of file

src/main/webapp/js/pages/crearRolPolicia.js

@@ -15,7 +15,7 @@ function initDatePicker(selectorName) {
 }
 
 function listarRolesPolicias(objParams = {}) {
-    
+
     axios.get(URI_ROL_POLICIA, objParams).then((response) => {
         debugger
         let columns = [
@@ -99,9 +99,9 @@ function listarRolesPolicias(objParams = {}) {
             wrapsNameDatatable: wrapsNameDatatable,
             classNameForDatatable: classNameForDatatable,
             footer: footer
-        }).then((datatable) => {
-            $(datatable).on("click", ".ver-detalle", function () {
-                let data = $(datatable).DataTable().row($(this).parents("tr")).data();
+        }).then((nodes) => {
+            nodes.container.on("click", ".ver-detalle", function () {
+                let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
                 console.log(data);
 
                 axios.get("modals/policias/mantenimientoRol/detalleRol.jspf").then((response) => {
@@ -376,7 +376,6 @@ function mostrarModalNuevoRol() {
 
 
                 defaultConfigDatePicker();
-                defaultConfigDateRangePicker();
             }
         }).then((result) => {
             if (result.value) {
@@ -405,7 +404,6 @@ function buscarRoles() {
 }
 
 $().ready(function () {
-    defaultConfigDataTable();
     initDatePicker("#dpFechaInicio");
     initDatePicker("#dpFechaFin");
     listarSedes("#cboSedesFiltro");

src/main/webapp/vistas/crearRolPolicia.jsp

@@ -879,7 +879,6 @@
 
         <%@include file="templates/footer-body.jsp"%>
         <!--js de la pagina-->
-        <script src="../plantilla/assets/js/plugins/tables/datatables/datatables.min.js" type="text/javascript"></script>
         <script src="../plantilla/assets/js/core/libraries/jquery_ui/interactions.min.js"></script> 
         <script src="../plantilla/assets/js/core/libraries/jquery_ui/widgets.min.js"></script>
 

src/main/webapp/vistas/templates/footer-body.jsp

@@ -31,6 +31,7 @@
 <!-- /core JS files -->
 
 <!--axios-->
+<script src="../plantilla/assets/js/plugins/tables/datatables/datatables.min.js" type="text/javascript"></script>
 <script src="../js/lib/axios.min.js" type="text/javascript"></script>
 
 <!-- /Generales -->