La table Bootstrap de table légère basée sur Bootstrap peut avoir des fonctions puissantes telles que les en-têtes de table fixe, les en-têtes de table unique / vérifiables, le tri, la pagination, la recherche et les en-têtes de table personnalisés, ce qui peut mieux améliorer l'efficacité de développement et réduire le temps de développement.
1. Description du plug-in: Bootstrap Affiche le format de table de données, fournissant une prise en charge riche, des boîtes radio, des cases à cocher, du tri, du pagination, etc., téléchargement du plug-in.
2. Caractéristiques:
Développé basé sur Bootstrap 3 (Bootstrap 2 est également pris en charge)
Interface réactive
En-tête fixe
Entièrement configurable
Soutenir les attributs de données
Afficher / masquer les colonnes
Afficher / masquer l'en-tête de la table
Obtenez des données JSON en utilisant AJAX
Cliquez sur l'en-tête de la table pour le trier simplement
Prend en charge l'affichage de la colonne personnalisée
Prise en charge unique / reélection
Fonction de pagination puissante
Prise en charge de la disposition de la carte de visite
Prend en charge multilingue
3. Comment utiliser:
1) Présentez la bibliothèque bootstrap (si votre projet n'est pas encore utilisé) et Bootstrap-Table.css dans l'étiquette de tête de la page HTML.
<link rel = "Stylesheet" href = "bootstrap.min.css"> <link rel = "Stylesheet" href = "bootstrap-table.css">
2) Introduisez la bibliothèque JQuery, la bibliothèque bootstrap (si votre projet n'est pas utilisé) et bootstrap-table.js avant que l'étiquette de tête ou la balise corporelle ne soit fermée (recommandée).
<script src = "jQuery.min.js"> </ script> <script src = "bootstrap.min.js"> </ script> <script src = "bootstrap-table.js"> </ script>
3) Spécifiez la source de données, voici deux façons
Méthode 1: Passez la balise d'attribut de données
Le réglage Data-Toggle = "Table" dans un tableau normal permet une table bootstrap sans écrire JavaScript.
<table data-toggle = "table" data-url = "data.json"> <dead> ... </ tead> </ table>
Méthode 2: configurer la source de données via JavaScript
Activer la table avec l'attribut ID via JavaScript.
$ ('# Table'). bootstraptable ({url: 'data.json'});:4. Description du bogue:
Lors de la définition du formateur de champ à l'aide de la méthode d'attribut de balise, j'ai constaté qu'il n'y avait aucun effet et que l'image n'était pas claire. Vous pouvez télécharger directement l'exemple de la recherche et télécharger l'adresse.
Par exemple: <th data-field = "sexe" data-formatter = "format_sex"> Gender </th>
1) Raison:
Bootstrap-Table.js Line 399, seul le type de formateur est fonction dans le code.
2) Solution:
Modifiez le bloc de code sur la ligne 399:
Avant modification
if (typeof that.header.formatters [j] === 'fonction') {value = that.header.formatters [j] (valeur, élément);}Après modification:
if (typeof that.header.formatters [j] === 'function') {value = that.header.formatters [j] (valeur, élément); } else if (typeof that.header.formatters [j] === 'string') {if (typeof window [that.header.formatters [j]] === 'function') {value = window [that.header.formatters [j]] (value, item); }}Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est la méthode d'utilisation de la table bootstrap partagée avec vous. J'espère qu'il vous sera utile de maîtriser la méthode d'utilisation de la table bootstrap.