Tabla ligera basada en Bootstrap La tabla de arranque de Bootstrap puede tener funciones potentes, como encabezados de mesa fijos, solo encabezados de tabla, clasificación, clasificación, búsqueda, búsqueda y tabla personalizadas, lo que puede mejorar mejor la eficiencia del desarrollo y reducir el tiempo de desarrollo.
1. Descripción del complemento: La tabla de arranque muestra el formato de la tabla de datos, proporcionando soporte rico, casillas de radio, casillas de verificación, clasificación, paginación, etc., descarga de complementos.
2. Características:
Desarrollado basado en Bootstrap 3 (también es compatible con Bootstrap 2)
Interfaz receptiva
Encabezado fijo
Totalmente configurable
Admitir atributos de datos
Mostrar/ocultar columnas
Mostrar/ocultar el encabezado de la mesa
Obtenga datos JSON usando AJAX
Haga clic en el encabezado de la tabla para ordenarlo simplemente
Admite visualización de columna personalizada
Soporte Single/Repelect
Función de paginación potente
Apoyo el diseño de la tarjeta de negocios
Admite multilingüe
3. Cómo usar:
1) Introduzca la biblioteca Bootstrap (si su proyecto aún no se usa) y Bootstrap-Table.css en la etiqueta de cabeza de la página HTML.
<link rel = "stylesheet" href = "bootstrap.min.css"> <link rel = "stylesheet" href = "bootstrap-table.css">
2) Introduzca la biblioteca jQuery, la biblioteca de bootstrap (si su proyecto aún no se usa) y bootstrap-table.js antes de que se cierre la etiqueta de cabeza o la etiqueta del cuerpo (recomendado).
<script src = "jQuery.min.js"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-table.js"> </script>
3) Especifique la fuente de datos, aquí hay dos formas
Método 1: pasar la etiqueta del atributo de datos
Configuración de datos-toggle = "Tabla" en una tabla normal habilita la tabla Bootstrap sin escribir JavaScript.
<Tabla Data-Toggle = "Tabla" data-url = "data.json"> <tead> ... </tead> </table>
Método 2: Configure la fuente de datos a través de JavaScript
Habilitar la tabla con atributo de identificación a través de JavaScript.
$ ('#table'). bootstraptable ({url: 'data.json'});:4. Descripción del error:
Al configurar el formateador de campo usando el método de atributo de etiqueta, descubrí que no había efecto y que la imagen no estaba clara. Puede descargar directamente el ejemplo de investigación y descargar la dirección.
Por ejemplo: <th data-field = "sex" data-formatter = "format_sex"> género </th>
1) Razón:
Bootstrap-Table.js Line 399, solo el tipo de formato está funcionando en el código.
2) Solución:
Modifique el bloque de código en la línea 399:
Antes de la modificación
if (typeof thy.header.formatters [j] === 'function') {value = that.header.formatters [j] (valor, elemento);}Después de la modificación:
if (typeof thy.header.formatters [j] === 'function') {value = that.header.formatters [j] (valor, elemento); } else if (typeof thy.header.formatters [j] === 'string') {if (typeof window [that.header.Formatters [j]] === '' function ') {value = window [that.header.formatters [j]] (valor, elemento); }}Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es el método de uso de la tabla Bootstrap compartida con usted. Espero que sea útil para usted dominar el método de uso de la tabla Bootstrap.