Bootstrap Table Optionen

Die Tabellenoptionen-API von Bootstrap Table.

Auf dieser Seite

Die Tabellenoptionen sind in jQuery.fn.bootstrapTable.defaults definiert.

Hinweis: Die unten aufgeführten Optionsnamen (z. B. ajax, buttons, cache) sind die genauen Eigenschaftsnamen, die beim Initialisieren von Bootstrap Table über JavaScript verwendet werden sollten.

Beispiel:

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

-

Attribut: data-toggle
Typ: String
Detail:

Aktiviert Bootstrap Table ohne JavaScript zu schreiben.
Standard: 'table'
Beispiel: From HTML

ajax

Attribut: data-ajax
Typ: Function
Detail:

Eine Methode, um den AJAX-Aufruf zu ersetzen. Sollte die gleiche API wie die jQuery AJAX-Methode implementieren.
Standard: undefined
Beispiel: Table AJAX

ajaxOptions

Attribut: data-ajax-options
Typ: Object
Detail:

Zusätzliche Optionen für die Übermittlung von AJAX-Anfragen. Liste der Werte: jQuery.ajax.
Standard: {}
Beispiel: AJAX Options

buttons

Attribut: data-buttons
Typ: Function
Detail:

Mit dieser Option können Sie benutzerdefinierte Schaltfläche(n) in die “Schaltflächenleiste” (oben rechts in der Tabelle) erstellen/hinzufügen. Diese Schaltflächen können mit der Tabellenoption buttonsOrder sortiert werden, dazu sollte der verwendete Schlüssel/Name für das Ereignis verwendet werden!

Die benutzerdefinierte Schaltfläche ist hoch konfigurierbar, folgende Optionen existieren:
- text
  - Beschreibung: Diese Option wird für die showButtonText Tabellenoption verwendet.
  - Typ: String
- icon
  - Beschreibung: Diese Option wird für die showButtonIcons Tabellenoption verwendet.
  - Typ: String - Es wird nur die Icon-Klasse benötigt, z. B. fa-users
- render
  - Beschreibung: Setzen Sie diese Option auf false, um die Schaltfläche standardmäßig auszublenden. Die Schaltfläche wird wieder sichtbar, wenn Sie das Datenattribut data-show-button-name="true" hinzufügen.
- attributes
  - Beschreibung: Mit dieser Option können Sie zusätzliche HTML-Attribute hinzufügen, z. B. title
  - Typ: Object
  - Beispiel: {title: 'Button title'}
- html
  - Beschreibung: Wenn Sie nicht möchten, dass das HTML automatisch generiert wird, können Sie diese Option verwenden, um Ihr benutzerdefiniertes HTML einzufügen. Die event-Option funktioniert nur, wenn Ihr benutzerdefiniertes HTML name="button-name" enthält. Wenn diese Option verwendet wird, werden folgende Optionen ignoriert:
    - text
    - icon
    - attributes
  - Typ: Function|String
- event
  - Beschreibung: Sollte verwendet werden, wenn Sie einem Button ein Ereignis hinzufügen möchten
  - Typ: Function|Object|String
Die event-Option kann auf drei Arten konfiguriert werden. Ein Ereignis mit click-Ereignis:
```
{
  'event': () => { }
}
```
Ein Ereignis mit einem selbst definierten Ereignistyp:
```
  {
    'event': {
      'mouseenter': () => { }
    }
  }
```
Mehrere Ereignisse mit selbst definierten Ereignistypen:
```
  {
    'event': {
      'click': () => { },
      'mouseenter': () => { },
      'mouseleave': () => { }
    }
  }
```
Hinweis: Anstelle von Inline-Funktionen können Sie auch Funktionsnamen verwenden.

Eine konfigurierte benutzerdefinierte Schaltfläche könnte wie folgt aussehen:
```
{
  btnRemoveEvenRows: {
    'text': 'Remove even Rows',
    'icon': 'fa-trash',
    'event': () => {
      //DO STUFF TO REMOVE EVEN ROWS
    },
    'attributes': {
      'title': 'Remove all rows which has a even id'
    }
  }
}
```
Standard: {}
Beispiel: Buttons

buttonsAlign

Attribut: data-buttons-align
Typ: String
Detail:

Gibt an, wie die Toolbar-Schaltflächen ausgerichtet werden sollen. 'left', 'right' können verwendet werden.
Standard: 'right'
Beispiel: Buttons Align

buttonsAttributeTitle

Attribut: data-buttons-attribute-title
Typ: String
Detail:

Passen Sie das title-Attribut der Toolbar-Schaltflächen an, das hauptsächlich zur Anpassung des Toolbar-Stils verwendet wird.
Standard: 'title'
Beispiel: Buttons Attribute Title

buttonsClass

Attribut: data-buttons-class
Typ: String
Detail:

Definiert die Klasse (hinzugefügt nach 'btn-') der Tabellen-Schaltflächen.
Standard: 'secondary'
Beispiel: Buttons Class

buttonsOrder

Attribut: data-buttons-order
Typ: Array
Detail:

Gibt an, wie die Toolbar-Schaltflächen benutzerdefiniert sortiert werden sollen.
Standard: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']
Beispiel: Buttons Order

buttonsPrefix

Attribut: data-buttons-prefix
Typ: String
Detail:

Definiert das Präfix der Tabellen-Schaltflächen.
Standard: 'btn'
Beispiel: Buttons Prefix

buttonsToolbar

Attribut: data-buttons-toolbar
Typ: String/Node
Detail:

Ein jQuery-Selektor, der die benutzerdefinierte Schaltflächen-Toolbar angibt, z. B.: #buttons-toolbar, .buttons-toolbar oder ein DOM-Knoten.
Standard: undefined
Beispiel: Buttons Toolbar

