Tengo este código y necesito que mi tabla muestre los primeros 10 pacientes y, después de 10 segundos, muestre los 10 siguientes sin tocar ningún botón (automáticamente).
Estoy buscando algo similar a esto: https://embed.plnkr.co/ioh85m5OtPmcvPHyl3Bg/
Pero con un modelo OData (como se especifica en mi vista y controlador).
Esta es mi vista:
<Table id="tablaPacientes" items="{/EspCoSet}"> <columns> <!-- ... --> </columns> <ColumnListItem> <ObjectIdentifier title="{Bett}" /> <!-- ... --> </ColumnListItem> </Table>Este es mi controlador:
onInit: function () { var oModel = this.getOwnerComponent().getModel("zctv"); this.getView().setModel(oModel); }, onBeforeRendering: function () { // method to get the local IP because I need it for the OData var ipAddress; var RTCPeerConnection = window.webkitRTCPeerConnection || window.mozRTCPeerConnection; var self = this; function grepSDP (sdp) { var ip = /(192\.168\.(0|\d{0,3})\.(0|\d{0,3}))/i; sdp.split('\r\n').forEach(function (line) { if (line.match(ip)) { ipAddress = line.match(ip)[0]; self.setIp(ipAddress); } }); } if (RTCPeerConnection) { (function () { var rtc = new RTCPeerConnection({ iceServers: [] }); rtc.createDataChannel('', { reliable: false }); rtc.onicecandidate = function (evt) { if (evt.candidate) { grepSDP(evt.candidate.candidate); } }; rtc.createOffer(function (offerDesc) { rtc.setLocalDescription(offerDesc); }, function (e) { console.log("Failed to get Ip address"); }); })(); } }, setIp: function (ip) { this.getView().byId("planta").bindElement({ path: "/CenTVSet('" + ip + "')" }); var oModel = this.getView().getModel(); var that = this; oModel.read("/CenTVSet('" + ip + "')", { success: function (oData, oRes) { var einri = oData.Einri; var orgpf = oData.Orgpf; var oTable = that.getView().byId("tablaPacientes"); var oBinding = oTable.getBinding("items"); var aFilters = []; var filterO = new Filter("Orgna", sap.ui.model.FilterOperator.EQ, orgpf); aFilters.push(filterO); var filterE = new Filter("Einri", sap.ui.model.FilterOperator.EQ, einri); aFilters.push(filterE); oBinding.filter(aFilters); } }); } Busqué algunas funciones como IntervalTrigger pero realmente no sé cómo puedo usarla para este ejemplo.
Aquí hay algunas pequeñas muestras:
startList: function(listBase, $skip, $top, restInfo) { let startIndex = $skip; let length = $top; let totalSize; (function repeat(that) { const bindingInfo = Object.assign({ startIndex, length }, restInfo); listBase.bindItems(bindingInfo); listBase.data("repeater", event => { totalSize = event.getParameter("total"); // $count value startIndex += $top; startIndex = startIndex < totalSize ? startIndex : 0; setTimeout(() => repeat(that), 2000); }).attachEventOnce("updateFinished", listBase.data("repeater"), that); })(this); }, stopList: function(listBase) { listBase.detachEvent("updateFinished", listBase.data("repeater"), this); },
Los ejemplos utilizan startIndex y length en la información de enlace de la lista que se traduce en consultas del sistema $skip y $top de la URL de solicitud de la entidad. Es decir, agregar esas consultas del sistema a la URL de la solicitud (p. ej., https://<host>/<service>/<EntitySet>?$skip=3&$top=3 ), debería devolver el conjunto correcto de entidades como esta .
Las opciones adicionales para la información de enlace de la lista se pueden encontrar en la documentación de UI5 como expliqué aquí .
El intervalo se implementa con una IIFE (expresión de función invocada inmediatamente) en combinación con setTimeout en lugar de setInterval .
set Interval tiene las siguientes desventajas:
set Timeout en su lugar ofrece un mejor control cuando se debe solicitar el siguiente lote.
var iSkip = 0; var iTop = 10; setInterval(function() { table.bindItems("/EspCoSet", { urlParameters: { "$skip": iSkip.toString() // Get first 10 entries "$top": iTop.toString() }, success: fuction (oData) { iSkip = iTop; // Update iSkip and iTop to get the next set iTop+= 10; } ... }, 10000); // Each 10 seconds )