Options de Bootstrap Table

L'API des options de table de Bootstrap Table.

Sur cette page

Les options de table sont définies dans jQuery.fn.bootstrapTable.defaults.

Remarque : Les noms d’options ci-dessous (par exemple, ajax, buttons, cache) sont les noms de propriété exacts à utiliser lors de l’initialisation de Bootstrap Table via JavaScript.

Par exemple :

$('#table').bootstrapTable({
  ajax: yourFunction,
  cache: false,
  ...
})

-

Attribut : data-toggle
Type : String
Détail :

Activez bootstrap table sans écrire de JavaScript.
Par défaut : 'table'
Exemple : Depuis HTML

ajax

Attribut : data-ajax
Type : Function
Détail :

Une méthode pour remplacer l’appel ajax. Doit implémenter la même API que la méthode ajax de jQuery.
Par défaut : undefined
Exemple : Table AJAX

ajaxOptions

Attribut : data-ajax-options
Type : Object
Détail :

Options supplémentaires pour soumettre la requête ajax. Liste des valeurs : jQuery.ajax.
Par défaut : {}
Exemple : Options AJAX

buttons

Attribut : data-buttons
Type : Function
Détail :

Cette option permet de créer/ajouter des boutons personnalisés à la “barre de boutons” (en haut à droite de la table). Ces boutons peuvent être triés avec l’option de table buttonsOrder, la clé/le nom utilisé pour l’événement doit être utilisé pour cela !

Le bouton personnalisé est hautement configurable, les options suivantes existent :
- text
  - Description : Cette option est utilisée pour l’option de table showButtonText.
  - Type : String
- icon
  - Description : Cette option est utilisée pour l’option de table showButtonIcons.
  - Type : String - Seule la classe d’icône est nécessaire, par exemple fa-users
- render
  - Description : Définissez cette option sur false pour masquer le bouton par défaut, le bouton devient à nouveau visible lorsque vous ajoutez l’attribut de données data-show-button-name="true".
- attributes
  - Description : Cette option permet d’ajouter des attributs html supplémentaires, par exemple title
  - Type : Object
  - Exemple : {title: 'Button title'}
- html
  - Description : Si vous ne voulez pas autogénérer le html, vous pouvez utiliser cette option pour insérer votre html personnalisé. L’option event ne fonctionne que si votre HTML personnalisé contient name="button-name". Si cette option est utilisée, les options suivantes seront ignorées :
    - text
    - icon
    - attributes
  - Type : Function|String
- event
  - Description : Doit être utilisé si vous voulez ajouter un événement au bouton
  - Type : Function|Object|String
L’option event peut être configurée de trois manières. Un événement avec l’événement click :
```
{
  'event': () => { }
}
```
Un événement avec un type d’événement auto-défini :
```
  {
    'event': {
      'mouseenter': () => { }
    }
  }
```
Plusieurs événements avec des types d’événements auto-définis :
```
  {
    'event': {
      'click': () => { },
      'mouseenter': () => { },
      'mouseleave': () => { }
    }
  }
```
Astuce : Au lieu de fonctions inline, vous pouvez également utiliser des noms de fonctions.

Un bouton personnalisé configuré pourrait ressembler à ceci :
```
{
  btnRemoveEvenRows: {
    'text': 'Supprimer les lignes paires',
    'icon': 'fa-trash',
    'event': () => {
      // FAIRE DES CHOSES POUR SUPPRIMER LES LIGNES PAIRES
    },
    'attributes': {
      'title': 'Supprimer toutes les lignes qui ont un ID pair'
    }
  }
}
```
Par défaut : {}
Exemple : Boutons

buttonsAlign

Attribut : data-buttons-align
Type : String
Détail :

Indique comment aligner les boutons de la barre d’outils. 'left', 'right' peuvent être utilisés.
Par défaut : 'right'
Exemple : Alignement des boutons

buttonsAttributeTitle

Attribut : data-buttons-attribute-title
Type : String
Détail :

Personnalisez l’attribut title des boutons de la barre d’outils, qui est principalement utilisé pour personnaliser le style de la barre d’outils.
Par défaut : 'title'
Exemple : Titre de l’attribut des boutons

buttonsClass

