[EDIT detalle montos docentes, mostrando información en el datatable]

src/main/webapp/js/general.js

@@ -59,6 +59,7 @@ const URI_PERIODOCIERRE_SEDES = "periodoSedes"
 const URI_JUSTIFICACION_ASISTENCIAS = "asistenciaJustificacion"
 const URI_DOCENTES_MONTOS = "montosDocentes"
 const URI_TIPOPLANILLAS = "tipoPlanillaReal"
+const URI_DOCENTES_DETALLEMONTOS = "detalleMontosDocentes"
 //</editor-fold>
 
 const swalWithBootstrapButtons = swal.mixin({

src/main/webapp/js/pages/detalle_montos_docentes.js

 let personal
 
+function getColumns() {
+	let columns = [
+		{
+			title: `N°`,
+			data: `numero_orden`,
+			className: 'text-center'
+		},
+		{
+			title: "Fecha",
+			data: "fecha",
+			className: 'text-center'
+		},
+		{
+			title: "HORA<br>ENTRADA",
+			data: "hora_ingreso",
+			className: 'text-center'
+		},
+		{
+			title: `MARCACIÓN<br>ENTRADA`,
+			data: `marcacion_entrada`,
+			className: 'text-center'
+		},
+		{
+			title: `MARCACIÓN<br>SALIDA`,
+			data: `marcacion_salida`,
+			className: 'text-center'
+		},
+		{
+			title: "HORA<br>SALIDA",
+			data: "hora_salida",
+			className: "text-center"
+		},
+		{
+			title: `CANTIDAD<br>MINUTOS`,
+			data: `cantidad_minutos`,
+			className: 'text-center'
+		},
+		{
+			title: `COSTO`,
+			data: `costo`,
+			className: 'text-center'
+		},
+		{
+			title: `MONTO`,
+			data: `monto`,
+			className: 'text-center',
+			render: (data) => {
+				let contenido = parseFloat(data).toFixed(2)
+				return `<span class="text-primary">${contenido}</span>`
+			}
+		},
+		{
+			title: `DESCUENTO`,
+			data: `descuento`,
+			className: 'text-center',
+			render: (data) => {
+				let contenido = parseFloat(data).toFixed(2)
+				let label = ""
+				
+				if(data>0){
+					label = "text-danger"
+				}else{
+					label = "text-default"
+				}
+				
+				return `<span class="${label}">${contenido}</span>`
+			}
+		},
+		{
+			title: `TOTAL`,
+			data: `total`,
+			className: 'text-center',
+			render: (data) => {
+				let contenido = parseFloat(data).toFixed(2)
+				return `<span class="text-success">${contenido}</span>`
+			}
+		},
+		{
+			title: `TIPO<br>ASISTENCIA`,
+			data: `tipo_asistencia`,
+			className: 'text-center'
+		},
+		{
+			title: `SEDE`,
+			data: `sede_descripcion`,
+			className: 'text-center',
+			render: (data) => {
+				return `<span class="label bg-teal">${data}</span>`
+			}
+		},
+		{
+			title: `AULAS`,
+			data: `aulas`,
+			className: 'text-center'
+		},
+//		{
+//			title: `ESTADO`,
+//			data: `estado`,
+//			className: 'text-center',
+//			render: (data) => {
+//				let label = "";
+//				let text = "";
+//
+//				switch (data) {
+//					case 0:
+//						label = "label label-danger";
+//						text = "CERRADO";
+//						break;
+//					case 1:
+//						label = "label label-success";
+//						text = "ABIERTO";
+//						break;
+//				}
+//
+//				return `<span class="${label}">${text}</span>`;
+//			}
+//		},
+//		{
+//			title: `ACCIONES`,
+//			data: null,
+//			className: 'text-center',
+//			render: (data) => {
+////				let acciones = "";
+////				let editar = "";
+////				let abrirPeriodo = ""
+////				let cerrarPeriodo = ""
+////				let verdetalle = ""
+////
+////				if (data.estado === 1) {
+////					cerrarPeriodo = `<span style="cursor: pointer"><i class="cierre-periodo icon-lock2 text-danger-700"></i>&nbsp;&nbsp;</span>`;
+////				} else if (data.estado === 0) {
+////					abrirPeriodo = `<span style="cursor: pointer"><i class="cierre-periodo icon-unlocked2 text-success-700"></i>&nbsp;&nbsp;</span>`;
+////				}
+////				editar = `<span style="cursor: pointer"><i class="editar icon-pencil text-slate-800"></i>&nbsp;&nbsp;</span>`;
+////				verdetalle = `<span style="cursor: pointer"><i class="ver-detalle icon-list text-primary-800"></i>&nbsp;&nbsp;</span>`;
+////
+////				acciones = verdetalle + editar + abrirPeriodo + cerrarPeriodo;
+////				return acciones;
+//				return null
+//			}
+//		}
+	];
+
+	return columns;
+}
+
 const recibirData = () => {
 	let data = localStorage.getItem('data')
 	let filter = localStorage.getItem('filtros')
@@ -9,7 +155,7 @@ const recibirData = () => {
 	let tipoPago = ["A", "B", "C", "D", "E", "F", "G", "H"]
 	debugger
 	html += tipoPago
-		.map(tp => `<li class="list-group-item">${tp}=${personal["pago" + tp]}</li>`)
+		.map(tp => `<li class="list-group-item col-md-6">${tp}=${personal["pago" + tp]}</li>`)
 		.reduce((prev, curr) => prev.concat(curr))
 
 	$("#ulCostos").html(html)
@@ -31,7 +177,33 @@ const mostrarDatosTrabajador = () => {
 		})
 }
 
+function listarDetalleMontosDocentes(objParams = {}){
+	ajaxWebService.get(URI_DOCENTES_DETALLEMONTOS, objParams).then((response) => {
+		let columns = getColumns();
+
+		let wrapsNameDatatable = `divDatatable`;
+		let classNameForDatatable = `display table table-bordered`;
+
+		makeDatatable(
+			wrapsNameDatatable,
+			{
+				data: response.data,
+				columns,
+			},
+			classNameForDatatable,
+			).then((nodes) => {
+//			nodes.container
+//				.off()
+//				.on("click", ".editar", (e) => mostrarModalEditarPeriodoCierre(getDataRow(nodes.datatable, e)))
+//				.on("click", ".cierre-periodo", (e) => mostrarModalCierrePeriodo(getDataRow(nodes.datatable, e)))
+//				.on("click", ".ver-detalle", (e) => mostrarModalVerDetalle(getDataRow(nodes.datatable, e)))
+
+		});
+	});
+}
+
 $(document).ready(function () {
 	recibirData();
 	mostrarDatosTrabajador()
+	listarDetalleMontosDocentes()
 })
\ No newline at end of file

src/main/webapp/vistas/modals/docentesporhoras/montos/detalleMontosDocentes.jsp

@@ -33,6 +33,15 @@
         </div>
       </div>
     </div>
+		
+		<div class="col-md-10 col-md-offset-1">
+			<div class="panel panel-primary card-3" style="margin-top: 30px"> 
+				<div class="panel-heading" style="padding: 8px 15px">
+					<h6 class="panel-title" style="font-size: 15px; font-family: inherit">MONTOS</h6>
+				</div>
+				<div id="divDatatable"></div>
+			</div>
+		</div>
 		<!-- / content -->
 
 		<jsp:include page="/vistas/templates/footer-body.jsp" />