cache

Attribut: data-cache
Typ: Boolean
Detail:

Setzen Sie false, um das Caching von AJAX-Anfragen zu deaktivieren.
Standard: true
Beispiel: Table Cache

cardView

Attribut: data-card-view
Typ: Boolean
Detail:

Setzen Sie true, um die Kartenansicht der Tabelle anzuzeigen, z. B. für die mobile Ansicht.
Standard: false
Beispiel: Card View

checkboxHeader

Attribut: data-checkbox-header
Typ: Boolean
Detail:

Setzen Sie false, um das “Alle auswählen”-Kontrollkästchen in der Kopfezeile auszublenden.
Standard: true
Beispiel: Checkbox Header

classes

Attribut: data-classes
Typ: String
Detail:

Der Klassenname der Tabelle. 'table', 'table-bordered', 'table-hover', 'table-striped', 'table-dark', 'table-sm' und 'table-borderless' können verwendet werden. Standardmäßig ist die Tabelle mit Rändern versehen.
Standard: 'table table-bordered table-hover'
Beispiel: Table Classes

clickToSelect

Attribut: data-click-to-select
Typ: Boolean
Detail:

Setzen Sie true, um das Kontrollkästchen oder Optionsfeld auszuwählen, wenn Sie auf Zeilen klicken.
Standard: false
Beispiel: Click To Select

columns

Attribut: -
Typ: Array
Detail:

Das Tabellenspalten-Konfigurationsobjekt. Siehe Spalten-Eigenschaften für weitere Details.
Standard: []
Beispiel: Table Columns

contentType

Attribut: data-content-type
Typ: String
Detail:

Der Content-Type der Anforderung von Remote-Daten, z. B.: application/x-www-form-urlencoded.
Standard: 'application/json'
Beispiel: Content Type

customSearch

Attribut: data-custom-search
Typ: Function
Detail:

Die benutzerdefinierte Suchfunktion wird statt der eingebauten Suchfunktion ausgeführt und nimmt drei Parameter entgegen:
- data: die Tabellendaten.
- text: der Suchtext.
- filter: das Filterobjekt aus der filterBy-Methode.
Beispiel für die Verwendung:
```
function customSearch(data, text) {
  return data.filter(function (row) {
    return row.field.indexOf(text) > -1
  })
}
```
Standard: undefined
Beispiel: Custom Search

customSort

Attribut: data-custom-sort
Typ: Function
Detail:

Die benutzerdefinierte Sortierfunktion wird statt der eingebauten Sortierfunktion ausgeführt und nimmt drei Parameter entgegen:
- sortName: der Sortierungsname.
- sortOrder: die Sortierreihenfolge.
- data: die Zeilendaten.
Standard: undefined
Beispiel: Custom Order

data

Attribut: data-data
Typ: Array | Object
Detail:

Die zu ladenden Daten.

Wenn in den Daten die Eigenschaft _<field>_rowspan oder _<field>_colspan vorhanden ist, werden die Zellen automatisch zusammengeführt, z. B.:
```
$table.bootstrapTable({
  data: [
    {
      id: 1,
      name: 'Item 1',
      _name_rowspan: 2,
      price: '$1'
    },
    {
      id: 2,
      price: '$2'
    }
  ]
})
```
Wenn Sie diese Funktion verwenden, ist data erforderlich, um sicherzustellen, dass das Format korrekt ist.
Standard: []
Beispiel: From Data

dataField

Attribut: data-data-field
Typ: String
Detail:

Schlüssel im eingehenden JSON, der die 'rows'-Datenliste enthält.
Standard: 'rows'
Beispiel: Total/Data Field

dataType

Attribut: data-data-type
Typ: String
Detail:

Der Typ der Daten, die Sie vom Server erwarten.
Standard: 'json'
Beispiel: Data Type

detailFilter

Attribut: data-detail-filter
Typ: Function
Detail:

Aktiviert die Erweiterung pro Zeile, wenn detailView auf true gesetzt ist. Gibt true zurück, und die Zeile wird für die Erweiterung aktiviert, gibt false zurück und die Erweiterung für die Zeile wird deaktiviert. Die Standardfunktion gibt true zurück, um die Erweiterung für alle Zeilen zu ermöglichen.
Standard: function(index, row) { return true }
Beispiel: Detail Filter

detailFormatter

Attribut: data-detail-formatter
Typ: Function
Detail:

Formatieren Sie Ihre Detailansicht, wenn detailView auf true gesetzt ist. Geben Sie einen String zurück, und er wird in die Detailansicht-Zelle eingefügt, optional rendern Sie das Element direkt mit dem dritten Parameter, der ein jQuery-Element der Zielzelle ist.
Standard: function(index, row, element) { return '' }
Beispiel: Detail View

detailView

Attribut: data-detail-view
Typ: Boolean
Detail:

Setzen Sie true, um eine Detailansicht-Tabelle anzuzeigen. Sie können die uniqueId-Option setzen, um den Detailansicht-Zustand beim Aktualisieren der Tabelle beizubehalten.
Standard: false
Beispiel: Detail View UniqueId

detailViewAlign

Attribut: data-detail-view-align
Typ: String
Detail:

Gibt an, wie das Detailansicht-Icon ausgerichtet werden soll. 'left', 'right' können verwendet werden.
Standard: 'left'
Beispiel: Detail view Align

detailViewByClick

Attribut: data-detail-view-by-click
Typ: Boolean
Detail:

Setzen Sie true, um die Detailansicht umzuschalten, wenn eine Zelle angeklickt wird.
Standard: false
Beispiel: Detail View Icon

