Saltar al contenido principal

Mostrar una lista página a página

Objetivo​

Mostrar una tabla de veinte en veinte filas, permitir que alguien busque en ella y poner debajo Anterior y Siguiente, que sepan cuándo parar.

Por qué existe esto​

Una lista dibujada carga lo que usted le pide. Pida todo y una tabla de novecientas filas llega en una sola respuesta y se desplaza sin fin; pida veinte y nada en la pantalla puede decir si esas veinte son las últimas veinte o las primeras de novecientas.

Así que a la consulta se le añadieron dos cosas: una página (skip) y un sitio donde poner el recuento (countInto).

Una sola consulta lo hace todo​

loadRecords("par_case", "cases", {
  top: num(getState("pageSize")),
  skip: getState("page") * num(getState("pageSize")),
  contains: { par_name: getState("query") },
  orderBy: "par_name",
  countInto: "caseTotal"
});

num(…) está ahí porque el tamaño de página viene de una lista desplegable, y todo control que ofrece una elección devuelve las palabras en lugar del número; consulte El tamaño de página más abajo.

ParteEs
topcuántas filas contiene esta página
skipcuántas saltar primero: filas, no páginas
wherepares campo/valor que deben coincidir exactamente, todos ellos
containspares campo/subcadena: lo que necesita un cuadro de búsqueda
orderBy / descendingel orden
countIntoun campo de estado para cuántas filas coinciden en total, sin tener en cuenta la página

skip son filas y no un número de página porque top ya son filas. Una pantalla que tuviera las dos cosas tendría que mantenerlas coherentes, y cuando eso falla lo hace en silencio: alguien cambia el tamaño de página, se olvida de reiniciar la página y acaba en la página 7 de una lista que ahora tiene 3.

Un valor vacío en contains no aporta nada, así que puede pasar su cuadro de búsqueda tal cual. Un cuadro en el que nadie ha escrito significa todo, no filas que contienen la cadena vacía.

countInto es gratis. La consulta de la plataforma cuenta de todos modos, así que pedir el total no cuesta una segunda solicitud. Una pantalla sin botón Siguiente lo omite y no paga nada.

Pasos​

  1. Declare el estado que necesita la lista: cases ([]), caseTotal (0), page (0), pageSize ("20", el propio valor de la lista desplegable, así que son palabras), query ("").

  2. Ponga la consulta de arriba en el controlador Cargado de la pantalla.

  3. Dibuje Anterior y Siguiente, y enlace su Habilitado:

    • Anterior: state.page > 0
    • Siguiente: (state.page + 1) * num(state.pageSize) < state.caseTotal

  4. Sus controladores mueven la página y vuelven a ejecutar la consulta:

    setState("page", getState("page") + 1);
    loadRecords( … the same query … );

  5. Dibuje el rótulo. Un número no se puede sumar directamente a una frase: BS Lang se niega a mezclar una cadena y un número y dice Only number or string; así que envuélvalo:

    "Showing " + text(state.cases.length()) + " of " + text(state.caseTotal)

  6. Dibuje el cuadro de búsqueda como un cuadro de texto enlazado a state.query, y dele un controlador de cambio que vuelva a la página cero y vuelva a ejecutar la consulta. Un cuadro de texto confirma su valor cuando se sale de él o cuando se pulsa Intro, así que es una consulta por búsqueda y no una por letra.

El tamaño de página​

Una lista desplegable, en el extremo derecho de la fila, que ofrece 10, 20, 30, 40, 50, 100 y 200:

  • Dibuje un cuadro, conviértalo en un control Lista desplegable y escriba los tamaños en su lista de opciones.
  • Enlace su Valor a state.pageSize: una ruta de estado simple, para que lo que alguien elige se vuelva a escribir antes de que se ejecute nada más.
  • Dele un controlador de cambio que devuelva la página a cero y vuelva a ejecutar la consulta.
  • Ponga las palabras Tamaño de página dentro del cuadro en lugar de a su lado. Lo que dibuja dentro de un control se convierte en su texto de marcador de posición y en el nombre que anuncia un lector de pantalla; un rótulo delante repite lo que ya dice la lista desplegable sin abrir.

Devuelve las palabras, no el número. Todo control que ofrece una elección lo hace; así que state.pageSize contiene "20", y usarlo en aritmética requiere num(…):

num(state.pageSize) * state.page

Sin él, BS Lang rechaza la pareja y dice Only number or string, que es la misma regla que hace que un rótulo necesite text(…): son las dos direcciones opuestas de la misma conversión. num(…) responde 0 para cualquier cosa que no sea un número, así que un selector sin tocar no puede romper la pantalla.

Vuelva siempre a la página cero cuando cambie la forma de la lista: un nuevo tamaño de página, una nueva búsqueda. Una lista filtrada que se quedó en la página siete no muestra nada, y parece una búsqueda rota.

Buscar en un selector​

El mismo contains es lo que hace utilizable una búsqueda de registros. En el ejemplo Support desk, la tarjeta del selector de contactos tiene su propio cuadro de texto, cuyo controlador de cambio vuelve a ejecutar

loadRecords("contact", "contacts", { top: 8, orderBy: "fullname",
  contains: { fullname: getState("contactQuery") } });

Esa es la respuesta del entorno, no un filtro sobre las ocho filas que ya hay en la tarjeta; es la diferencia entre un selector y un selector que solo puede encontrar lo que ya ha obtenido.

Lo que no hay aquí​

No hay o. contains acepta varios campos y los combina con Y, que no es lo que significa un cuadro de búsqueda sobre tres columnas. Buscar en cualquiera de varios campos es donde un filtro deja de ser una línea en un controlador y se convierte en el diseñador de consultas que ya tiene la plataforma.

Solución de problemas​

  • El rótulo dice Only number or string. — se está sumando un número a una frase. Envuélvalo en text(…). El mismo mensaje en una suma es el problema contrario: las palabras de un control se están usando como número, así que envuélvalas en num(…).
  • El tamaño de página no hace nada, o la lista se queda en blanco cuando cambia. — state.pageSize contiene las palabras de la lista desplegable. top y skip necesitan num(…) alrededor.
  • Siguiente nunca se deshabilita. — nada está escribiendo el total. Agregue countInto a la consulta.
  • Buscar no encuentra nada después de la primera página. — el controlador de búsqueda no está reiniciando page.
  • La lista vuelve a consultar con cada pulsación de tecla. — el controlador está en algo que se dispara con cada carácter. Póngalo en el cambio del cuadro, que se dispara al salir de él.

Escenarios relacionados​