Attribut : data-buttons-class
Type : String
Détail :

Définit la classe (ajoutée après 'btn-') des boutons de la table.
Par défaut : 'secondary'
Exemple : Classe des boutons

buttonsOrder

Attribut : data-buttons-order
Type : Array
Détail :

Indique comment personnaliser l’ordre des boutons de la barre d’outils.
Par défaut : ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']
Exemple : Ordre des boutons

buttonsPrefix

Attribut : data-buttons-prefix
Type : String
Détail :

Définit le préfixe des boutons de la table.
Par défaut : 'btn'
Exemple : Préfixe des boutons

buttonsToolbar

Attribut : data-buttons-toolbar
Type : String/Node
Détail :

Un sélecteur jQuery qui indique la barre d’outils des boutons personnalisée, par exemple : #buttons-toolbar, .buttons-toolbar, ou un nœud DOM.
Par défaut : undefined
Exemple : Barre d’outils des boutons

cache

Attribut : data-cache
Type : Boolean
Détail :

Définissez false pour désactiver la mise en cache des requêtes AJAX.
Par défaut : true
Exemple : Cache de table

cardView

Attribut : data-card-view
Type : Boolean
Détail :

Définissez true pour afficher la table en mode carte, par exemple, vue mobile.
Par défaut : false
Exemple : Vue carte

checkboxHeader

Attribut : data-checkbox-header
Type : Boolean
Détail :

Définissez false pour masquer la case à cocher “tout sélectionner” dans la ligne d’en-tête.
Par défaut : true
Exemple : En-tête de case à cocher

classes

Attribut : data-classes
Type : String
Détail :

Le nom de classe de la table. 'table', 'table-bordered', 'table-hover', 'table-striped', 'table-dark', 'table-sm' et 'table-borderless' peuvent être utilisés. Par défaut, la table est bordée.
Par défaut : 'table table-bordered table-hover'
Exemple : Classes de table

clickToSelect

Attribut : data-click-to-select
Type : Boolean
Détail :

Définissez true pour sélectionner la case à cocher ou la case radio en cliquant sur les lignes.
Par défaut : false
Exemple : Cliquez pour sélectionner

columns

Attribut : -
Type : Array
Détail :

L’objet de configuration des colonnes de la table. Voir les propriétés de colonne pour plus de détails.
Par défaut : []
Exemple : Colonnes de table

contentType

Attribut : data-content-type
Type : String
Détail :

Le type de contenu de la requête de données distantes, par exemple : application/x-www-form-urlencoded.
Par défaut : 'application/json'
Exemple : Type de contenu

customSearch

Attribut : data-custom-search
Type : Function
Détail :

La fonction de recherche personnalisée est exécutée à la place de la fonction de recherche intégrée, prend trois paramètres :
- data : les données de la table.
- text : le texte de recherche.
- filter : l’objet de filtre de la méthode filterBy.
Exemple d’utilisation :
```
function customSearch(data, text) {
  return data.filter(function (row) {
    return row.field.indexOf(text) > -1
  })
}
```
Par défaut : undefined
Exemple : Recherche personnalisée

customSort

Attribut : data-custom-sort
Type : Function
Détail :

La fonction de tri personnalisée est exécutée à la place de la fonction de tri intégrée, prend trois paramètres :
- sortName : le nom de tri.
- sortOrder : l’ordre de tri.
- data : les données des lignes.
Par défaut : undefined
Exemple : Tri personnalisé

data

Attribut : data-data
Type : Array | Object
Détail :

Les données à charger.

Si dans les données il y a une propriété _<field>_rowspan ou _<field>_colspan, alors les cellules seront fusionnées automatiquement, par exemple :
```
$table.bootstrapTable({
  data: [
    {
      id: 1,
      name: 'Élément 1',
      _name_rowspan: 2,
      price: '$1'
    },
    {
      id: 2,
      price: '$2'
    }
  ]
})
```
Si vous utilisez cette fonctionnalité, les data sont nécessaires pour garantir que le format est correct.
Par défaut : []
Exemple : Depuis les données

dataField

Attribut : data-data-field
Type : String
Détail :

Clé dans le JSON entrant contenant la liste de données 'rows'.
Par défaut : 'rows'
Exemple : Champ Total/Data