detailViewIcon

Attribut: data-detail-view-icon
Typ: Boolean
Detail:

Setzen Sie true, um die Detailansicht-Spalte (Plus/Minus-Icon) anzuzeigen.
Standard: true
Beispiel: Detail View Icon

escape

Attribut: data-escape
Typ: Boolean
Detail:

Escaped eine Zeichenkette für den Einfügung in HTML, ersetzt &, <, >, ", ` und ' Zeichen. Um es für die Spaltenüberschriften zu deaktivieren, prüfen Sie die escapeTitle-Option.
Standard: false
Beispiel: Table Escape

escapeTitle

Attribut: data-escape-title
Typ: Boolean
Detail:

Schaltet um, ob die escape-Option auf die Spaltenüberschriften angewendet werden soll.
Standard: true
Beispiel: Table Escape title

Attribut: data-filter-options
Typ: Boolean
Detail:

Definiert die Standardfilteroptionen des Algorithmus, filterAlgorithm: 'and' bedeutet, dass alle angegebenen Filter übereinstimmen müssen, filterAlgorithm: 'or' bedeutet, dass einer der angegebenen Filter übereinstimmen muss.
Standard: { filterAlgorithm: 'and' }
Beispiel: Filter Options

fixedScroll

Attribut: data-fixed-scroll
Typ: Boolean
Detail:

Setzen Sie true, um die feste Scrollbar-Position der Tabelle beim Laden von Daten zu aktivieren.
Standard: false
Beispiel: Fixed Scroll

footerField

Attribut: data-footer-field
Typ: String

Detail:

Definiert den Schlüssel des Footer-Objekts (aus Datenarray oder Server-Antwort-JSON). Das Footer-Objekt kann verwendet werden, um die Footer-Colspan und/oder den Wert des Footers festzulegen/zu definieren. Nur ausgelöst, wenn data-pagination true und data-side-pagination server ist.

  {
    "rows": [
      {
        "id": 0,
        "name": "Item 0",
        "price": "$0",
        "amount": 3
      }
    ],
    "footer": {
      "id": "footer id",
      "_id_colspan": 2,
      "name": "footer name"
    }
  }

Standard: footerField
Beispiel: Footer Field

footerStyle

Attribut: data-footer-style
Typ: Function
Detail:

Die Footer-Stil-Formatierfunktion nimmt einen Parameter entgegen:
- column: das Spaltenobjekt.
Unterstützt classes oder css. Beispiel für die Verwendung:
```
function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Standard: {}
Beispiel: Footer Style

headerStyle

Attribut: data-header-style
Typ: Function
Detail:

Die Header-Stil-Formatierfunktion nimmt einen Parameter entgegen:
- column: das Spaltenobjekt.
Unterstützt classes oder css. Beispiel für die Verwendung:
```
function headerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Standard: {}
Beispiel: Header Style

height

Attribut: data-height
Typ: Number
Detail:

Die Höhe der Tabelle, aktiviert einen fixen Header der Tabelle.
Standard: undefined
Beispiel: Table Height

icons

Attribut: data-icons
Typ: Object
Detail:

Definiert Icons, die in der Toolbar, der Paginierung und der Detailansicht verwendet werden.

Standard:

{
  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'
}

Beispiel: Table Icons

iconSize

Attribut: data-icon-size
Typ: String
Detail:

Definiert die Icon-Größe, undefined, 'lg', 'sm' können verwendet werden.
Standard: undefined
Beispiel: Icon Size

iconsPrefix

Attribut: data-icons-prefix
Typ: String

Detail:

Definiert den Icon-Set-Namen. Standardmäßig wird diese Option automatisch durch das Theme berechnet.

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

Standard: undefined
Beispiel: Icons Prefix

idField

Attribut: data-id-field
Typ: String
Detail:

Gibt an, welches Feld als Checkbox/Radio-Wert verwendet werden soll, es ist das Gegenstück zu selectItemName.
Standard: undefined
Beispiel: Id Field

ignoreClickToSelectOn

Attribut: data-ignore-click-to-select-on
Typ: Function
Detail:

Legen Sie die zu ignorierenden Elemente clickToSelect fest. Nimmt einen Parameter entgegen:
- element: das angeklickte Element.
Gibt true zurück, wenn der Klick ignoriert werden soll, false, wenn der Klick dazu führen soll, dass die Zeile ausgewählt wird. Diese Option ist nur relevant, wenn clickToSelect true ist.
Standard: { return ['A', 'BUTTON'].includes(tagName) }
Beispiel: Ignore Click To Select On

loadingFontSize

Attribut: data-loading-font-size
Typ: String
Detail:

Definiert die Schriftgröße des Ladetexts, der Standardwert ist 'auto', automatisch berechnet gemäß der Tabellenbreite, zwischen 12px und 32px.
Standard: 'auto'
Beispiel: Loading Font Size

loadingTemplate

Attribut: data-loading-template
Typ: Function
Detail:

Um den Ladetyp selbst anzupassen. Das Parameterobjekt enthält:
- loadingMessage: die formatLoadingMessage-Locale.

Standard:

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

Beispiel: Loading Template

locale

Attribut: data-locale
Typ: String
Detail:

Legen Sie die vom Tisch verwendete Locale fest (z. B. 'zh-CN'). Vor der Verwendung dieser Option muss die entsprechende Locale-Datei vorgeladen werden.

