TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar un widget de tabla de datos avanzada en Weebly?

5

Puede crear tablas simples usando HTML

etiqueta. Pero una tabla simple puede no ser siempre suficiente para mostrar sus datos y puede ser necesaria una tabla de datos compleja con múltiples características. Weebly ofrece la aplicación oficial Simple Table y puede tener otras opciones para insertar tablas en el sitio de Weebly. Sin embargo, a diferencia de WordPress, que tiene complementos dedicados para insertar tablas complejas, Weebly no tiene una opción incorporada.

Si desea agregar tablas de big data en Weebly, aquí explicaremos cómo agregar un widget de tabla de datos avanzada utilizando un complemento jQuery de datatables.net. La tabla se verá a continuación. Este código se basa en el popular marco Bootstrap y también explicaremos cómo agregar este widget en su sitio Weebly.

¿Cómo agregar un widget de tabla de datos avanzada en Weebly?

Tabla de datos avanzada de Bootstrap

Características de la tabla de datos

El widget de tabla de datos avanzada tendrá las siguientes características:

  • Clasificable en función de una sola columna.
  • Totalmente receptivo hecho con Bootstrap.
  • Filtra el contenido con 10, 25, 50 y 100 registros por página.
  • Cuadro de búsqueda para buscar el contenido en cualquiera de las celdas de la tabla.
  • Paginación elegante para navegar a cualquier página de la tabla con la opción de página anterior y siguiente.
  • Muestra el número de entradas que se muestran junto con el número total de entradas presentes en la tabla.

Descarga el código completo

Descargue el código completo para el widget de tabla de datos avanzada. El archivo de almacenamiento contiene los siguientes archivos:

  • advanced-table.html
  • dataTables.bootstrap.css
  • bootstrap.min.css
  • jquery.min.js
  • bootstrap.min.js
  • dataTables.bootstrap.js
  • jquery.dataTables.js

Los archivos CSS y JS se almacenan dentro de las carpetas "CSS" y "JS" para tener la estructura adecuada y el archivo HTML reside fuera de estos elementos. Puede usar cualquier estructura para almacenar archivos CSS / JS, pero debe agregar los vínculos correctamente según la estructura para vincúlelos en el archivo HTML. Si esta es una tarea difícil para usted, considere usar creadores de sitios web Bootstrap como Mobirise. Ofrecen bloques listos para usar para insertar en su sitio y publicar rápidamente.

Hay tres pasos para agregar el widget de tabla de datos:

1 Agregar CSS en Weebly

Agregue el siguiente CSS a la sección de código de encabezado de su página:

<link rel="stylesheet" href="css/bootstrap.min.css">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/dataTables.bootstrap.css"/> <style> .table-responsive { overflow-x: hidden; } @media (max-width: 800px) { .table-responsive { overflow-x: auto; } </style>

Aquí hemos utilizado el enlace CDN para conectar íconos de fuentes increíbles, si alojaste íconos increíbles de fuentes en tu sitio, entonces no necesitas agregar este enlace por separado. Asegúrese de reemplazar los enlaces "bootstrap.min.css" y "dataTables.bootstrap.css" por los enlaces correctos de su sitio.

2 Adición de secuencia de comandos

Agregue los siguientes scripts a la sección de código de pie de página de su página:

<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.dataTables.js"></script> <script src="js/dataTables.bootstrap.js"></script> <script> $(document).ready(function() { $('#dataTables-example').dataTable(); }); </script>

Hemos utilizado la biblioteca jQuery de Google con "jquery.min.js", recuerde que el widget no funcionará sin este script jQuery. Si su sitio usa jQuery de forma predeterminada, es posible que no necesite mencionar este enlace por separado según las versiones.

3 Agregar HTML

Agregue el siguiente código HTML dentro de un elemento de código incrustado. En este ejemplo, estamos creando una tabla con 5 columnas y el código contiene datos para el encabezado y una fila. Puede copiar / pegar los datos de la fila para agregar tantas filas a la tabla. Asegúrese de agregar todos los valores de celda, así como el encabezado y las filas tienen el mismo número de columnas para que la tabla funcione correctamente. Puede utilizar un guión (-) para indicar datos en blanco.

<div class="panel-body"> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover" id="dataTables-example"> <!-- This is the header section of the table --> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <!-- End of table header --> <tbody> <!-- This is the start of first row of the table --> <tr> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td>4</td> <td>X</td> </tr> <!-- End of first row (copy and paste this block to append additional rows --> <!-- Paste additional rows here --> </tbody> </table> </div> </div>

Obtenga más información sobre cómo insertar códigos en las secciones de encabezado y pie de página de su sitio Weebly.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More