dataType

Attribut : data-data-type
Type : String
Détail :

Le type de données que vous attendez du serveur.
Par défaut : 'json'
Exemple : Type de données

detailFilter

Attribut : data-detail-filter
Type : Function
Détail :

Activez l’expansion par ligne lorsque detailView est défini sur true. Renvoie true, et la ligne sera activée pour l’expansion, renvoie false et l’expansion de la ligne sera désactivée. La fonction par défaut renvoie true pour permettre l’expansion de toutes les lignes.
Par défaut : function(index, row) { return true }
Exemple : Filtre de détail

detailFormatter

Attribut : data-detail-formatter
Type : Function
Détail :

Formattez votre vue détaillée lorsque detailView est défini sur true. Renvoie une chaîne, et elle sera ajoutée à la cellule de vue détaillée, éventuellement rendez l’élément directement en utilisant le troisième paramètre, qui est un élément jQuery de la cellule cible.
Par défaut : function(index, row, element) { return '' }
Exemple : Vue détaillée

detailView

Attribut : data-detail-view
Type : Boolean
Détail :

Définissez true pour afficher une table de vue détaillée. Vous pouvez définir l’option uniqueId pour maintenir l’état de la vue détaillée lors du rafraîchissement de la table.
Par défaut : false
Exemple : Vue détaillée UniqueId

detailViewAlign

Attribut : data-detail-view-align
Type : String
Détail :

Indique comment aligner l’icône de vue détaillée. 'left', 'right' peuvent être utilisés.
Par défaut : 'left'
Exemple : Alignement de la vue détaillée

detailViewByClick

Attribut : data-detail-view-by-click
Type : Boolean
Détail :

Définissez true pour basculer la vue détaillée lorsqu’une cellule est cliquée.
Par défaut : false
Exemple : Icône de vue détaillée

detailViewIcon

Attribut : data-detail-view-icon
Type : Boolean
Détail :

Définissez true pour afficher la colonne de vue détaillée (icône plus/moins).
Par défaut : true
Exemple : Icône de vue détaillée

escape

Attribut : data-escape
Type : Boolean
Détail :

Échappe une chaîne pour insertion dans HTML, en remplaçant les caractères &, <, >, ", ` et '. Pour le désactiver pour les titres de colonne, consultez l’option escapeTitle.
Par défaut : false
Exemple : Échappement de table

escapeTitle

Attribut : data-escape-title
Type : Boolean
Détail :

Bascule si l’option escape doit être appliquée aux titres de colonne.
Par défaut : true
Exemple : Titre d’échappement de table

Attribut : data-filter-options
Type : Boolean
Détail :

Définissez les options de filtre par défaut de l’algorithme, filterAlgorithm: 'and' signifie que tous les filtres donnés doivent correspondre, filterAlgorithm: 'or' signifie que l’un des filtres donnés doit correspondre.
Par défaut : { filterAlgorithm: 'and' }
Exemple : Options de filtre

fixedScroll

Attribut : data-fixed-scroll
Type : Boolean
Détail :

Définissez true pour activer la position fixe de la barre de défilement de la table lors du chargement des données.
Par défaut : false
Exemple : Défilement fixe

footerField

Attribut : data-footer-field
Type : String

Détail :

Définit la clé de l’objet footer (à partir du tableau de données ou de la réponse JSON du serveur). L’objet footer peut être utilisé pour définir la colspan et/ou la valeur du footer. Se déclenche uniquement lorsque data-pagination est true et data-side-pagination est server.

  {
    "rows": [
      {
        "id": 0,
        "name": "Élément 0",
        "price": "$0",
        "amount": 3
      }
    ],
    "footer": {
      "id": "footer id",
      "_id_colspan": 2,
      "name": "footer name"
    }
  }

Par défaut : footerField
Exemple : Champ footer

footerStyle

Attribut : data-footer-style
Type : Function
Détail :

La fonction de formatage du style du footer, prend un paramètre :
- column : l’objet colonne.
Prend en charge classes ou css. Exemple d’utilisation :
```
function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Par défaut : {}
Exemple : Style du footer

headerStyle

Attribut : data-header-style
Type : Function
Détail :

La fonction de formatage du style de l’en-tête, prend un paramètre :
- column : l’objet colonne.
Prend en charge classes ou css. Exemple d’utilisation :
```
function headerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Par défaut : {}
Exemple : Style de l’en-tête