Das System unterstützt einen Fallback-Mechanismus für Locales und versucht, sie in folgender Prioritätsreihenfolge zu laden:
- Erste Priorität: Versuchen Sie, die angegebene gesamte Locale zu laden (z. B. 'zh-CN')
- Zweite Priorität: Versuchen Sie, Unterstriche _ in Bindestriche - umzuwandeln und den Regionscode zu kapitalisieren (z. B. konvertieren Sie 'zh_CN' in 'zh-CN')
- Dritte Priorität: Versuchen Sie, den kurzen Sprachcode zu verwenden (z. B. fallen Sie von 'zh-CN' auf 'zh' zurück)
- Letzte Option: Verwenden Sie die zuletzt geladene Locale-Datei (wenn keine Locale-Dateien geladen sind, verwenden Sie die eingebaute Standard-Locale)
Hinweis: Wenn Sie diese Option auf undefined oder eine leere Zeichenkette setzen, wird automatisch die zuletzt geladene Locale verwendet (wenn keine Locale-Dateien geladen sind, wird standardmäßig 'en-US' verwendet).
Standard: undefined
Beispiel: Table Locale

maintainMetaData

Attribut: data-maintain-meta-data
Typ: Boolean
Detail:

Setzen Sie true, um die folgenden Metadaten bei der Seitenänderung und Suche beizubehalten:
- ausgewählte Zeilen
- ausgeblendete Zeilen
Standard: false
Beispiel: Maintain Meta Data

method

Attribut: data-method
Typ: String
Detail:

Der Methodentyp für die Anforderung von Remote-Daten.
Standard: 'get'
Beispiel: Table Method

minimumCountColumns

Attribut: data-minimum-count-columns
Typ: Number
Detail:

Die minimale Anzahl von Spalten, die aus der Spaltenauswahlliste ausgeblendet werden sollen.
Standard: 1
Beispiel: Minimum Count Columns

multipleSelectRow

Attribut: data-multiple-select-row
Typ: Boolean
Detail:

Setzen Sie auf true, um die Mehrzeilenauswahl zu aktivieren.

Wenn aktiviert, können Benutzer mehrere Zeilen mit folgenden Methoden auswählen:
- Strg+Klick: Einzelne Zeilen auswählen oder abwählen (während andere Zeilen ausgewählt bleiben)
- Umschalt+Klick: Alle Zeilen zwischen der aktuell ausgewählten Zeile und der angeklickten Zeile auswählen (Bereichsauswahl)
- Regulärer Klick: Wenn keine Modifikatortaste gehalten wird, wird nur die angeklickte Zeile ausgewählt, während alle anderen abgewählt werden
Standard: false
Beispiel: Multiple Select Row

pageList

Attribut: data-page-list
Typ: Array
Detail:

Wenn Sie die Paginierungseigenschaft setzen, initialisieren Sie die Seitengröße durch Auswahl der Liste. Wenn Sie die Option 'all' oder 'unlimited' einschließen, werden alle Datensätze in Ihrer Tabelle angezeigt.

Hinweis: Wenn die Tabelle weniger Zeilen hat als die Option(en), werden die Optionen automatisch ausgeblendet. Um diese Funktion zu deaktivieren, können Sie smartDisplay auf false setzen
Standard: [10, 25, 50, 100]
Beispiel: Page List

pageNumber

Attribut: data-page-number
Typ: Number
Detail:

Wenn Sie die Paginierungseigenschaft setzen, initialisieren Sie die Seitenzahl.
Standard: 1
Beispiel: Page Number

pageSize

Attribut: data-page-size
Typ: Number
Detail:

Wenn Sie die Paginierungseigenschaft setzen, initialisieren Sie die Seitengröße.
Standard: 10
Beispiel: Page Size

pagination

Attribut: data-pagination
Typ: Boolean
Detail:

Setzen Sie true, um eine Paginierungsleiste am unteren Rand der Tabelle anzuzeigen.
Standard: false
Beispiel: Table Pagination

paginationDetailHAlign

Attribut: data-pagination-detail-h-align
Typ: String
Detail:

Gibt an, wie die Paginierungsdetails ausgerichtet werden sollen. 'left', 'right' können verwendet werden.
Standard: 'left'
Beispiel: Pagination H Align

paginationHAlign

Attribut: data-pagination-h-align
Typ: String
Detail:

Gibt an, wie die Paginierung ausgerichtet werden soll. 'left', 'right' können verwendet werden.
Standard: 'right'
Beispiel: Pagination H Align

paginationLoadMore

Attribut: data-pagination-load-more
Typ: Boolean
Detail:

Setzen Sie true, um das Laden von mehr Daten durch Paginierung zu aktivieren. Es wird nur in der client-seitigen Paginierung verwendet. Im Allgemeinen ist es oft notwendig, es mit einem responseHandler zu kombinieren, um die zurückgegebenen Daten zu verarbeiten, um die “Mehr laden”-Funktionalität zu implementieren.

Es wird hauptsächlich in Szenarien verwendet, in denen die Gesamtzahl der Seiten unbekannt ist. In solchen Fällen ist es nicht möglich, die genaue Gesamtanzahl anzuzeigen oder die Gesamtzahl der Seiten zu berechnen. Stattdessen kann ein Anzeigeformat wie “100+” verwendet werden, um das Vorhandensein zusätzlicher Elemente über die angezeigte Anzahl hinaus anzuzeigen. Wenn der Benutzer zur letzten Seite navigiert, werden mehr Daten geladen, zusammen mit einer Aktualisierung der Paginierungsinformationen. Dieser Prozess setzt sich fort, bis das Laden aller Daten abgeschlossen ist.
Standard: false
Beispiel: Pagination Load More

paginationLoop

Attribut: data-pagination-loop
Typ: Boolean
Detail:

Setzen Sie true, um den kontinuierlichen Schleifenmodus der Paginierung zu aktivieren.
Standard: true
Beispiel: Pagination Loop

