Opzioni di Bootstrap Table

L'API delle opzioni di tabella di Bootstrap Table.

In questa pagina

Le opzioni di tabella sono definite in jQuery.fn.bootstrapTable.defaults.

Nota: I nomi delle opzioni qui sotto (ad esempio, ajax, buttons, cache) sono i nomi di proprietà esatti da utilizzare quando si inizializza Bootstrap Table tramite JavaScript.

Ad esempio:

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

-

Attributo: data-toggle
Tipo: String
Dettagli:

Attiva bootstrap table senza scrivere JavaScript.
Default: 'table'
Esempio: From HTML

ajax

Attributo: data-ajax
Tipo: Function
Dettagli:

Un metodo per sostituire la chiamata ajax. Dovrebbe implementare la stessa API del metodo jQuery ajax.
Default: undefined
Esempio: Table AJAX

ajaxOptions

Attributo: data-ajax-options
Tipo: Object
Dettagli:

Opzioni aggiuntive per inviare la richiesta ajax. Elenco dei valori: jQuery.ajax.
Default: {}
Esempio: AJAX Options

buttons

Attributo: data-buttons
Tipo: Function
Dettagli:

Questa opzione consente di creare/aggiungere pulsante(i) personalizzati alla “barra dei pulsanti” (in alto a destra della tabella). Questi pulsanti possono essere ordinati con l’opzione di tabella buttonsOrder, per questo dovrebbe essere utilizzato il tasto/nome utilizzato per l’evento!

Il pulsante personalizzato è altamente configurabile, esistono le seguenti opzioni:
- text
  - Descrizione: Questa opzione viene utilizzata per l’opzione di tabella showButtonText.
  - Tipo: String
- icon
  - Descrizione: Questa opzione viene utilizzata per l’opzione di tabella showButtonIcons.
  - Tipo: String - Serve solo la classe icona, ad esempio fa-users
- render
  - Descrizione: Imposta questa opzione su false per nascondere il pulsante per impostazione predefinita, il pulsante diventa di nuovo visibile quando aggiungi l’attributo dati data-show-button-name="true".
- attributes
  - Descrizione: Questa opzione consente di aggiungere attributi HTML aggiuntivi, ad esempio title
  - Tipo: Object
  - Esempio: {title: 'Button title'}
- html
  - Descrizione: Se non vuoi autogenerare l’HTML, puoi utilizzare questa opzione per inserire il tuo HTML personalizzato. L’opzione event funziona solo se il tuo HTML personalizzato contiene name="button-name". Se viene utilizzata questa opzione, le seguenti opzioni verranno ignorate:
    - text
    - icon
    - attributes
  - Tipo: Function|String
- event
  - Descrizione: Dovrebbe essere utilizzato se vuoi aggiungere un evento al pulsante
  - Tipo: Function|Object|String
L’opzione event può essere configurata in tre modi. Un evento con evento click:
```
{
  'event': () => { }
}
```
Un evento con un tipo di evento auto-definito:
```
  {
    'event': {
      'mouseenter': () => { }
    }
  }
```
Più eventi con tipi di evento auto-definiti:
```
  {
    'event': {
      'click': () => { },
      'mouseenter': () => { },
      'mouseleave': () => { }
    }
  }
```
Suggerimento: Invece di funzioni inline, puoi anche utilizzare nomi di funzioni.

Un pulsante personalizzato configurato potrebbe assomigliare a questo:
```
{
  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'
    }
  }
}
```
Default: {}
Esempio: Buttons

buttonsAlign

Attributo: data-buttons-align
Tipo: String
Dettagli:

Indica come allineare i pulsanti della barra degli strumenti. È possibile utilizzare 'left', 'right'.
Default: 'right'
Esempio: Buttons Align

buttonsAttributeTitle

Attributo: data-buttons-attribute-title
Tipo: String
Dettagli:

Personalizza l’attributo title dei pulsanti della barra degli strumenti, che viene utilizzato principalmente per personalizzare lo stile della barra degli strumenti.
Default: 'title'
Esempio: Buttons Attribute Title

buttonsClass

Attributo: data-buttons-class
Tipo: String
Dettagli:

Definisce la classe (aggiunta dopo 'btn-') dei pulsanti della tabella.
Default: 'secondary'
Esempio: Buttons Class

buttonsOrder

Attributo: data-buttons-order
Tipo: Array
Dettagli:

Indica come ordinare personalmente i pulsanti della barra degli strumenti.
Default: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']
Esempio: Buttons Order

buttonsPrefix

Attributo: data-buttons-prefix
Tipo: String
Dettagli:

Definisce il prefisso dei pulsanti della tabella.
Default: 'btn'
Esempio: Buttons Prefix

buttonsToolbar

Attributo: data-buttons-toolbar
Tipo: String/Node
Dettagli:

Un selettore jQuery che indica la barra degli strumenti dei pulsanti personalizzati, ad esempio: #buttons-toolbar, .buttons-toolbar, o un nodo DOM.
Default: undefined
Esempio: Buttons Toolbar

cache

Attributo: data-cache
Tipo: Boolean
Dettagli:

Imposta false per disabilitare la memorizzazione nella cache delle richieste AJAX.
Default: true
Esempio: Table Cache