height

Attribut : data-height
Type : Number
Détail :

La hauteur de la table, active un en-tête fixe de la table.
Par défaut : undefined
Exemple : Hauteur de table

icons

Attribut : data-icons
Type : Object
Détail :

Définit les icônes utilisées dans la barre d’outils, la pagination et la vue détaillée.

Par défaut :

{
  paginationSwitchDown: 'fa-caret-square-down',
  paginationSwitchUp: 'fa-caret-square-up',
  refresh: 'fa-sync',
  toggleOff: 'fa-toggle-off',
  toggleOn: 'fa-toggle-on',
  columns: 'fa-th-list',
  fullscreen: 'fa-arrows-alt',
  detailOpen: 'fa-plus',
  detailClose: 'fa-minus'
}

Exemple : Icônes de table

iconSize

Attribut : data-icon-size
Type : String
Détail :

Définit la taille de l’icône, undefined, 'lg', 'sm' peuvent être utilisés.
Par défaut : undefined
Exemple : Taille de l’icône

iconsPrefix

Attribut : data-icons-prefix
Type : String

Détail :

Définit le nom de l’ensemble d’icônes. Par défaut, cette option est automatiquement calculée par le thème.

{
  bootstrap3: 'glyphicon',
  bootstrap4: 'fa',
  bootstrap5: 'bi',
  'bootstrap-table': 'icon',
  bulma: 'fa',
  foundation: 'fa',
  materialize: 'material-icons',
  semantic: 'fa'
}

Par défaut : undefined
Exemple : Préfixe des icônes

idField

Attribut : data-id-field
Type : String
Détail :

Indique quel champ sera utilisé comme valeur de case à cocher/radio, c’est le pendant de selectItemName.
Par défaut : undefined
Exemple : Champ ID

ignoreClickToSelectOn

Attribut : data-ignore-click-to-select-on
Type : Function
Détail :

Définissez les éléments à ignorer clickToSelect sur. Prend un paramètre :
- element : l’élément cliqué.
Renvoie true si le clic doit être ignoré, false si le clic doit entraîner la sélection de la ligne. Cette option n’est pertinente que si clickToSelect est true.
Par défaut : { return ['A', 'BUTTON'].includes(tagName) }
Exemple : Ignorer le clic pour sélectionner sur

loadingFontSize

Attribut : data-loading-font-size
Type : String
Détail :

Pour définir la taille de police du texte de chargement, la valeur par défaut est 'auto', calculée automatiquement selon la largeur de la table, entre 12px et 32px.
Par défaut : 'auto'
Exemple : Taille de police de chargement

loadingTemplate

Attribut : data-loading-template
Type : Function
Détail :

Pour personnaliser le type de chargement par vous-même. L’objet de paramètres contient :
- loadingMessage: la locale formatLoadingMessage.

Par défaut :

function (loadingMessage) {
  return '<span class="loading-wrap">' +
    '<span class="loading-text">' +
    loadingMessage +
    '</span>' +
    '<span class="animation-wrap"><span class="animation-dot"></span></span>' +
    '</span>'
}

Exemple : Modèle de chargement

locale

Attribut : data-locale
Type : String
Détail :

Définissez la locale utilisée par la table (par exemple, 'zh-CN'). Avant d’utiliser cette option, le fichier de locale correspondant doit être préchargé.

Le système prend en charge un mécanisme de secours pour les locales, tentant de les charger dans l’ordre de priorité suivant :
- Première priorité : Tentative de chargement de la locale complète spécifiée (par exemple, 'zh-CN')
- Deuxième priorité : Tentative de conversion des underscores _ en tirets - et de mise en majuscule du code de région (par exemple, convertir 'zh_CN' en 'zh-CN')
- Troisième priorité : Tentative d’utilisation du code de langue court (par exemple, revenir de 'zh-CN' à 'zh')
- Dernier recours : Utiliser le dernier fichier de locale chargé (si aucun fichier de locale n’est chargé, utiliser la locale par défaut intégrée)
Remarque : Définir cette option sur undefined ou une chaîne vide utilisera automatiquement la dernière locale chargée (si aucun fichier de locale n’est chargé, 'en-US' est utilisé par défaut).
Par défaut : undefined
Exemple : Locale de table