paginationNextText

Attribut: data-pagination-next-text
Typ: String
Detail:

Gibt das Icon oder den Text an, der in den Paginierungsdetails, der nächsten Schaltfläche, angezeigt werden soll.
Standard: '›'
Beispiel: Pagination Text

paginationPagesBySide

Attribut: data-pagination-pages-by-side
Typ: Number
Detail:

Die Anzahl der Seiten auf jeder Seite (rechts, links) der aktuellen Seite.
Standard: 1
Beispiel: Pagination Index Number

paginationParts

Attribut: data-pagination-parts
Typ: Array
Detail:

Diese Optionen definieren, welche Teile der Paginierung sichtbar sein sollen.
- pageInfo Zeigt an, welcher Datensatz auf der aktuellen Seite angezeigt wird (z. B. Showing 1 to 10 of 54 rows).
- pageInfoShort Ähnlich wie pageInfo, zeigt nur an, wie viele Zeilen die Tabelle hat (z. B. Showing 54 rows).
- pageSize Zeigt das Dropdown an, das definiert, wie viele Zeilen pro Seite angezeigt werden sollen.
- pageList Zeigt den Hauptteil der Paginierung an (Die Liste der Seiten).
Standard: ['pageInfo', 'pageSize', 'pageList']
Beispiel: Pagination Parts

paginationPreText

Attribut: data-pagination-pre-text
Typ: String
Detail:

Gibt das Icon oder den Text an, der in den Paginierungsdetails, der vorherigen Schaltfläche, angezeigt wird.
Standard: '‹'
Beispiel: Pagination Text

paginationSuccessivelySize

Attribut: data-pagination-successively-size
Typ: Number
Detail:

Maximale aufeinanderfolgende Anzahl von Seiten in einer Reihe.
Standard: 5
Beispiel: Pagination Index Number

paginationUseIntermediate

Attribut: data-pagination-use-intermediate
Typ: Boolean
Detail:

Berechnen und zeigen Sie Zwischenseiten für schnellen Zugriff an.
Standard: false
Beispiel: Pagination Index Number

paginationVAlign

Attribut: data-pagination-v-align
Typ: String
Detail:

Gibt an, wie die Paginierung vertikal ausgerichtet werden soll. 'top', 'bottom', 'both' (setzt die Paginierung oben und unten) können verwendet werden.
Standard: 'bottom'
Beispiel: Pagination V Align

queryParams

Attribut: data-query-params
Typ: Function
Detail:

Wenn Sie Remote-Daten anfordern, können Sie zusätzliche Parameter senden, indem Sie queryParams modifizieren.

Wenn queryParamsType = 'limit', enthält das params-Objekt: limit, offset, search, sort, order.

Andernfalls enthält es: pageSize, pageNumber, searchText, sortName, sortOrder.

Geben Sie false zurück, um die Anfrage zu stoppen.
Standard: function(params) { return params }
Beispiel: Query Params

queryParamsType

Attribut: data-query-params-type
Typ: String
Detail:

Setzen Sie 'limit', um Abfrageparameter mit RESTFul-Typ zu senden.
Standard: 'limit'
Beispiel: Query Params Type

regexSearch

Attribut: data-regex-search
Typ: Boolean
Detail:

Setzen Sie true, um die Regex-Suche zu aktivieren. Wenn diese Option aktiviert ist, können Sie mit Regex suchen, z. B. [47a]$ für alle Elemente, die mit 4, 7 oder a enden. Der Regex kann mit /[47a]$/gim oder ohne [47a]$-Flags eingegeben werden. Die Standardflags sind gim.
Standard: false
Beispiel: Regex Search

rememberOrder

Attribut: data-remember-order
Typ: Boolean
Detail:

Setzen Sie true, um die Reihenfolge für jede Spalte zu merken.
Standard: false
Beispiel: Remember Order

responseHandler

Attribut: data-response-handler
Typ: Function
Detail:

Vor dem Laden von Remote-Daten bearbeiten Sie das Antwortdatenformat. Das Parameterobjekt enthält:
- res: die Antwortdaten.
- jqXHR: jqXHR-Objekt, das eine Obermenge des XMLHTTPRequest-Objekts ist. Weitere Informationen finden Sie unter jqXHR Type.
Standard: function(res) { return res }
Beispiel: Response Handler

rowAttributes

Attribut: data-row-attributes
Typ: Function
Detail:

Die Zeilenattribut-Formatierfunktion nimmt zwei Parameter entgegen:
- row: die Zeilenrekorddaten.
- index: der Zeilenindex.
Unterstützt alle benutzerdefinierten Attribute.
Standard: {}
Beispiel: Row Attributes

rowStyle

Attribut: data-row-style
Typ: Function
Detail:

Die Zeilenstil-Formatierfunktion nimmt zwei Parameter entgegen:
- row: die Zeilenrekorddaten.
- index: der Zeilenindex.
Unterstützt Klassen oder CSS.
Standard: {}
Beispiel: Row Style

search

Attribut: data-search
Typ: Boolean
Detail:

Aktivieren Sie das Suchfeld.

Es gibt drei Möglichkeiten zu suchen:
- Der Wert enthält die Suchanfrage (Standard). Beispiel: Github enthält git.
- Der Wert muss mit der Suchanfrage identisch sein. Beispiel: Github (Wert) und Github (Suchanfrage).
- Vergleiche (<, >, <=, =<, >=, =>). Beispiel: 4 ist größer als 3.
Hinweise:
- Wenn Sie ein benutzerdefiniertes Suchfeld verwenden möchten, verwenden Sie den searchSelector.
- Sie können auch über Regex mit der regexSearch-Option suchen.
- Wenn Sie suchbare Parameter an die server-seitige Paginierung senden möchten, verwenden Sie die searchable-Option.
Standard: false
Beispiel: Table Search

