Paginación adaptativa. Bootstrap - Paginación (cuadro de navegación para la paginación)

La paginación, o simplemente la navegación página por página, es un elemento importante de cualquier sitio más o menos completo. Varios sistemas de gestión de contenido, en su mayor parte, tienen herramientas integradas para implementar la paginación. También hay muchos complementos separados escritos para este útil negocio, en la mayoría de los casos se crean utilizando la biblioteca. Todos estos complementos, diferentes en estilo de rendimiento y software. funcionalidad, pero lo más importante de todos ellos, es una gran alternativa a la implementación del lado del servidor de la paginación de sitios de gran contenido.

Propongo a consideración, en mi opinión, uno de los más fáciles Complementos de jQuery, para crear una navegación página por página que te ayude a organizar, una paginación atractiva y rápida.

Muy liviano, en todos los aspectos y en peso, y todo sobre conectividad, configuraciones, rápido para crear paginación, completo con tres estilos de diseño y cargado por soporte.

Por cierto, si no está satisfecho con los estilos estándar, puede usarlo, que no será difícil de atornillar. .css enchufar.

Ahora, echemos un vistazo más de cerca a cómo conectar correctamente el complemento y el archivo de estilo al documento, es decir, incrustarlo directamente en las páginas del sitio y revisar la configuración del complemento disponible.

Primero, por supuesto, necesita hacerse con un complemento, es decir, con el código fuente, en el que jquery javascript y el archivo de estilo css están cuidadosamente empaquetados.

Veamos paso a paso cómo usar el complemento:

Paso 1. Incluyendo jQuery

En el cuerpo de la página a la sección ... necesita conectar el marco jQuery, preferiblemente la versión 1.7.2, o más reciente, puede hacerlo usando un almacenamiento especial de Google:

Si ya tiene jQuery habilitado en su sitio y está trabajando con might y main, puede omitir de manera segura todos los gestos descritos anteriormente, lo principal es asegurarse de que la versión de jQuery no sea demasiado densa. En WordPress, por cierto, esto está bien.
A continuación, conectamos nuestro caballo de batalla: el complemento jquery.simplePagination.js:

No tiene que cercar en el jardín, simplemente elija el estilo que desee, claro, oscuro o compacto, y pegue el conjunto de reglas en el archivo .css de la hoja de estilo de su plantilla. Escribe tus propios estilos o usa Oreja, también una opción, en términos de originalidad y desarrollo de habilidades de construcción de sitios, es aún más preferible.

Paso 3. HTML

Para mostrar la barra de paginación en las páginas del sitio, donde planea colocarla, es más lógico y la mayoría de las veces, está en la parte inferior del contenido principal, debe escribir lo siguiente:
Para un fondo claro:

Tema compacto:

$ (function () ($ (# light-pagination) .pagination ((elementos: 100, itemsOnPage: 10, cssStyle: "light-theme"));));

En el ejemplo utilicé la inicialización para paginar el tema claro # paginación-luz, puedes cambiar el selector a otra cosa, para uno compacto es # paginación-compacta, o para un estilo oscuro # paginación-oscura. En este caso, no olvide cambiar también la clase en la función. cssStyle.
Kai ya escribí anteriormente, el complemento es muy flexible en la configuración, las siguientes opciones están disponibles para cambiar:

• elementos- El número total de elementos que se utilizarán para calcular las páginas. Defecto: 1 .
• itemsOnPage- El número de elementos que se muestran en cada página. Defecto: 1 .
• paginas- Opcional. Si se especifica, se ignoran los elementos y las opciones itemsOnPage. Establece el número de páginas de la lista.
• DisplayPages- Cuántos números de página deben estar visibles durante la navegación. Valor mínimo permitido: 3 , defecto: 5 .
• bordes- Cuántos números de página están visibles al principio y al final de la numeración. Valor por defecto: 2 .
• página actual- Qué página se seleccionará inmediatamente después del lanzamiento. Lógicamente, el valor predeterminado es: 1 .
• hrefTextPrefix- La cadena utilizada en el atributo HREF se agrega antes del número de página. Defecto: "# página-".
• hrefTextSuffix- La cadena utilizada en el atributo HREF se inserta después del número de página. El valor predeterminado es una cadena vacía.
• prevText- El texto del botón a la página anterior. Defecto: "Anterior".
• nextText- Texto del botón para la página siguiente. Defecto: "Próximo"
• cssStyle- Determinar Estilo CSS... Defecto: "Tema de luz"
• selectOnClick- Seleccionar una página después de hacer clic, por defecto - habilitado ( cierto), por qué no entendí por qué desactivarlo, pero existe esa posibilidad, valor: "falso".

Hemos cubierto las configuraciones más básicas. O funciones adicionales y los métodos disponibles para usar este complemento, puede averiguarlo estudiando la documentación directamente en la página del desarrollador.

Todo lo que puedo hacer es desearle buena suerte y éxito en el trabajo en sus nuevos proyectos.

C ollection of free HTML y Paginación CSS ejemplos de código: sensible, simple, diseño de materiales, puntos de navegación etc. Actualización de la colección de junio de 2018. 5 nuevos elementos.

Artículos relacionados

Sobre el codigo

Paginación / paginador receptivo en HTML y CSS. Cambie el tamaño de su navegador para mostrar un efecto interesante.

Responsive: sí

Dependencias: bootstrap.css

Sobre el codigo

Paginación de seguimiento de línea

La línea CSS sigue la paginación.

Responsive: sí

Dependencias: -

Sobre el codigo

Botones de paginación

Botones de paginación CSS puro.

Navegadores compatibles: Chrome, Firefox, Opera, Safari

Responsive: sí

Dependencias: -

Sobre el codigo

Paginación de línea con hover

Paginación de líneas CSS pura con efecto hover.

Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari

Responsive: sí

Dependencias: -

Sobre el codigo

Paginación de Pacman

Animación de paginación con HTML, CSS y JS.

Navegadores compatibles: Chrome, Edge, Firefox, Opera, Safari

Responsive: sí

Dependencias: -

Sobre el codigo

CSS simple.

Sobre el codigo

Puro Paginación CSS Pac-Man con animación al pasar el mouse.

Sobre el codigo

Paginación receptiva simple.

Sobre el codigo

Paginación HTML y CSS.

Sobre el codigo

Ejemplo de paginación que le permite navegar entre diferentes páginas. Este ejemplo debería tener atributos href para poder trabajar con una aplicación real que requiera paginación.

Sobre el codigo

Paginación con propiedades personalizadas de CSS.

Paginación opciones y diseños.
Hecho por MojoM
25 de mayo de 2017

GIF de demostración: Tolva de página SVG

Tolva de páginas HTML, CSS y SVG.
Hecho por Chris Gannon
14 de mayo de 2017

GIF de demostración: Paginación infinita

Paginación infinita en HTML y CSS.
Hecho por Mariusz Dabrowski
27 de abril de 2017

Sobre el codigo

Componentes CSS :.

12 ideas para la paginación de sitios web con HTML y CSS.
Hecho por rosa
3 de noviembre de 2016

GIF de demostración: Paginación

Paginación con HTML / CSS / JavaScript.
Hecho por JP Nothard
9 de octubre de 2016

Demostración GIF: Animación de desplazamiento de paginación

Animación de desplazamiento de paginación HTML y CSS.
Hecho por Elena Nazarova
12 de septiembre de 2016

Paginación con efecto hover.
Hecho por Andre Wichert
27 de agosto de 2016

Indicadores de paginación con HTML, CSS y JavaScript.
Hecho por Moses Holmström
19 de agosto de 2016

Hecho por Brendan Mullins
16 de agosto de 2016

Paginación Responsive Magic Line

Crea una línea mágica para tu paginación. Se ve impresionante.
Hecho por Ryan Yu
18 de febrero de 2015

Experimento de paginación alternativa, accesible y receptivo.
Hecho por Simon Goellner
11 de noviembre de 2014

GIF de demostración: Flechas de paginación

Flexión de flechas de paginación.
Hecho por Hakim El Hattab
18 de octubre de 2013

Los sitios suelen contener varias páginas. Pueden contener hasta 3-5 páginas, por ejemplo, en la página de destino, y tal vez más, mucho más.

Todo buen sitio debe contener navegación que permita al usuario navegar y navegar correctamente entre las páginas del sitio. Puede crear dicha paginación cuando Ayuda de JavaScript... En este artículo, hablaremos sobre cómo crear este tipo de navegación.

Una cosa más, además de JavaScript normal, el ejemplo usa Bootstrap 4. Su componente de paginación bootstrap se combina con la biblioteca jQuery, es decir, el complemento especial de paginación Buzina. Te permite dividir toda la información en varias páginas con la creación de navegación entre ellas.

Conectando los frameworks requeridos

Para trabajar con Bootstrap y JQuery, debe conectarlos. Esto se puede hacer en su Documento HTML usando etiquetas