maintainMetaData

Attribut : data-maintain-meta-data
Type : Boolean
Détail :

Définissez true pour conserver les métadonnées suivantes lors du changement de page et de recherche :
- lignes sélectionnées
- lignes cachées
Par défaut : false
Exemple : Conserver les métadonnées

method

Attribut : data-method
Type : String
Détail :

Le type de méthode pour demander des données distantes.
Par défaut : 'get'
Exemple : Méthode de table

minimumCountColumns

Attribut : data-minimum-count-columns
Type : Number
Détail :

Le nombre minimum de colonnes à masquer dans la liste déroulante des colonnes.
Par défaut : 1
Exemple : Nombre minimum de colonnes

multipleSelectRow

Attribut : data-multiple-select-row
Type : Boolean
Détail :

Définissez sur true pour activer la sélection multi-ligne.

Lorsqu’elle est activée, les utilisateurs peuvent sélectionner plusieurs lignes en utilisant les méthodes suivantes :
- Ctrl+clic : Sélectionner ou désélectionner des lignes individuelles (tout en gardant les autres lignes sélectionnées)
- Shift+clic : Sélectionner toutes les lignes entre la ligne actuellement sélectionnée et la ligne cliquée (sélection par plage)
- Clic régulier : Si aucune touche de modification n’est maintenue, ne sélectionne que la ligne cliquée tout en désélectionnant toutes les autres
Par défaut : false
Exemple : Sélection multiple de lignes

pageList

Attribut : data-page-list
Type : Array
Détail :

Lorsque vous définissez la propriété de pagination, initialisez la taille de page en sélectionnant la liste. Si vous incluez l’option 'all' ou 'unlimited', tous les enregistrements seront affichés dans votre table.

Astuce : Si la table a moins de lignes que l’option(s), les options seront automatiquement masquées. Pour désactiver cette fonctionnalité, vous pouvez définir smartDisplay sur false
Par défaut : [10, 25, 50, 100]
Exemple : Liste de pages

pageNumber

Attribut : data-page-number
Type : Number
Détail :

Lorsque vous définissez la propriété de pagination, initialisez le numéro de page.
Par défaut : 1
Exemple : Numéro de page

pageSize

Attribut : data-page-size
Type : Number
Détail :

Lorsque vous définissez la propriété de pagination, initialisez la taille de page.
Par défaut : 10
Exemple : Taille de page

pagination

Attribut : data-pagination
Type : Boolean
Détail :

Définissez true pour afficher une barre de pagination en bas de la table.
Par défaut : false
Exemple : Pagination de table

paginationDetailHAlign

Attribut : data-pagination-detail-h-align
Type : String
Détail :

Indique comment aligner les détails de la pagination. 'left', 'right' peuvent être utilisés.
Par défaut : 'left'
Exemple : Alignement horizontal de la pagination

paginationHAlign

Attribut : data-pagination-h-align
Type : String
Détail :

Indique comment aligner la pagination. 'left', 'right' peuvent être utilisés.
Par défaut : 'right'
Exemple : Alignement horizontal de la pagination

paginationLoadMore

Attribut : data-pagination-load-more
Type : Boolean
Détail :

Définissez true pour activer le chargement de plus de données via la pagination. Il n’est utilisé que dans la pagination côté client. En général, pour implémenter la fonctionnalité “charger plus”, il est souvent nécessaire de le combiner avec un responseHandler pour traiter les données retournées.

Il est principalement utilisé dans des scénarios où le nombre total de pages est inconnu. Dans de tels cas, il n’est pas possible d’afficher le nombre total exact ou de calculer le nombre total de pages. Au lieu de cela, un format d’affichage tel que “100+” peut être utilisé pour indiquer la présence d’éléments supplémentaires au-delà du nombre affiché. Lorsque l’utilisateur navigue vers la dernière page, davantage de données sont chargées, ainsi qu’une mise à jour des informations de pagination. Ce processus continue jusqu’à ce que tout le chargement des données soit terminé.
Par défaut : false
Exemple : Charger plus de pagination