searchable

Attribut: data-searchable
Typ: Boolean
Detail:

Setzen Sie true, um searchable params an den Server zu senden, während Sie die server-seitige Paginierung verwenden.
Standard: false
Beispiel: Searchable

searchAccentNeutralise

Attribut: data-search-accent-neutralise
Typ: Boolean
Detail:

Setzen Sie auf true, wenn Sie die Akzentneutralisierungsfunktion verwenden möchten.
Standard: false
Beispiel: Search Accent Neutralise

searchAlign

Attribut: data-search-align
Typ: String
Detail:

Gibt an, wie das Suchfeld ausgerichtet werden soll. 'left', 'right' können verwendet werden.
Standard: 'right'
Beispiel: Search Align

searchHighlight

Attribut: data-search-highlight
Typ: Boolean
Detail:

Setzen Sie auf true, um den gesuchten Text hervorzuheben (mithilfe des HTML-Tags <mark>). Sie können auch einen benutzerdefinierten Hervorhebungsformatierer definieren, z. B. für Werte mit HTML oder um eine benutzerdefinierte Hervorhebungsfarbe zu verwenden.
Standard: 'false'
Beispiel: Search Highlight

searchOnEnterKey

Attribut: data-search-on-enter-key
Typ: Boolean
Detail:

Die Suchmethode wird erst ausgeführt, wenn die Eingabetaste gedrückt wird.
Standard: false
Beispiel: Search On Enter Key

searchSelector

Attribut: data-search-selector
Typ: Boolean|String
Detail:

Wenn diese Option gesetzt ist (muss ein gültiger DOM-Selektor sein, z. B. #customSearch), wird das gefundene DOM-Element (ein input-Element) als Tabellensuche statt des eingebauten Suchfelds verwendet.
Standard: false
Beispiel: Search Selector

searchText

Attribut: data-search-text
Typ: String
Detail:

Wenn Sie die Such Eigenschaft setzen, initialisieren Sie den Suchtext.
Standard: ''
Beispiel: Search Text

searchTimeOut

Attribut: data-search-time-out
Typ: Number
Detail:

Setzen Sie ein Timeout für das Auslösen der Suche.
Standard: 500
Beispiel: Search Time Out

selectItemName

Attribut: data-select-item-name
Typ: String
Detail:

Der Name des Radio- oder Checkbox-Eingabefelds.
Standard: 'btSelectItem'
Beispiel: Id Field

serverSort

Attribut: data-server-sort
Typ: Boolean
Detail:

Setzen Sie false, um die Daten client-seitig zu sortieren, funktioniert nur wenn sidePagination server ist.
Standard: true
Beispiel: Server Sort

showButtonIcons

Attribut: data-show-button-icons
Typ: Boolean
Detail:

Alle Schaltflächen werden Icons zeigen.
Standard: true
Beispiel: show button icons

showButtonText

Attribut: data-show-button-text
Typ: Boolean
Detail:

Alle Schaltflächen werden Text zeigen.
Standard: false
Beispiel: show button text

showColumns

Attribut: data-show-columns
Typ: Boolean
Detail:

Setzen Sie true, um die Spaltenauswahlliste anzuzeigen. Wir können die switchable Spaltenoption auf false setzen, um das Spaltenelement in der Auswahlliste auszublenden. Die minimale Anzahl ausgewählter Spalten kann mit der minimumCountColumns Tabellenoption gesteuert werden.
Standard: false
Beispiel: Basic Columns and Large Columns

showColumnsSearch

Attribut: data-show-columns-search
Typ: Boolean
Detail:

Setzen Sie true, um eine Suche für den Spaltenfilter anzuzeigen.
Standard: false
Beispiel: Columns Search

showColumnsToggleAll

Attribut: data-show-columns-toggle-all
Typ: Boolean
Detail:

Setzen Sie true, um ein “Alle umschalten”-Kontrollkästchen in der Spaltenoption/Auswahl anzuzeigen.
Standard: false
Beispiel: Columns Toggle All

showExtendedPagination

Attribut: data-show-extended-pagination
Typ: Boolean
Detail:

Setzen Sie true, um eine erweiterte Version der Paginierung anzuzeigen (einschließlich der Anzahl aller Zeilen ohne Filter). Wenn Sie die Paginierung auf der Serverseite verwenden, verwenden Sie bitte totalNotFilteredField, um die Anzahl zu definieren.
Standard: false
Beispiel: Show Extended Pagination

showFooter

Attribut: data-show-footer
Typ: Boolean
Detail:

Setzen Sie true, um die Zusammenfassungsfußzeile anzuzeigen.
Standard: false
Beispiel: Show Footer

showFullscreen

Attribut: data-show-fullscreen
Typ: Boolean
Detail:

Setzen Sie true, um die Vollbildschaltfläche anzuzeigen.
Standard: false
Beispiel: Show Fullscreen

showHeader

Attribut: data-show-header
Typ: Boolean
Detail:

Setzen Sie false, um den Tabellenkopf auszublenden.
Standard: true
Beispiel: Show Header

showPaginationSwitch

Attribut: data-show-pagination-switch
Typ: Boolean
Detail:

Setzen Sie true, um die Paginierungs-Umschaltfläche anzuzeigen.
Standard: false
Beispiel: Show Pagination Switch

showRefresh

Attribut: data-show-refresh
Typ: Boolean
Detail:

Setzen Sie true, um die Aktualisierungsschaltfläche anzuzeigen.
Standard: false
Beispiel: Show Refresh

showSearchButton

Attribut: data-show-search-button
Typ: Boolean
Detail:

Setzen Sie true, um eine Suchschaltfläche hinter dem Suchfeld anzuzeigen. Die Suche wird nur ausgeführt, wenn die Schaltfläche gedrückt wird (z. B. um Verkehr oder Ladezeit zu verhindern).
Standard: false
Beispiel: Show Search Button

showSearchClearButton

Attribut: data-show-search-clear-button
Typ: Boolean
Detail:

Setzen Sie true, um eine Löschschaltfläche hinter dem Suchfeld anzuzeigen, die das Suchfeld leeren wird (auch alle Filter von filter-control (wenn aktiviert)).
Standard: false
Beispiel: Show Search Clear Button

showToggle

Attribut: data-show-toggle
Typ: Boolean
Detail:

Setzen Sie true, um die Umschaltfläche zum Umschalten zwischen Tabelle/Kartenansicht anzuzeigen.
Standard: false
Beispiel: Show Toggle

sidePagination

Attribut: data-side-pagination
Typ: String
Detail:

Definiert die seitliche Paginierung der Tabelle, kann nur 'client' oder 'server' sein. Bei Verwendung der 'server'-Seite ist die Einstellung der 'url' oder 'ajax'-Option erforderlich.

Beachten Sie, dass das erforderliche Server-Antwortformat unterschiedlich ist, je nachdem, ob die 'sidePagination'-Option auf 'client' oder 'server' gesetzt ist. Siehe folgende Beispiele:
- Without server-side pagination
- With server-side pagination
URL-Parameter:

Wenn sidePagination auf server gesetzt ist, wird die bootstrap-table Aufrufe an die url mit den folgenden URL-Parametern machen:
- offset mit einem Wert zwischen 0 und total - 1, der den ersten Datensatz angibt, der eingeschlossen werden soll.
- limit mit einem Wert, der die Anzahl der Zeilen pro Seite angibt.
Bei der Implementierung der server-seitigen Paginierung müssen Sie eine JSON-Ansicht in einem Format wie dieses Beispiel implementieren. Diese Ansicht muss die oben angegebenen URL-Parameterwerte entgegennehmen und Datensätze ab dem offset-Index zurückgeben und die Anzahl der Datensätze, die durch limit angegeben wird, zurückgeben. Beispielsweise, wenn Sie Datensätze 11-20 möchten, muss Ihre Ansicht den offset=10 und limit=10 aus der URL-Zeichenkette erhalten und Datensätze wie dieses Beispiel zurückgeben.
Standard: 'client'
Beispiel: Client-seitige Paginierung und Server-seitige Paginierung

silentSort

Attribut: data-silent-sort
Typ: Boolean
Detail:

Setzen Sie false, um die Daten mit der Ladungsnachricht zu sortieren. Diese Option funktioniert, wenn die sidePagination-Option auf 'server' gesetzt ist.
Standard: true
Beispiel: Silent Sort

singleSelect

Attribut: data-single-select
Typ: Boolean
Detail:

Setzen Sie true, um ein Kontrollkästchen zu ermöglichen, das nur eine Zeile auswählt.
Standard: false
Beispiel: Single Select

smartDisplay

Attribut: data-smart-display
Typ: Boolean
Detail:

Setzen Sie true, um die Paginierung oder die Kartenansicht intelligent anzuzeigen.
Standard: true
Beispiel: Smart Display

sortable

Attribut: data-sortable
Typ: Boolean
Detail:

Setzen Sie false, um die Sortierfunktion aller Spalten zu deaktivieren.
Standard: true
Beispiel: Table Sortable

sortClass

Attribut: data-sort-class
Typ: String
Detail:

Der Klassenname der td-Elemente, die sortiert werden.
Standard: undefined
Beispiel: Sort Class

sortEmptyLast

Attribut: data-sort-empty-last
Typ: Boolean
Detail:

Setzen Sie true, um <leere Zeichenkette>, undefined und null als letzten Wert zu sortieren.
Standard: false
Beispiel: Sort Empty Last

sortName

Attribut: data-sort-name
Typ: String
Detail:

Definiert, welche Spalte sortiert wird. Dieses Attributfeld arbeitet zusammen mit sortOrder, und beide sollten zusammen für eine ordnungsgemäße Sortierfunktionalität verwendet werden.
Standard: undefined
Beispiel: Sort Name Order

sortOrder

Attribut: data-sort-order
Typ: String
Detail:

Definiert die Spaltensortierreihenfolge, kann nur undefined, 'asc' oder 'desc' sein. Dieses Attributfeld arbeitet zusammen mit sortName, und beide sollten zusammen für eine ordnungsgemäße Sortierfunktionalität verwendet werden.
Standard: undefined
Beispiel: Sort Name Order

sortReset

Attribut: data-sort-reset
Typ: Boolean
Detail:

Setzen Sie true, um die Sortierung bei drittem Klick zurückzusetzen.
Standard: false
Beispiel: Sort Reset

sortResetPage

Attribut: data-sort-reset-page
Typ: Boolean
Detail:

Setzen Sie true, um die Seitenzahl beim Sortieren zurückzusetzen.
Standard: false
Beispiel: Sort Reset Page

sortStable

Attribut: data-sort-stable
Typ: Boolean
Detail:

Setzen Sie true, um eine stabile Sortierung zu erhalten. Wir fügen der Zeile die '_position'-Eigenschaft hinzu.
Standard: false
Beispiel: Sort Stable

strictSearch

Attribut: data-strict-search
Typ: Boolean
Detail:

Aktiviert die strenge Suche. Deaktiviert die Vergleichsprüfungen.
Standard: false
Beispiel: Strict Search

theadClasses

Attribut: data-thead-classes
Typ: String
Detail:

Der Klassenname der Tabellenkopfzeile. Bootstrap verwendet die Modifikatorklassen .thead-light oder .thead-dark, um den thead hell oder dunkel grau erscheinen zu lassen.
Standard: ''
Beispiel: Thead Classes

Attribut: data-toolbar
Typ: String/Node
Detail:

Ein jQuery-Selektor, der die Werkzeugleiste angibt, z. B.: #toolbar, .toolbar oder ein DOM-Knoten.
Standard: undefined
Beispiel: Custom Toolbar

toolbarAlign

Attribut: data-toolbar-align
Typ: String
Detail:

Gibt an, wie die benutzerdefinierte Werkzeugleiste ausgerichtet werden soll. 'left', 'right' können verwendet werden.
Standard: 'left'
Beispiel: Toolbar Align

totalField

Attribut: data-total-field
Typ: String
Detail:

Schlüssel im eingehenden JSON, der die 'total'-Daten enthält.
Standard: 'total'
Beispiel: Total/Data Field

totalNotFiltered

Attribut: data-total-not-filtered
Typ: Number
Detail:

Diese Eigenschaft wird hauptsächlich vom Paginierungsserver übergeben, was die Verwendung erleichtert.
Standard: 0

totalNotFilteredField

Attribut: data-total-not-filtered-field
Typ: string
Detail:

Das Feld aus der JSON-Antwort wird für showExtendedPagination verwendet.
Standard: totalNotFiltered
Beispiel: Total Not Filtered Field

totalRows

Attribut: data-total-rows
Typ: Number
Detail:

Diese Eigenschaft wird hauptsächlich vom Paginierungsserver übergeben, was die Verwendung erleichtert.
Standard: 0

trimOnSearch

Attribut: data-trim-on-search
Typ: Boolean
Detail:

Setzen Sie true, um Leerzeichen im Suchfeld zu trimmen.
Standard: true
Beispiel: Trim On Search

undefinedText

Attribut: data-undefined-text
Typ: String
Detail:

Definiert den Standardtext für undefined.
Standard: '-'
Beispiel: Undefined Text

uniqueId

Attribut: data-unique-id
Typ: String
Detail:

Gibt einen eindeutigen Bezeichner für jede Zeile an. Die eindeutige ID sollte immer für HTML sicher sein, z. B. alphanumerisch, und sollte keine Zeichen enthalten, die HTML brechen können, z. B. ".
Standard: undefined
Beispiel: getRowByUniqueId

url

Attribut: data-url
Typ: String
Detail:

Eine URL, um Daten von einer Remote-Site anzufordern.

Beachten Sie, dass das erforderliche Server-Antwortformat unterschiedlich ist, je nachdem, ob die 'sidePagination'-Option angegeben ist. Siehe folgende Beispiele:
- Ohne server-seitige Paginierung
- Mit server-seitiger Paginierung
URL-Parameter:

Wenn sidePagination auf server gesetzt ist, wird die bootstrap-table Aufrufe an die url mit den folgenden URL-Parametern machen:
- offset mit einem Wert zwischen 0 und total - 1, der den ersten Datensatz angibt, der eingeschlossen werden soll.
- limit mit einem Wert, der die Anzahl der Zeilen pro Seite angibt.
Bei der Implementierung der server-seitigen Paginierung müssen Sie eine JSON-Ansicht in einem Format wie dieses Beispiel implementieren. Diese Ansicht muss die oben angegebenen URL-Parameterwerte entgegennehmen und Datensätze ab dem offset-Index zurückgeben und die Anzahl der Datensätze, die durch limit angegeben wird, zurückgeben. Beispielsweise, wenn Sie Datensätze 11-20 möchten, muss Ihre Ansicht den offset=10 und limit=10 aus der URL-Zeichenkette erhalten und Datensätze wie dieses Beispiel zurückgeben.
Standard: undefined
Beispiel: From URL
Fehlerbehandlung

Um Ladefehler zu erhalten, verwenden Sie bitte onLoadError

virtualScroll

Attribut: data-virtual-scroll
Typ: Boolean
Detail:

Setzen Sie true, um virtuelles Scrollen zu aktivieren, um eine virtuelle, “unendliche” Liste anzuzeigen.

Hinweis: Derzeit geht die Implementierung davon aus, dass jede Zeile die gleiche Höhe hat. Wenn die Höhen der Zeilen variieren, können unvorhergesehene Fehler auftreten. Stellen Sie sicher, dass die Höhe jeder Zeile konsistent ist, oder wenden Sie den Stil td { white-space: nowrap; } an, um dieses Problem zu beheben.
Standard: false
Beispiel: Large Data

virtualScrollItemHeight

Attribut: data-virtual-scroll-item-height
Typ: Number
Detail:

Wenn diese Option nicht definiert ist, verwenden wir standardmäßig die Höhe des ersten Elements.

Es ist wichtig, dies anzugeben, wenn die Höhe des virtuellen Elements signifikant größer als die Standardhöhe ist. Diese Dimension wird verwendet, um zu bestimmen, wie viele Zellen beim Initialisieren erstellt werden sollen, und um die Höhe des scrollbaren Bereichs zu berechnen. Dieser Höhenwert kann nur px-Einheiten verwenden.
Standard: undefined

visibleSearch

Attribut: data-visible-search
Typ: Boolean
Detail:

Setzen Sie true, um nur in sichtbaren Spalten/Daten zu suchen. Wenn die Daten andere Werte enthalten, die nicht angezeigt werden, werden sie bei der Suche ignoriert.
Standard: false
Beispiel: visible search