usando servicio rest con datatable

src/main/webapp/js/general.js

@@ -11,11 +11,12 @@ const PATH_SERVICIO_REST = 'http://app9.sacooliveros.edu.pe:8080/security-rest/a
 //<editor-fold> SERVICIOS REST
 
 //<editor-fold> MODULO DE POLICIAS
-const URI_LISTAR_ROL_POLICIA = "http://172.16.2.91:666/rolPolicias";
+const URI_LISTAR_TIPOROL_POLICIA = "http://172.16.2.91:666/rolPolicias";
 const URI_LISTAR_FRECUENCIA_ROL_POLICIA = "http://172.16.2.91:666/frecuenciaRolPolicias";
 const URI_LISTAR_SEDES = "http://172.16.2.91:666/sedes";
 const URI_LISTAR_ESTADO_ASISTENCIA = "http://172.16.2.91:666/estadoAsistencia";
 const URI_LISTAR_POLICIAS = "http://172.16.2.91:666/policias";
+const URI_LISTAR_ROL_POLICIA = "http://172.16.2.91:666/rolesPolicias";
 //</editor-fold>
 
 
@@ -279,4 +280,66 @@ function primeraLetraMayuscula(str) {
     let caracter = strLower.substr(0, 1).toUpperCase();
     let cadena = caracter + strLower.substr(1);
     return cadena;
+}
+
+
+
+const makeDatatable = (jsonForDatatable = { data: [], columns: [], columnDefs: [], wrapsNameDatatable: ``, classNameForDatatable: ``, footer: false}) => {
+	let data = jsonForDatatable.data;
+	let columns = jsonForDatatable.columns;
+        let columnDefs = jsonForDatatable.columns;
+
+	let wrapsNameDatatable = jsonForDatatable.wrapsNameDatatable;
+	let nameDatatable = `${wrapsNameDatatable}-datatable`;
+	let classNameForDatatable = jsonForDatatable.classNameForDatatable;
+
+	let table_head = `
+		<table id="${nameDatatable}" class="${classNameForDatatable}" cellspacing="0" width="100%">`;
+
+	let table_head_th = `
+		<thead>
+			<tr>`;
+	columns.forEach((obj) => {
+		let title = `undefined`;
+		if (obj.title) {
+			title = obj.title;
+		} else if (obj.data) {
+			title = obj.data;
+		}
+		table_head_th += `
+			<th>${title}</th>`
+	})
+	table_head_th += `
+			</tr>
+		</thead>`
+
+	let table_foot_th = ``;
+	if (jsonForDatatable.footer) {
+		table_foot_th = `
+			<tfoot>
+				<tr>`;
+		columns.forEach((obj) => {
+			let title = `undefined`;
+			if (obj.title) {
+				title = obj.title;
+			} else if (obj.data) {
+				title = obj.data;
+			}
+			table_foot_th += `
+				<th>${title}</th>`
+		})
+		table_foot_th += `
+				</tr>
+			</tfoot>
+		`
+	}
+
+	let table_foot = `</table>`
+
+	$(`#${wrapsNameDatatable}`).empty().append(`${table_head}${table_head_th}${table_foot_th}${table_foot}`);
+	$(`#${nameDatatable}`).DataTable({
+		data,
+		columns,
+		columnDefs
+	});
 }
\ No newline at end of file

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

 function init() {
-    listarRoles();
+    listarTipoRoles();
     listarFrecuenciaRol();
     listarSedes();
     listarPolicias();
+    listarRolesPolicias();
 }
 
-function listarRoles() {
+function listarRolesPolicias() {
     axios.get(URI_LISTAR_ROL_POLICIA).then((result) => {
+        let columns = [
+            {
+                title: `N°`,
+                data: `numeroFila`
+            },
+            {
+                title: `APELLIDOS Y NOMBRES`,
+                data: `policia_nombres`
+            },
+            {
+                title: `SEDE`,
+                data: `sede_descripcion`
+            },
+            {
+                title: `FECHA INICIO`,
+                data: `fecha_inicio`
+            },
+            {
+                title: `FECHA FIN`,
+                data: `fecha_fin`
+            },
+            {
+                title: `TIPO`,
+                data: `tiporol_descripcion`
+            },
+            {
+                title: `FRECUENCIA`,
+                data: `frecuencia_descripcion`
+            },
+            {
+                title: `ESTADO`,
+                data: `estado`
+            },
+        ];
+        
+        let columnDefs = [
+            {orderable: false, width: '5%', targets: 0, className: "text-center"},
+            {orderable: false, width: '5%', targets: 1},
+            {orderable: false, width: '30%', targets: 2, className: "text-center"},
+            {orderable: false, width: '7%', targets: 3, className: "text-center"},
+            {orderable: false, width: '7%', targets: 4, className: "text-center"},
+            {orderable: false, width: '10%', targets: 5, className: "text-center"},
+            {orderable: false, width: '8%', targets: 6, className: "text-center"},
+            {orderable: false, width: '8%', targets: 7, className: "text-center"}
+        ];
+        
+        let wrapsNameDatatable = `divRoles`;
+        let classNameForDatatable = `display table table-bordered`;
+        let footer = false
+
+        makeDatatable({
+            data: result.data,
+            columns: columns,
+            columnDefs: columnDefs,
+            wrapsNameDatatable: wrapsNameDatatable,
+            classNameForDatatable: classNameForDatatable,
+            footer: footer
+        });
+
+    });
+}
+
+function listarTipoRoles() {
+    axios.get(URI_LISTAR_TIPOROL_POLICIA).then((result) => {
         let roles = result.data;
         let html = "<option>[SELECCIONE]</option>";
         roles.forEach(rol => html += `<option value="${rol.codigo}">${rol.descripcion}</option>`);

src/main/webapp/vistas/crearRolPolicia.jsp

@@ -78,8 +78,8 @@
                 <div class="panel-heading" style="padding: 8px 15px">
                     <h6 class="panel-title" style="font-size: 15px; font-family: inherit">LISTADO DE ROLES</h6>
                 </div>
-                <div>
-                    <table class="table dataTable table-striped table-hover table-sm table-bordered display" id="tblAsistenciaDocentes">                                                 
+                <div id="divRoles">
+<!--                    <table class="table dataTable table-striped table-hover table-sm table-bordered display" id="tblAsistenciaDocentes">                                                 
                         <thead>
                             <tr>
                                 <th>Nº</th>
@@ -181,6 +181,8 @@
                             </tr>
                         </tbody>
                     </table>
+                    -->
+                    
                 </div>
             </div>
         </div>
@@ -880,6 +882,7 @@
 
         <%@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>