paginationLoop

Attribut : data-pagination-loop
Type : Boolean
Détail :

Définissez true pour activer le mode de boucle continue de pagination.
Par défaut : true
Exemple : Boucle de pagination

paginationNextText

Attribut : data-pagination-next-text
Type : String
Détail :

Indique l’icône ou le texte à afficher dans les détails de la pagination, le bouton suivant.
Par défaut : '›'
Exemple : Texte de pagination

paginationPagesBySide

Attribut : data-pagination-pages-by-side
Type : Number
Détail :

Le nombre de pages de chaque côté (droit, gauche) de la page actuelle.
Par défaut : 1
Exemple : Numéro d’index de pagination

paginationParts

Attribut : data-pagination-parts
Type : Array
Détail :

Ces options définissent quelles parties de la pagination doivent être visibles.
- pageInfo Affiche quel ensemble de données sera affiché sur la page actuelle (par exemple, Affichage de 1 à 10 sur 54 lignes).
- pageInfoShort Similaire à pageInfo, il affiche uniquement combien de lignes la table a (par exemple, Affichage de 54 lignes).
- pageSize Affiche la liste déroulante qui définit combien de lignes doivent être affichées par page.
- pageList Affiche la partie principale de la pagination (la liste des pages).
Par défaut : ['pageInfo', 'pageSize', 'pageList']
Exemple : Parties de pagination

paginationPreText

Attribut : data-pagination-pre-text
Type : String
Détail :

Indique l’icône ou le texte affiché dans les détails de la pagination, le bouton précédent.
Par défaut : '‹'
Exemple : Texte de pagination

paginationSuccessivelySize

Attribut : data-pagination-successively-size
Type : Number
Détail :

Nombre maximum successif de pages consécutives.
Par défaut : 5
Exemple : Numéro d’index de pagination

paginationUseIntermediate

Attribut : data-pagination-use-intermediate
Type : Boolean
Détail :

Calculez et affichez des pages intermédiaires pour un accès rapide.
Par défaut : false
Exemple : Numéro d’index de pagination

paginationVAlign

Attribut : data-pagination-v-align
Type : String
Détail :

Indique comment aligner verticalement la pagination. 'top', 'bottom', 'both' (place la pagination en haut et en bas) peuvent être utilisés.
Par défaut : 'bottom'
Exemple : Alignement vertical de la pagination

queryParams

Attribut : data-query-params
Type : Function
Détail :

Lors de la demande de données distantes, vous pouvez envoyer des paramètres supplémentaires en modifiant queryParams.

Si queryParamsType = 'limit', l’objet params contient : limit, offset, search, sort, order.

Sinon, il contient : pageSize, pageNumber, searchText, sortName, sortOrder.

Renvoie false pour arrêter la requête.
Par défaut : function(params) { return params }
Exemple : Paramètres de requête

queryParamsType

Attribut : data-query-params-type
Type : String
Détail :

Définissez 'limit' pour envoyer des paramètres de requête avec le type RESTFul.
Par défaut : 'limit'
Exemple : Type de paramètres de requête

regexSearch

Attribut : data-regex-search
Type : Boolean
Détail :

Définissez true pour activer la recherche par expression rationnelle. Si cette option est activée, vous pouvez rechercher avec une expression rationnelle, par exemple [47a]$ pour tous les éléments qui se terminent par 4, 7 ou a. L’expression rationnelle peut être entrée avec /[47a]$/gim ou sans drapeaux [47a]$. Les drapeaux par défaut sont gim.
Par défaut : false
Exemple : Recherche par expression rationnelle

rememberOrder

Attribut : data-remember-order
Type : Boolean
Détail :

Définissez true pour mémoriser l’ordre de chaque colonne.
Par défaut : false
Exemple : Mémoriser l’ordre

responseHandler

Attribut : data-response-handler
Type : Function
Détail :

Avant de charger des données distantes, traitez le format de données de réponse. L’objet de paramètres contient :
- res : les données de réponse.
- jqXHR : objet jqXHR, qui est un ensemble de l’objet XMLHTTPRequest. Pour plus d’informations, consultez le Type jqXHR.
Par défaut : function(res) { return res }
Exemple : Gestionnaire de réponse

