Voir sur GitHub

Bootstrap Table Filter Control

Extension Table Filter Control de Bootstrap Table.

Sur cette page

Utilisation

<link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css">
<script src="extensions/filter-control/bootstrap-table-filter-control.js"></script>

Exemple

Filter Control

Options

filterControl

  • Attribut : data-filter-control

  • type : Boolean

  • Détail :

    Définissez sur true pour ajouter un input ou un select dans la colonne.

  • Par défaut : false

filterControlVisible

  • Attribut : data-filter-control-visible

  • type : Boolean

  • Détail :

    Définissez sur false pour masquer les contrôles de filtre.

  • Par défaut : true

alignmentSelectControlOptions

  • Attribut : data-alignment-select-control-options

  • type : String

  • Détail :

    Définit l’alignement des options du contrôle select. Utilisez left, right ou auto.

  • Par défaut : undefined

filterControlContainer

  • Attribut : data-filter-control-container

  • type : Selector

  • Détail :

    Définissez par exemple #filter pour permettre un filtre d’entrée personnalisé dans un élément avec l’id filter. Chaque élément de filtre (input ou select) doit avoir la classe suivante bootstrap-table-filter-control-<FieldName> (<FieldName> doit être remplacé par le nom de Field défini).

  • Par défaut : false

filterDataCollector

  • Attribut : data-filter-data-collector

  • type : Function

  • Détail :

    Collecte les données qui seront ajoutées au filtre select, pour filtrer par exemple des étiquettes séparées par des virgules et affichées avec un formateur.

  • Par défaut : undefined

filterControlMultipleSearch

  • Attribut : data-filter-control-multiple-search

  • type : bool

  • Détail :

    Définissez sur true pour permettre la recherche de plusieurs valeurs à la fois. Les valeurs seront séparées par un délimiteur, voir l’option filterControlMultipleSearchDelimiter.

  • Par défaut : false

filterControlMultipleSearchDelimiter

  • Attribut : data-filter-control-multiple-search-delimiter

  • type : String

  • Détail :

    Définit le délimiteur qui sera utilisé pour séparer les valeurs de recherche dans l’option filterControlMultipleSearchDelimiter.

  • Par défaut : ,

filterControlSearchClear

  • Attribut : data-filter-control-search-clear

  • type : bool

  • Détail :

    Définissez sur true pour effacer les filtres de contrôle de filtre en utilisant l’option de table showSearchButton.

  • Par défaut : true

searchOnEnterKey

  • Attribut : data-search-on-enter-key

  • type : Boolean

  • Détail :

    Définissez sur true pour déclencher l’action de recherche lorsque l’utilisateur appuie sur la touche Entrée.

  • Par défaut : false

showFilterControlSwitch

  • Attribut : data-show-filter-control-switch

  • type : Boolean

  • Détail :

    Définissez sur true pour afficher le bouton de bascule du contrôle de filtre.

  • Par défaut : false

sortSelectOptions

  • Attribut : data-sort-select-options

  • type : Boolean

  • Détail :

    Définissez sur true pour trier les éléments d’option du contrôle select.

  • Par défaut : false

Options de colonne

filterControl

  • Attribut : data-filter-control

  • type : String

  • Détail :

    Définit input : affiche un contrôle d’entrée, select : affiche un contrôle select, datepicker : affiche un contrôle datepicker html5.

  • Par défaut : undefined

filterControlPlaceholder

  • attribute : data-filter-control-placeholder

  • type : String

  • Détail :

    Définissez ceci pour afficher un placeholder uniquement dans le contrôle de filtre d’entrée.

  • Par défaut : ''

filterCustomSearch

  • Attribut : data-filter-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 et prend quatre paramètres :

    • text : le texte de recherche.
    • value : la valeur de la colonne à comparer.
    • field : le nom de champ de la colonne.
    • data : les données de la table.

    Retourne false pour filtrer la colonne/ligne actuelle. Retourne true pour ne pas filtrer la colonne/ligne actuelle. Retourne null pour ignorer la recherche personnalisée pour la valeur actuelle.

  • Par défaut : undefined

filterData

  • Attribut : data-filter-data

  • type : String

  • Détail :

    Définit des valeurs de filtre select personnalisées, utilisez var:variable pour charger à partir d’une variable obj:variable.key pour charger à partir d’un objet url:http://www.example.com/data.json pour charger à partir d’un fichier JSON distant json:{key:data} pour charger à partir d’une chaîne JSON. func:functionName pour charger à partir d’une fonction.

  • Par défaut : undefined

filterDatepickerOptions

  • Attribut : data-filter-datepicker-options

  • type : Object

  • Détail :

    Si l’option datepicker est définie, utilisez cette option pour configurer le datepicker avec les options natives. Utilisez cette méthode : data-filter-datepicker-options='{"max":value1, "min": value2, "step": value3}'. Pour plus d’informations, consultez cette documentation

  • Par défaut : undefined

filterDefault

  • Attribut : data-filter-default

  • type : String

  • Détail :

    Définit la valeur par défaut du filtre.

  • Par défaut : undefined

filterOrderBy

  • attribute : data-filter-order-by

  • type : String

  • Détail :

    Définissez ceci pour trier les options dans un contrôle select par ordre croissant ('asc'), décroissant ('desc') ou dans l’ordre fourni par le serveur ('server').

  • Par défaut : 'asc'

filterStartsWithSearch

  • attribute : data-filter-starts-with-search

  • type : Boolean

  • Détail :

    Définissez sur true si vous souhaitez utiliser le mode de recherche par début de chaîne.

  • Par défaut : false

filterStrictSearch

  • Attribut : data-filter-strict-search

  • type : Boolean

  • Détail :

    Définissez sur true si vous souhaitez utiliser le mode de recherche stricte.

  • Par défaut : false

Icons

  • clear: 'glyphicon-trash icon-clear'
  • filterControlSwitchHide: 'glyphicon-zoom-out icon-zoom-out'
  • filterControlSwitchShow: 'glyphicon-zoom-in icon-zoom-in'

Événements

onColumnSearch(column-search.bs.table)

  • Déclenché lorsque nous recherchons dans les données de la colonne

onCreatedControls(created-controls.bs.table)

  • Déclenché lorsque nous recherchons dans les données de la colonne

Méthodes

triggerSearch

  • Déclenche manuellement l’action de recherche

clearFilterControl

  • Efface tous les contrôles ajoutés par ce plugin (similaire à l’option showSearchClearButton).

toggleFilterControl

  • Bascule la visibilité (affiche/masque) des contrôles de filtre.

Localisations

formatClearFilters

  • type : Function

  • Par défaut : function () { return "Effacer les filtres" }

formatFilterControlSwitch

  • type : Function

  • Par défaut : function () { return "Masquer/Afficher les contrôles" }

formatFilterControlSwitchHide

  • type : Function

  • Par défaut : function () { return "Masquer les contrôles" }

formatFilterControlSwitchShow

  • type : Function

  • Par défaut : function () { return "Afficher les contrôles" }