cardView

Attributo: data-card-view
Tipo: Boolean
Dettagli:

Imposta true per mostrare la tabella in vista card, ad esempio, vista mobile.
Default: false
Esempio: Card View

checkboxHeader

Attributo: data-checkbox-header
Tipo: Boolean
Dettagli:

Imposta false per nascondere la casella di controllo “seleziona tutto” nella riga di intestazione.
Default: true
Esempio: Checkbox Header

classes

Attributo: data-classes
Tipo: String
Dettagli:

Il nome della classe della tabella. È possibile utilizzare 'table', 'table-bordered', 'table-hover', 'table-striped', 'table-dark', 'table-sm' e 'table-borderless'. Per impostazione predefinita, la tabella ha i bordi.
Default: 'table table-bordered table-hover'
Esempio: Table Classes

clickToSelect

Attributo: data-click-to-select
Tipo: Boolean
Dettagli:

Imposta true per selezionare la casella di controllo o il pulsante radio quando si cliccano le righe.
Default: false
Esempio: Click To Select

columns

Attributo: -
Tipo: Array
Dettagli:

L’oggetto di configurazione delle colonne della tabella. Consulta le proprietà delle colonne per ulteriori dettagli.
Default: []
Esempio: Table Columns

contentType

Attributo: data-content-type
Tipo: String
Dettagli:

Il contentType dei dati remoti della richiesta, ad esempio: application/x-www-form-urlencoded.
Default: 'application/json'
Esempio: Content Type

customSearch

Attributo: data-custom-search
Tipo: Function
Dettagli:

La funzione di ricerca personalizzata viene eseguita invece della funzione di ricerca integrata, prende tre parametri:
- data: i dati della tabella.
- text: il testo di ricerca.
- filter: l’oggetto filtro dal metodo filterBy.
Esempio di utilizzo:
```
function customSearch(data, text) {
  return data.filter(function (row) {
    return row.field.indexOf(text) > -1
  })
}
```
Default: undefined
Esempio: Custom Search

customSort

Attributo: data-custom-sort
Tipo: Function
Dettagli:

La funzione di ordinamento personalizzata viene eseguita invece della funzione di ordinamento integrata, prende tre parametri:
- sortName: il nome di ordinamento.
- sortOrder: l’ordine di ordinamento.
- data: i dati delle righe.
Default: undefined
Esempio: Custom Order

data

Attributo: data-data
Tipo: Array | Object

Dettagli:

I dati da caricare.

Se nei dati c’è una proprietà _<field>_rowspan o _<field>_colspan, verranno uniti automaticamente le celle, ad esempio:

$table.bootstrapTable({
  data: [
    {
      id: 1,
      name: 'Item 1',
      _name_rowspan: 2,
      price: '$1'
    },
    {
      id: 2,
      price: '$2'
    }
  ]
})

Se utilizzi questa funzionalità, data è richiesto per garantire che il formato sia corretto.

Default: []
Esempio: From Data

dataField

Attributo: data-data-field
Tipo: String
Dettagli:

Chiave nel JSON in arrivo contenente l’elenco di dati 'rows'.
Default: 'rows'
Esempio: Total/Data Field

dataType

Attributo: data-data-type
Tipo: String
Dettagli:

Il tipo di dati che ti aspetti di ricevere dal server.
Default: 'json'
Esempio: Data Type

detailFilter

Attributo: data-detail-filter
Tipo: Function
Dettagli:

Abilita l’espansione per riga quando detailView è impostato su true. Restituisci true e la riga sarà abilitata per l’espansione, restituisci false e l’espansione per la riga sarà disabilitata. La funzione predefinita restituisce true per consentire l’espansione per tutte le righe.
Default: function(index, row) { return true }
Esempio: Detail Filter

detailFormatter

Attributo: data-detail-formatter
Tipo: Function
Dettagli:

Formatta la tua vista dettagliata quando detailView è impostato su true. Restituisci una Stringa e verrà aggiunta alla cella della vista dettagliata, opzionalmente rende l’elemento direttamente utilizzando il terzo parametro, che è un elemento jQuery della cella di destinazione.
Default: function(index, row, element) { return '' }
Esempio: Detail View

detailView

Attributo: data-detail-view
Tipo: Boolean
Dettagli:

Imposta true per mostrare una tabella con vista dettagliata. Puoi impostare l’opzione uniqueId per mantenere lo stato della vista dettagliata quando aggiorni la tabella.
Default: false
Esempio: Detail View UniqueId

detailViewAlign

Attributo: data-detail-view-align
Tipo: String
Dettagli:

Indica come allineare l’icona della vista dettagliata. È possibile utilizzare 'left', 'right'.
Default: 'left'
Esempio: Detail view Align

detailViewByClick

Attributo: data-detail-view-by-click
Tipo: Boolean
Dettagli:

Imposta true per attivare/disattivare la vista dettagliata quando si clicca su una cella.
Default: false
Esempio: Detail View Icon

detailViewIcon

Attributo: data-detail-view-icon
Tipo: Boolean
Dettagli:

Imposta true per mostrare la colonna della vista dettagliata (icona più/meno).
Default: true
Esempio: Detail View Icon

escape

Attributo: data-escape
Tipo: Boolean
Dettagli:

Escapa una stringa per l’inserimento in HTML, sostituendo i caratteri &, <, >, ", ` e '. Per disabilitarlo per i titoli delle colonne, controlla l’opzione escapeTitle.
Default: false
Esempio: Table Escape

escapeTitle

Attributo: data-escape-title
Tipo: Boolean
Dettagli:

Attiva/disattiva se l’opzione escape dovrebbe essere applicata ai titoli delle colonne.
Default: true
Esempio: Table Escape title

Attributo: data-filter-options
Tipo: Boolean
Dettagli:

Definisce le opzioni di filtro predefinite dell’algoritmo, filterAlgorithm: 'and' significa che tutti i filtri dati devono corrispondere, filterAlgorithm: 'or' significa che uno dei filtri dati deve corrispondere.
Default: { filterAlgorithm: 'and' }
Esempio: Filter Options

fixedScroll

Attributo: data-fixed-scroll
Tipo: Boolean
Dettagli:

Imposta true per abilitare la posizione fissa della barra di scorrimento della tabella durante il caricamento dei dati.
Default: false
Esempio: Fixed Scroll

footerField

Attributo: data-footer-field
Tipo: String

Dettagli:

Definisce la chiave dell’oggetto footer (Dall’array di dati o dal JSON della risposta del server). L’oggetto footer può essere utilizzato per impostare/definire il colspan del footer e/o il valore del footer. Viene attivato solo quando data-pagination è true e data-side-pagination è server.

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

Default: footerField
Esempio: Footer Field

footerStyle

Attributo: data-footer-style
Tipo: Function
Dettagli:

Funzione formattatore dello stile del footer, prende un parametro:
- column: l’oggetto colonna.
Supporta classes o css. Esempio di utilizzo:
```
function footerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Default: {}
Esempio: Footer Style

headerStyle

Attributo: data-header-style
Tipo: Function
Dettagli:

Funzione formattatore dello stile dell’intestazione, prende un parametro:
- column: l’oggetto colonna.
Supporta classes o css. Esempio di utilizzo:
```
function headerStyle(column) {
  return {
    css: { 'font-weight': 'normal' },
    classes: 'my-class'
  }
}
```
Default: {}
Esempio: Header Style

height

Attributo: data-height
Tipo: Number
Dettagli:

L’altezza della tabella, abilita un’intestazione fissa della tabella.
Default: undefined
Esempio: Table Height

icons

Attributo: data-icons
Tipo: Object
Dettagli:

Definisce le icone utilizzate nella barra degli strumenti, nella paginazione e nella vista dettagli.

Default:

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

Esempio: Table Icons

iconSize

Attributo: data-icon-size
Tipo: String
Dettagli:

Definisce la dimensione dell’icona, può essere utilizzato undefined, 'lg', 'sm'.
Default: undefined
Esempio: Icon Size

iconsPrefix

Attributo: data-icons-prefix
Tipo: String

Dettagli:

Definisce il nome dell’insieme di icone. Per impostazione predefinita, questa opzione viene calcolata automaticamente dal tema.

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

Default: undefined
Esempio: Icons Prefix

idField

Attributo: data-id-field
Tipo: String
Dettagli:

Indica quale campo verrà utilizzato come valore checkbox/radio, è il corrispondente di selectItemName.
Default: undefined
Esempio: Id Field

ignoreClickToSelectOn

Attributo: data-ignore-click-to-select-on
Tipo: Function
Dettagli:

Imposta gli elementi da ignorare per clickToSelect. Prende un parametro:
- element: l’elemento su cui è stato cliccato.
Restituisci true se il click dovrebbe essere ignorato, false se il click dovrebbe causare la selezione della riga. Questa opzione è rilevante solo se clickToSelect è true.
Default: { return ['A', 'BUTTON'].includes(tagName) }
Esempio: Ignore Click To Select On

loadingFontSize

Attributo: data-loading-font-size
Tipo: String
Dettagli:

Per definire la dimensione del font del testo di caricamento, il valore predefinito è 'auto', calcolato automaticamente in base alla larghezza della tabella, tra 12px e 32px.
Default: 'auto'
Esempio: Loading Font Size

loadingTemplate

Attributo: data-loading-template
Tipo: Function
Dettagli:

Per personalizzare il tipo di caricamento da solo. L’oggetto parametri contiene:
- loadingMessage: la localizzazione formatLoadingMessage.

Default:

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

Esempio: Loading Template

locale

Attributo: data-locale
Tipo: String
Dettagli:

Imposta la lingua utilizzata dalla tabella (ad esempio, 'zh-CN'). Prima di utilizzare questa opzione, il file di lingua corrispondente deve essere precaricato.

Il sistema supporta un meccanismo di fallback per le lingue, tentando di caricarle nell’ordine di priorità seguente:
- Prima priorità: Tentativo di caricare l’intera lingua specificata (ad esempio, 'zh-CN')
- Seconda priorità: Tentativo di convertire gli underscore _ in trattini - e di capitalizzare il codice regione (ad esempio, convertire 'zh_CN' in 'zh-CN')
- Terza priorità: Tentativo di utilizzare il codice lingua breve (ad esempio, fallback da 'zh-CN' a 'zh')
- Ultima risorsa: Utilizzare l’ultimo file di lingua caricato (se nessun file di lingua è caricato, utilizzare la lingua predefinita integrata)
Nota: Impostando questa opzione su undefined o una stringa vuota, verrà automaticamente utilizzata l’ultima lingua caricata (se nessun file di lingua è caricato, viene utilizzato 'en-US' per impostazione predefinita).
Default: undefined
Esempio: Table Locale

maintainMetaData

Attributo: data-maintain-meta-data
Tipo: Boolean
Dettagli:

Imposta true per mantenere i seguenti metadati durante il cambio pagina e la ricerca:
- righe selezionate
- righe nascoste
Default: false
Esempio: Maintain Meta Data

method

Attributo: data-method
Tipo: String
Dettagli:

Il tipo di metodo per richiedere dati remoti.
Default: 'get'
Esempio: Table Method

minimumCountColumns

Attributo: data-minimum-count-columns
Tipo: Number
Dettagli:

Il numero minimo di colonne da nascondere dall’elenco a tendina delle colonne.
Default: 1
Esempio: Minimum Count Columns

multipleSelectRow

Attributo: data-multiple-select-row
Tipo: Boolean
Dettagli:

Imposta su true per abilitare la selezione multi-riga.

Quando abilitato, gli utenti possono selezionare più righe utilizzando i seguenti metodi:
- Ctrl+clic: Seleziona o deseleziona righe individuali (mantenendo selezionate le altre righe)
- Shift+clic: Seleziona tutte le righe tra la riga attualmente selezionata e la riga cliccata (selezione di intervallo)
- Clic regolare: Se non viene tenuto premuto alcun tasto modificatore, seleziona solo la riga cliccata deselezionando tutte le altre
Default: false
Esempio: Multiple Select Row

pageList

Attributo: data-page-list
Tipo: Array
Dettagli:

Quando si imposta la proprietà di paginazione, inizializza la dimensione della pagina selezionando l’elenco. Se includi l’opzione 'all' o 'unlimited', tutti i record saranno mostrati nella tua tabella.

Suggerimento: Se la tabella ha meno righe delle opzioni, le opzioni saranno nascoste automaticamente. Per disabilitare questa funzionalità, puoi impostare smartDisplay su false
Default: [10, 25, 50, 100]
Esempio: Page List

pageNumber

Attributo: data-page-number
Tipo: Number
Dettagli:

Quando si imposta la proprietà di paginazione, inizializza il numero di pagina.
Default: 1
Esempio: Page Number

pageSize

Attributo: data-page-size
Tipo: Number
Dettagli:

Quando si imposta la proprietà di paginazione, inizializza la dimensione della pagina.
Default: 10
Esempio: Page Size

pagination

Attributo: data-pagination
Tipo: Boolean
Dettagli:

Imposta true per mostrare una barra di paginazione nel basso della tabella.
Default: false
Esempio: Table Pagination

paginationDetailHAlign

Attributo: data-pagination-detail-h-align
Tipo: String
Dettagli:

Indica come allineare i dettagli della paginazione. È possibile utilizzare 'left', 'right'.
Default: 'left'
Esempio: Pagination H Align

paginationHAlign

Attributo: data-pagination-h-align
Tipo: String
Dettagli:

Indica come allineare la paginazione. È possibile utilizzare 'left', 'right'.
Default: 'right'
Esempio: Pagination H Align

paginationLoadMore

Attributo: data-pagination-load-more
Tipo: Boolean
Dettagli:

Imposta true per abilitare il caricamento di più dati tramite paginazione. Viene utilizzato solo nella paginazione lato client. In generale, per implementare la funzionalità “carica altro”, è spesso necessario combinarla con un responseHandler per elaborare i dati restituiti.

È utilizzato principalmente in scenari in cui il numero totale di pagine è sconosciuto. In tali casi, non è possibile visualizzare il conteggio totale esatto o calcolare il numero totale di pagine. Invece, è possibile utilizzare un formato di visualizzazione come “100+” per indicare la presenza di elementi aggiuntivi oltre al conteggio visualizzato. Quando l’utente naviga all’ultima pagina, vengono caricati più dati, insieme a un aggiornamento delle informazioni di paginazione. Questo processo continua fino al completamento del caricamento di tutti i dati.
Default: false
Esempio: Pagination Load More

paginationLoop

Attributo: data-pagination-loop
Tipo: Boolean
Dettagli:

Imposta true per abilitare la modalità di ciclo continuo della paginazione.
Default: true
Esempio: Pagination Loop

paginationNextText

Attributo: data-pagination-next-text
Tipo: String
Dettagli:

Indica l’icona o il testo da mostrare nei dettagli della paginazione, nel pulsante “avanti”.
Default: '›'
Esempio: Pagination Text

paginationPagesBySide

Attributo: data-pagination-pages-by-side
Tipo: Number
Dettagli:

Il numero di pagine su ciascun lato (destro, sinistro) della pagina corrente.
Default: 1
Esempio: Pagination Index Number

paginationParts

Attributo: data-pagination-parts
Tipo: Array
Dettagli:

Queste opzioni definiscono quali parti della paginazione devono essere visibili.
- pageInfo Mostra quale insieme di dati verrà visualizzato nella pagina corrente (ad esempio: Showing 1 to 10 of 54 rows).
- pageInfoShort Simile a pageInfo, mostra solo il numero di righe della tabella (ad esempio: Showing 54 rows).
- pageSize Mostra il menu a tendina che definisce quanti elementi devono essere visualizzati per pagina.
- pageList Mostra la parte principale della paginazione (l’elenco delle pagine).
Default: ['pageInfo', 'pageSize', 'pageList']
Esempio: Pagination Parts

paginationPreText

Attributo: data-pagination-pre-text
Tipo: String
Dettagli:

Indica l’icona o il testo da mostrare nei dettagli della paginazione, nel pulsante “indietro”.
Default: '‹'
Esempio: Pagination Text

paginationSuccessivelySize

Attributo: data-pagination-successively-size
Tipo: Number
Dettagli:

Numero massimo di pagine successive in una riga.
Default: 5
Esempio: Pagination Index Number

paginationUseIntermediate

Attributo: data-pagination-use-intermediate
Tipo: Boolean
Dettagli:

Calcola e mostra le pagine intermedie per un accesso rapido.
Default: false
Esempio: Pagination Index Number

paginationVAlign

Attributo: data-pagination-v-align
Tipo: String
Dettagli:

Indica come allineare verticalmente la paginazione. È possibile utilizzare 'top', 'bottom', 'both' (mettere la paginazione in alto e in basso).
Default: 'bottom'
Esempio: Pagination V Align

queryParams

Attributo: data-query-params
Tipo: Function
Dettagli:

Quando si richiedono dati remoti, è possibile inviare parametri aggiuntivi modificando queryParams.

Se queryParamsType = 'limit', l’oggetto params contiene: limit, offset, search, sort, order.

Altrimenti, contiene: pageSize, pageNumber, searchText, sortName, sortOrder.

Restituisci false per interrompere la richiesta.
Default: function(params) { return params }
Esempio: Query Params

queryParamsType

Attributo: data-query-params-type
Tipo: String
Dettagli:

Imposta 'limit' per inviare i parametri di query con tipo RESTFul.
Default: 'limit'
Esempio: Query Params Type

regexSearch

Attributo: data-regex-search
Tipo: Boolean
Dettagli:

Imposta true per abilitare la ricerca con regex. Se questa opzione è abilitata, puoi cercare con regex, ad esempio [47a]$ per tutti gli elementi che terminano con un 4, 7 o a. La regex può essere inserita con /[47a]$/gim o senza flag [47a]$. I flag predefiniti sono gim.
Default: false
Esempio: Regex Search

rememberOrder

Attributo: data-remember-order
Tipo: Boolean
Dettagli:

Imposta true per ricordare l’ordine per ciascuna colonna.
Default: false
Esempio: Remember Order

responseHandler

Attributo: data-response-handler
Tipo: Function
Dettagli:

Prima di caricare i dati remoti, gestisci il formato dei dati di risposta. L’oggetto parametri contiene:
- res: i dati di risposta.
- jqXHR: oggetto jqXHR, che è un superset dell’oggetto XMLHTTPRequest. Per ulteriori informazioni, consulta il Tipo jqXHR.
Default: function(res) { return res }
Esempio: Response Handler

rowAttributes

Attributo: data-row-attributes
Tipo: Function
Dettagli:

La funzione formattatore degli attributi della riga, riceve due parametri:
- row: i dati del record della riga.
- index: l’indice della riga.
Supporta tutti gli attributi personalizzati.
Default: {}
Esempio: Row Attributes

rowStyle

Attributo: data-row-style
Tipo: Function
Dettagli:

La funzione formattatore dello stile della riga, riceve due parametri:
- row: i dati del record della riga.
- index: l’indice della riga.
Supporta classi o CSS.
Default: {}
Esempio: Row Style

search

Attributo: data-search
Tipo: Boolean
Dettagli:

Abilita l’input di ricerca.

Esistono tre modi per cercare:
- Il valore contiene la query di ricerca (Predefinito). Esempio: Github contiene git.
- Il valore deve essere identico alla query di ricerca. Esempio: Github (valore) e Github (query di ricerca).
- Confini (<, >, <=, =<, >=, =>). Esempio: 4 è maggiore di 3.
Note:
- Se vuoi utilizzare un input di ricerca personalizzato, utilizza searchSelector.
- Puoi anche cercare tramite regex utilizzando l’opzione regexSearch.
- Se vuoi inviare parametri cercabili alla paginazione lato server, utilizza l’opzione searchable.
Default: false
Esempio: Table Search

searchable

Attributo: data-searchable
Tipo: Boolean
Dettagli:

Imposta true per inviare parametri cercabili al server durante l’utilizzo della paginazione lato server.
Default: false
Esempio: Searchable

searchAccentNeutralise

Attributo: data-search-accent-neutralise
Tipo: Boolean
Dettagli:

Imposta su true se desideri utilizzare la funzionalità di neutralizzazione degli accenti.
Default: false
Esempio: Search Accent Neutralise

searchAlign

Attributo: data-search-align
Tipo: String
Dettagli:

Indica come allineare l’input di ricerca. È possibile utilizzare 'left', 'right', 'center'.
Default: 'right'
Esempio: Search Align

searchHighlight

Attributo: data-search-highlight
Tipo: Boolean
Dettagli:

Imposta su true per evidenziare il testo cercato (utilizzando il tag HTML <mark>). Puoi anche definire un formattatore di evidenziazione personalizzato, ad esempio, per valori con HTML o per utilizzare un colore di evidenziazione personalizzato.
Default: 'false'
Esempio: Search Highlight

searchOnEnterKey

Attributo: data-search-on-enter-key
Tipo: Boolean
Dettagli:

Il metodo di ricerca verrà eseguito solo quando viene premuto il tasto Invio.
Default: false
Esempio: Search On Enter Key

searchSelector

Attributo: data-search-selector
Tipo: Boolean|String
Dettagli:

Se questa opzione è impostata (deve essere un selettore DOM valido, ad esempio #customSearch), l’elemento DOM trovato (un elemento input) verrà utilizzato come ricerca della tabella invece dell’input di ricerca integrato.
Default: false
Esempio: Search Selector

searchText

Attributo: data-search-text
Tipo: String
Dettagli:

Quando si imposta la proprietà di ricerca, inizializza il testo di ricerca.
Default: ''
Esempio: Search Text

searchTimeOut

Attributo: data-search-time-out
Tipo: Number
Dettagli:

Imposta il timeout per l’esecuzione della ricerca.
Default: 500
Esempio: Search Time Out

selectItemName

Attributo: data-select-item-name
Tipo: String
Dettagli:

Il nome dell’input radio o checkbox.
Default: 'btSelectItem'
Esempio: Id Field

serverSort

Attributo: data-server-sort
Tipo: Boolean
Dettagli:

Imposta false per ordinare i dati lato client, funziona solo quando sidePagination è server.
Default: true
Esempio: Server Sort

showButtonIcons

Attributo: data-show-button-icons
Tipo: Boolean
Dettagli:

Tutti i pulsanti mostreranno le loro icone.
Default: true
Esempio: show button icons

showButtonText

Attributo: data-show-button-text
Tipo: Boolean
Dettagli:

Tutti i pulsanti mostreranno il loro testo.
Default: false
Esempio: show button text

showColumns

Attributo: data-show-columns
Tipo: Boolean
Dettagli:

Imposta true per mostrare l’elenco a tendina delle colonne. Possiamo impostare l’opzione di colonna switchable su false per nascondere l’elemento colonna nell’elenco a tendina. Il numero minimo di colonne selezionate può essere controllato con l’opzione di tabella minimumCountColumns.
Default: false
Esempio: Basic Columns e Large Columns

showColumnsSearch

Attributo: data-show-columns-search
Tipo: Boolean
Dettagli:

Imposta true per mostrare una ricerca per il filtro delle colonne.
Default: false
Esempio: Columns Search

showColumnsToggleAll

Attributo: data-show-columns-toggle-all
Tipo: Boolean
Dettagli:

Imposta true per mostrare una casella di controllo per attivare/disattivare tutte le colonne nell’opzione/tendina delle colonne.
Default: false
Esempio: Columns Toggle All

showExtendedPagination

Attributo: data-show-extended-pagination
Tipo: Boolean
Dettagli:

Imposta true per mostrare una versione estesa della paginazione (incluso il conteggio di tutte le righe senza filtri). Se utilizzi la paginazione lato server, utilizza totalNotFilteredField per definire il conteggio.
Default: false
Esempio: Show Extended Pagination

showFooter

Attributo: data-show-footer
Tipo: Boolean
Dettagli:

Imposta true per mostrare la riga di riepilogo del piè di pagina.
Default: false
Esempio: Show Footer

showFullscreen

Attributo: data-show-fullscreen
Tipo: Boolean
Dettagli:

Imposta true per mostrare il pulsante a schermo intero.
Default: false
Esempio: Show Fullscreen

showHeader

Attributo: data-show-header
Tipo: Boolean
Dettagli:

Imposta false per nascondere l’intestazione della tabella.
Default: true
Esempio: Show Header

showPaginationSwitch

Attributo: data-show-pagination-switch
Tipo: Boolean
Dettagli:

Imposta true per mostrare il pulsante di commutazione della paginazione.
Default: false
Esempio: Show Pagination Switch

showRefresh

Attributo: data-show-refresh
Tipo: Boolean
Dettagli:

Imposta true per mostrare il pulsante di aggiornamento.
Default: false
Esempio: Show Refresh

showSearchButton

Attributo: data-show-search-button
Tipo: Boolean
Dettagli:

Imposta true per mostrare un pulsante di ricerca dietro l’input di ricerca. La ricerca verrà eseguita solo se il pulsante viene premuto (ad esempio, per prevenire il traffico o il tempo di caricamento).
Default: false
Esempio: Show Search Button

showSearchClearButton

Attributo: data-show-search-clear-button
Tipo: Boolean
Dettagli:

Imposta true per mostrare un pulsante di cancellazione dietro l’input di ricerca, che cancellerà l’input di ricerca (anche tutti i filtri da filter-control, se abilitato).
Default: false
Esempio: Show Search Clear Button

showToggle

Attributo: data-show-toggle
Tipo: Boolean
Dettagli:

Imposta true per mostrare il pulsante di commutazione per passare dalla vista tabella a quella carta.
Default: false
Esempio: Show Toggle

sidePagination

Attributo: data-side-pagination
Tipo: String
Dettagli:

Definisce il lato della paginazione della tabella, può essere solo 'client' o 'server'. L’utilizzo del lato 'server' richiede l’impostazione dell’opzione 'url' o 'ajax'.

Nota che il formato di risposta del server richiesto è diverso a seconda che l’opzione 'sidePagination' sia impostata su 'client' o 'server'. Vedi gli esempi seguenti:
- Senza paginazione lato server
- Con paginazione lato server
Parametri URL:

Quando sidePagination è impostato su server, bootstrap table effettuerà chiamate all’url con i seguenti parametri URL:
- offset con un valore compreso tra 0 e total - 1, indicando il primo record da includere.
- limit con un valore che indica il numero di righe per pagina.
Quando implementi la paginazione lato server, devi implementare una vista JSON in un formato come questo esempio. Questa vista deve prendere i valori dei parametri URL indicati sopra e restituire i record a partire dall’indice offset e restituire il numero di record indicato da limit. Ad esempio, se desideri i record 11-20, la tua vista deve ottenere offset=10 e limit=10 dalla stringa URL e restituire i record come questo esempio.
Default: 'client'
Esempio: Client Side Pagination e Server Side Pagination

silentSort

Attributo: data-silent-sort
Tipo: Boolean
Dettagli:

Imposta false per ordinare i dati con il messaggio di caricamento. Questa opzione funziona quando l’opzione sidePagination è impostata su 'server'.
Default: true
Esempio: Silent Sort

singleSelect

Attributo: data-single-select
Tipo: Boolean
Dettagli:

Imposta true per consentire una casella di controllo che seleziona solo una riga.
Default: false
Esempio: Single Select

smartDisplay

Attributo: data-smart-display
Tipo: Boolean
Dettagli:

Imposta true per visualizzare la paginazione o la vista a carta in modo intelligente.
Default: true
Esempio: Smart Display

sortable

Attributo: data-sortable
Tipo: Boolean
Dettagli:

Imposta false per disabilitare l’ordinamento di tutte le colonne.
Default: true
Esempio: Table Sortable

sortClass

Attributo: data-sort-class
Tipo: String
Dettagli:

Il nome della classe degli elementi td ordinati.
Default: undefined
Esempio: Sort Class

sortEmptyLast

Attributo: data-sort-empty-last
Tipo: Boolean
Dettagli:

Imposta true per ordinare <stringa vuota>, undefined e null come ultimo valore.
Default: false
Esempio: Sort Empty Last

sortName

Attributo: data-sort-name
Tipo: String
Dettagli:

Definisce quale colonna verrà ordinata. Questo campo di attributo funziona insieme a sortOrder, e entrambi dovrebbero essere utilizzati insieme per una funzionalità di ordinamento corretta.
Default: undefined
Esempio: Sort Name Order

sortOrder

Attributo: data-sort-order
Tipo: String
Dettagli:

Definisce l’ordine di ordinamento della colonna, può essere solo undefined, 'asc' o 'desc'. Questo campo di attributo funziona insieme a sortName, e entrambi dovrebbero essere utilizzati insieme per una funzionalità di ordinamento corretta.
Default: undefined
Esempio: Sort Name Order

sortReset

Attributo: data-sort-reset
Tipo: Boolean
Dettagli:

Imposta true per reimpostare l’ordinamento al terzo clic.
Default: false
Esempio: Sort Reset

sortResetPage

Attributo: data-sort-reset-page
Tipo: Boolean
Dettagli:

Imposta true per reimpostare il numero di pagina durante l’ordinamento.
Default: false
Esempio: Sort Reset Page

sortStable

Attributo: data-sort-stable
Tipo: Boolean
Dettagli:

Imposta true per ottenere un ordinamento stabile. Aggiungeremo la proprietà '_position' alla riga.
Default: false
Esempio: Sort Stable

strictSearch

Attributo: data-strict-search
Tipo: Boolean
Dettagli:

Abilita la ricerca rigorosa. Disabilita i controlli di confronto.
Default: false
Esempio: Strict Search

theadClasses

Attributo: data-thead-classes
Tipo: String
Dettagli:

Il nome della classe dell’thead della tabella. Bootstrap utilizza le classi modificatrici .thead-light o .thead-dark per rendere thead di colore grigio chiaro o scuro.
Default: ''
Esempio: Thead Classes

Attributo: data-toolbar
Tipo: String/Node
Dettagli:

Un selettore jQuery che indica la barra degli strumenti, ad esempio: #toolbar, .toolbar, o un nodo DOM.
Default: undefined
Esempio: Custom Toolbar

toolbarAlign

Attributo: data-toolbar-align
Tipo: String
Dettagli:

Indica come allineare la barra degli strumenti personalizzata. È possibile utilizzare 'left' (sinistra), 'right' (destra).
Default: 'left'
Esempio: Toolbar Align

totalField

Attributo: data-total-field
Tipo: String
Dettagli:

Chiave nel JSON in ingresso contenente i dati 'total'.
Default: 'total'
Esempio: Total/Data Field

totalNotFiltered

Attributo: data-total-not-filtered
Tipo: Number
Dettagli:

Questa proprietà viene principalmente passata dal server di paginazione, che è facile da utilizzare.
Default: 0

totalNotFilteredField

Attributo: data-total-not-filtered-field
Tipo: string
Dettagli:

Il campo dalla risposta JSON verrà utilizzato per showExtendedPagination.
Default: totalNotFiltered
Esempio: Total Not Filtered Field

totalRows

Attributo: data-total-rows
Tipo: Number
Dettagli:

Questa proprietà viene principalmente passata dal server di paginazione, che è facile da utilizzare.
Default: 0

trimOnSearch

Attributo: data-trim-on-search
Tipo: Boolean
Dettagli:

Imposta true per rimuovere gli spazi nel campo di ricerca.
Default: true
Esempio: Trim On Search

undefinedText

Attributo: data-undefined-text
Tipo: String
Dettagli:

Definisce il testo predefinito per undefined.
Default: '-'
Esempio: Undefined Text

uniqueId

Attributo: data-unique-id
Tipo: String
Dettagli:

Indica un identificatore univoco per ciascuna riga. L’ID univoco dovrebbe sempre essere sicuro per l’HTML, ad esempio alfanumerico, non dovrebbe contenere caratteri che potrebbero rompere l’HTML, ad esempio ".
Default: undefined
Esempio: getRowByUniqueId

url

Attributo: data-url
Tipo: String
Dettagli:

Un URL per richiedere dati da un sito remoto.

Nota che il formato di risposta del server richiesto è diverso a seconda che l’opzione 'sidePagination' sia specificata. Vedi gli esempi seguenti:
- Senza paginazione lato server
- Con paginazione lato server
Parametri URL:

Quando sidePagination è impostato su server, bootstrap table effettuerà chiamate all’url con i seguenti parametri URL:
- offset con un valore compreso tra 0 e total - 1, indicando il primo record da includere.
- limit con un valore che indica il numero di righe per pagina.
Quando implementi la paginazione lato server, devi implementare una vista JSON in un formato come questo esempio. Questa vista deve prendere i valori dei parametri URL indicati sopra e restituire i record a partire dall’indice offset e restituire il numero di record indicato da limit. Ad esempio, se desideri i record 11-20, la tua vista deve ottenere offset=10 e limit=10 dalla stringa URL e restituire i record come questo esempio.
Default: undefined
Esempio: From URL
Gestione degli errori

Per ottenere gli errori di caricamento, utilizzare onLoadError

virtualScroll

Attributo: data-virtual-scroll
Tipo: Boolean
Dettagli:

Imposta true per abilitare lo scroll virtuale per visualizzare un elenco virtuale, “infinito”.

Nota: Attualmente, l’implementazione presuppone che ogni riga abbia la stessa altezza. Se le altezze delle righe variano, potrebbero verificarsi bug imprevedibili. Assicurati che l’altezza di ciascuna riga sia coerente o applica lo stile td { white-space: nowrap; } per risolvere questo problema.
Default: false
Esempio: Large Data

virtualScrollItemHeight

Attributo: data-virtual-scroll-item-height
Tipo: Number
Dettagli:

Se questa opzione non è definita, utilizzeremo per impostazione predefinita l’altezza del primo elemento.

È importante fornire questo valore se l’altezza dell’elemento virtuale è significativamente maggiore dell’altezza predefinita. Questa dimensione viene utilizzata per aiutare a determinare quanti elementi devono essere creati durante l’inizializzazione e per aiutare a calcolare l’altezza dell’area scorrevole. Questo valore di altezza può utilizzare solo unità px.
Default: undefined

visibleSearch

Attributo: data-visible-search
Tipo: Boolean
Dettagli:

Imposta true per cercare solo nelle colonne/dati visibili. Se i dati contengono altri valori non visualizzati, saranno ignorati durante la ricerca.
Default: false
Esempio: visible search

Opzioni di Bootstrap Table

-

ajax

ajaxOptions

buttons

buttonsAlign

buttonsAttributeTitle

buttonsClass

buttonsOrder

buttonsPrefix

buttonsToolbar

cache

cardView

checkboxHeader

classes

clickToSelect

columns

contentType

customSearch

customSort

data

dataField

dataType

detailFilter

detailFormatter

detailView

detailViewAlign

detailViewByClick

detailViewIcon

escape

escapeTitle

filterOptions

fixedScroll

footerField

footerStyle

headerStyle

height

icons

iconSize

iconsPrefix

idField

ignoreClickToSelectOn

loadingFontSize

loadingTemplate

locale

maintainMetaData

method

minimumCountColumns

multipleSelectRow

pageList

pageNumber

pageSize

pagination

paginationDetailHAlign

paginationHAlign

paginationLoadMore

paginationLoop

paginationNextText

paginationPagesBySide

paginationParts

paginationPreText

paginationSuccessivelySize

paginationUseIntermediate

paginationVAlign

queryParams

queryParamsType

regexSearch

rememberOrder

responseHandler

rowAttributes

rowStyle

search

searchable

searchAccentNeutralise

searchAlign

searchHighlight

searchOnEnterKey

searchSelector

searchText

searchTimeOut