rowAttributes

Attribut : data-row-attributes
Type : Function
Détail :

La fonction de formatage des attributs de ligne, prend deux paramètres :
- row : les données d’enregistrement de la ligne.
- index : l’index de la ligne.
Prend en charge tous les attributs personnalisés.
Par défaut : {}
Exemple : Attributs de ligne

rowStyle

Attribut : data-row-style
Type : Function
Détail :

La fonction de formatage du style de ligne, prend deux paramètres :
- row : les données d’enregistrement de la ligne.
- index : l’index de la ligne.
Prend en charge classes ou css.
Par défaut : {}
Exemple : Style de ligne

search

Attribut : data-search
Type : Boolean
Détail :

Activez le champ de recherche.

Il existe trois façons de rechercher :
- La valeur contient la requête de recherche (Par défaut). Exemple : Github contient git.
- La valeur doit être identique à la requête de recherche. Exemple : Github (valeur) et Github (requête de recherche).
- Comparaisons (<, >, <=, =<, >=, =>). Exemple : 4 est plus grand que 3.
Notes :
- Si vous voulez utiliser un champ de recherche personnalisé, utilisez le searchSelector.
- Vous pouvez également rechercher via une expression rationnelle en utilisant l’option regexSearch.
- Si vous voulez envoyer des paramètres de recherche au serveur avec la pagination côté serveur, utilisez l’option searchable.
Par défaut : false
Exemple : Recherche de table

searchable

Attribut : data-searchable
Type : Boolean
Détail :

Définissez true pour envoyer des paramètres de recherche au serveur lors de l’utilisation de la pagination côté serveur.
Par défaut : false
Exemple : Recherchable

searchAccentNeutralise

Attribut : data-search-accent-neutralise
Type : Boolean
Détail :

Définissez sur true si vous voulez utiliser la fonctionnalité de neutralisation d’accent.
Par défaut : false
Exemple : Neutralisation d’accent de recherche

searchAlign

Attribut : data-search-align
Type : String
Détail :

Indique comment aligner le champ de recherche. 'left', 'right' peuvent être utilisés.
Par défaut : 'right'
Exemple : Alignement de recherche

searchHighlight

Attribut : data-search-highlight
Type : Boolean
Détail :

Définissez sur true pour mettre en évidence le texte recherché (en utilisant la balise HTML <mark>). Vous pouvez également définir un formateur de mise en évidence personnalisé, par exemple, pour des valeurs avec HTML ou pour utiliser une couleur de mise en évidence personnalisée.
Par défaut : 'false'
Exemple : Mise en évidence de recherche

searchOnEnterKey

Attribut : data-search-on-enter-key
Type : Boolean
Détail :

La méthode de recherche sera exécutée jusqu’à ce que la touche Entrée soit pressée.
Par défaut : false
Exemple : Rechercher sur la touche Entrée

searchSelector

Attribut : data-search-selector
Type : Boolean|String
Détail :

Si cette option est définie (doit être un sélecteur dom valide, par exemple #customSearch), l’élément dom trouvé (un élément input) sera utilisé comme recherche de table au lieu du champ de recherche intégré.
Par défaut : false
Exemple : Sélecteur de recherche

searchText

Attribut : data-search-text
Type : String
Détail :

Lorsque vous définissez la propriété de recherche, initialisez le texte de recherche.
Par défaut : ''
Exemple : Texte de recherche

searchTimeOut

Attribut : data-search-time-out
Type : Number
Détail :

Définissez le délai d’exécution de la recherche.
Par défaut : 500
Exemple : Délai de recherche

selectItemName

Attribut : data-select-item-name
Type : String
Détail :

Le nom de l’input radio ou checkbox.
Par défaut : 'btSelectItem'
Exemple : Champ ID

serverSort

Attribut : data-server-sort
Type : Boolean
Détail :

Définissez false pour trier les données côté client, ne fonctionne que lorsque sidePagination est server.
Par défaut : true
Exemple : Tri côté serveur

showButtonIcons

Attribut : data-show-button-icons
Type : Boolean
Détail :

Tous les boutons afficheront des icônes sur eux.
Par défaut : true
Exemple : Afficher les icônes des boutons

showButtonText

Attribut : data-show-button-text
Type : Boolean
Détail :

Tous les boutons afficheront du texte sur eux.
Par défaut : false
Exemple : Afficher le texte des boutons

showColumns

Attribut : data-show-columns
Type : Boolean
Détail :

Définissez true pour afficher la liste déroulante des colonnes. Nous pouvons définir l’option de colonne switchable sur false pour masquer l’élément de colonnes dans la liste déroulante. Le nombre minimum de colonnes sélectionnées peut être contrôlé avec l’option de table minimumCountColumns.
Par défaut : false
Exemple : Colonnes de base et Colonnes volumineuses

showColumnsSearch

Attribut : data-show-columns-search
Type : Boolean
Détail :

Définissez true pour afficher une recherche pour le filtre des colonnes.
Par défaut : false
Exemple : Recherche de colonnes

showColumnsToggleAll

Attribut : data-show-columns-toggle-all
Type : Boolean
Détail :

Définissez true pour afficher une case à cocher “tout basculer” dans l’option/liste déroulante des colonnes.
Par défaut : false
Exemple : Basculer toutes les colonnes

showExtendedPagination

Attribut : data-show-extended-pagination
Type : Boolean
Détail :

Définissez true pour afficher une version étendue de la pagination (y compris le compte de toutes les lignes sans filtres). Si vous utilisez la pagination côté serveur, veuillez utiliser totalNotFilteredField pour définir le compte.
Par défaut : false
Exemple : Afficher la pagination étendue

showFooter

Attribut : data-show-footer
Type : Boolean
Détail :

Définissez true pour afficher la ligne de pied de page récapitulative.
Par défaut : false
Exemple : Afficher le pied de page

showFullscreen

Attribut : data-show-fullscreen
Type : Boolean
Détail :

Définissez true pour afficher le bouton plein écran.
Par défaut : false
Exemple : Afficher le plein écran

showHeader

Attribut : data-show-header
Type : Boolean
Détail :

Définissez false pour masquer l’en-tête de la table.
Par défaut : true
Exemple : Afficher l’en-tête

showPaginationSwitch

Attribut : data-show-pagination-switch
Type : Boolean
Détail :

Définissez true pour afficher le bouton de bascule de pagination.
Par défaut : false
Exemple : Afficher le bouton de bascule de pagination

showRefresh

Attribut : data-show-refresh
Type : Boolean
Détail :

Définissez true pour afficher le bouton de rafraîchissement.
Par défaut : false
Exemple : Afficher le rafraîchissement

showSearchButton

Attribut : data-show-search-button
Type : Boolean
Détail :

Définissez true pour afficher un bouton de recherche derrière le champ de recherche. La recherche ne sera exécutée que si le bouton est pressé (par exemple, pour prévenir le trafic ou le temps de chargement).
Par défaut : false
Exemple : Afficher le bouton de recherche

showSearchClearButton

Attribut : data-show-search-clear-button
Type : Boolean
Détail :

Définissez true pour afficher un bouton de suppression derrière le champ de recherche, qui effacera le champ de recherche (également tous les filtres de filter-control (si activé)).
Par défaut : false
Exemple : Afficher le bouton de suppression de recherche

showToggle

Attribut : data-show-toggle
Type : Boolean
Détail :

Définissez true pour afficher le bouton de bascule pour basculer entre vue table/carte.
Par défaut : false
Exemple : Afficher le bascule

sidePagination

Attribut : data-side-pagination
Type : String
Détail :

Définit la pagination latérale de la table, ne peut être que 'client' ou 'server'. L’utilisation du côté 'server' nécessite de définir l’option 'url' ou 'ajax'.

Notez que le format de réponse serveur requis est différent selon que l’option 'sidePagination' est définie sur 'client' ou 'server'. Voir les exemples suivants :
- Sans pagination côté serveur
- Avec pagination côté serveur
Paramètres URL :

Lorsque sidePagination est défini sur server, bootstrap table fera des appels à l’url avec les paramètres URL suivants :
- offset avec une valeur entre 0 et total - 1, indiquant le premier enregistrement à inclure.
- limit avec une valeur indiquant le nombre de lignes par page.