テーブルオプション

Bootstrap TableのテーブルオプションAPIです。

テーブルオプションはjQuery.fn.bootstrapTable.defaultsで定義されています。

-

• 属性: data-toggle

• タイプ: 文字列

• 詳細

  JavaScriptを書かずにBootstrap Tableを有効にします。

• デフォルト: 'table'

• 例: HTMLから

ajax

• 属性: data-ajax

• タイプ: 関数

• 詳細

  ajax呼び出しを置き換えるメソッド。jQuery ajaxメソッドと同じAPIを実装する必要があります。

• デフォルト: 未定義

• 例: テーブルAJAX

ajaxオプション

• 属性: data-ajax-options

• タイプ: オブジェクト

• 詳細

  ajaxリクエストを送信するための追加オプション。値の一覧: jQuery.ajax。

• デフォルト: {}

• 例: AJAXオプション

ボタン

• 属性: data-buttons

• タイプ: 関数

• 詳細

  このオプションを使用すると、テーブルの右上に表示される「ボタンバー」にカスタムボタンを作成/追加できます。 これらのボタンは、テーブルオプション buttonsOrder でソートできます。イベントに使用されるキー/名前をソートに使用してください。

  カスタムボタンは高度に設定可能です。以下のオプションがあります。

  • text（テキスト）
    • 説明: このオプションは、showButtonText テーブルオプションで使用されます。
    • タイプ: 文字列
  • icon（アイコン）
    • 説明: このオプションは、showButtonIcons テーブルオプションで使用されます。
    • タイプ: 文字列 - アイコンクラス（例：fa-users）のみが必要です。
  • render（レンダリング）
    • 説明: デフォルトでボタンを非表示にするには、このオプションを false に設定します。データ属性 data-show-button-name="true" を追加すると、ボタンが再び表示されます。
  • attributes（属性）
    • 説明: このオプションを使用すると、title などの追加のHTML属性を追加できます。
    • タイプ: オブジェクト
    • 例: {title: 'ボタンタイトル'}
  • html
    • 説明: HTMLを自動生成したくない場合は、このオプションを使用してカスタムHTMLを挿入できます。 event オプションは、カスタム HTML に name="button-name" が含まれている場合にのみ機能します。このオプションを使用すると、以下のオプションは無視されます。
      • text（テキスト）
      • icon（アイコン）
      • attributes（属性）
    • タイプ: 関数|文字列
  • event（イベント）
    • 説明: ボタンにイベントを追加する場合に使用します。
    • タイプ: 関数|オブジェクト|文字列

  event オプションは3つの方法で設定できます。click イベントを持つ1つのイベント。

  {
    'event': () => { }
  }
  

  独自に定義されたイベントタイプを持つ1つのイベント。

    {
      'event': {
        'mouseenter': () => { }
      }
    }
  

  独自に定義されたイベントタイプを持つ複数のイベント。

    {
      'event': {
        'click': () => { },
        'mouseenter': () => { },
        'mouseleave': () => { }
      }
    }
  

  ヒント: インライン関数の代わりに、関数名を使用することもできます。

  設定されたカスタムボタンは次のようになります。

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

• デフォルト: {}

• 例: ボタン

ボタンの配置

• 属性: data-buttons-align

• タイプ: 文字列

• 詳細

  ツールバーボタンの配置方法を指定します。'left'、'right'を使用できます。

• デフォルト: 'right'

• 例: ボタンの配置

ボタンのタイトル属性

• 属性: data-buttons-attribute-title

• タイプ: 文字列

• 詳細

  ツールバーボタンのtitle属性をカスタマイズします。これは主にツールバーのスタイルをカスタマイズするために使用されます。

• デフォルト: 'title'

• 例: ボタンのタイトル属性

ボタンのクラス

• 属性: data-buttons-class

• タイプ: 文字列

• 詳細

  テーブルボタンのクラス（'btn-'の後に追加される）を定義します。

• デフォルト: 'secondary'

• 例: ボタンのクラス

ボタンの順序

• 属性: data-buttons-order

• タイプ: 配列

• 詳細

  ツールバーボタンのカスタム順序を指定する方法を示します。

• デフォルト: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']

• 例: ボタンの順序

ボタンのプレフィックス

• 属性: data-buttons-prefix

• タイプ: 文字列

• 詳細

  テーブルボタンのプレフィックスを定義します。

• デフォルト: 'btn'

• 例: ボタンのプレフィックス

ボタンツールバー

• 属性: data-buttons-toolbar

• タイプ: 文字列/ノード

• 詳細

  カスタムボタントゥールバーを示すjQueryセレクタ。例：#buttons-toolbar、.buttons-toolbar、またはDOMノード。

• デフォルト: 未定義

• 例: ボタントゥールバー

キャッシュ

• 属性: data-cache

• タイプ: 真偽値

• 詳細

  AJAXリクエストのキャッシュを無効にするには、falseを設定します。

• デフォルト: true

• 例: テーブルキャッシュ

カードビュー

• 属性: data-card-view

• タイプ: 真偽値

• 詳細

  カードビュースタイルのテーブル（例：モバイルビュー）を表示するには、trueを設定します。

• デフォルト: false

• 例: カードビュー

ヘッダーのチェックボックス

• 属性: data-checkbox-header

• タイプ: 真偽値

• 詳細

  ヘッダー行のすべて選択チェックボックスを非表示にするには、falseを設定します。

• デフォルト: true

• 例: ヘッダーのチェックボックス

クラス

• 属性: data-classes

• タイプ: 文字列

• 詳細

  テーブルのクラス名。'table'、'table-bordered'、'table-hover'、'table-striped'、'table-dark'、'table-sm'、'table-borderless' を使用できます。デフォルトでは、テーブルには枠線があります。

• デフォルト: 'table table-bordered table-hover'

• 例: テーブルクラス

クリックして選択

• 属性: data-click-to-select

• タイプ: 真偽値

• 詳細

  行をクリックしたときにチェックボックスまたはラジオボタンを選択するには、trueを設定します。

• デフォルト: false

• 例： クリックして選択

カラム

• 属性： -

• タイプ: 配列

• 詳細

  テーブルの列設定オブジェクトです。詳細は列のプロパティを参照してください。

• デフォルト： []

• 例： テーブルの列

コンテンツタイプ

• 属性： data-content-type

• タイプ: 文字列

• 詳細

  リモートデータのリクエストのContentTypeです。例： application/x-www-form-urlencoded。

• デフォルト： 'application/json'

• 例： コンテンツタイプ

カスタム検索

• 属性： data-custom-search

• タイプ: 関数

• 詳細

  組み込みの検索関数の代わりにカスタム検索関数が実行されます。3つのパラメータを取ります。

  • data: テーブルデータ。
  • text: 検索テキスト。
  • filter: filterBy メソッドからのフィルタオブジェクト。

  使用例

  function customSearch(data, text) {
    return data.filter(function (row) {
      return row.field.indexOf(text) > -1
    })
  }
  

• デフォルト: 未定義

• 例： カスタム検索

カスタムソート

• 属性： data-custom-sort

• タイプ: 関数

• 詳細

  組み込みのソート関数の代わりにカスタムソート関数が実行されます。3つのパラメータを取ります。

  • sortName: ソート名。
  • sortOrder: ソート順。
  • data: 行データ。

• デフォルト: 未定義

• 例： カスタム順序

データ

• 属性： data-data

• タイプ： Array | Object

• 詳細

  ロードされるデータ。

  データに _<field>_rowspan または _<field>_colspan プロパティがある場合、セルは自動的にマージされます。例：

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

  この機能を使用する場合、フォーマットが正しいことを確認するために data が必要です。

• デフォルト： []

• 例： データから

データフィールド

• 属性： data-data-field

• タイプ: 文字列

• 詳細

  'rows' データリストを含む受信JSONのキー。

• デフォルト： 'rows'

• 例： 合計/データフィールド

データタイプ

• 属性： data-data-type

• タイプ: 文字列

• 詳細

  サーバーから期待されるデータのタイプ。

• デフォルト： 'json'

• 例： データタイプ

詳細フィルター

• 属性： data-detail-filter

• タイプ: 関数

• 詳細

  detailView が true に設定されている場合、行ごとの展開を有効にします。trueを返すと、その行の展開が有効になります。falseを返すと、その行の展開が無効になります。デフォルト関数はtrueを返し、すべての行の展開を許可します。

• デフォルト： function(index, row) { return true }

• 例： 詳細フィルタ

詳細フォーマッター

• 属性： data-detail-formatter

• タイプ: 関数

• 詳細

  detailView が true に設定されている場合、詳細ビューのフォーマットを設定します。文字列を返すと、詳細ビュ セルに追加されます。必要に応じて、3番目のパラメータ（ターゲットセルのjQuery要素）を使用して要素を直接レンダリングします。

• デフォルト： function(index, row, element) { return '' }

• 例： 詳細ビュー

詳細ビュー

• 属性： data-detail-view

• タイプ: 真偽値

• 詳細

  詳細ビューテーブルを表示するには、true に設定します。uniqueId オプションを設定して、テーブルを更新するときに詳細ビュ の状態を維持できます。

• デフォルト: false

• 例： 詳細ビューUniqueId

詳細ビューの配置

• 属性： data-detail-view-align

• タイプ: 文字列

• 詳細

  詳細ビューアイコンの配置方法を指定します。'left'、'right' を使用できます。

• デフォルト： 'left'

• 例： 詳細ビューの配置

クリックによる詳細ビュー

• 属性： data-detail-view-by-click

• タイプ: 真偽値

• 詳細

  セルをクリックしたときに詳細ビューを切り替えるには、true に設定します。

• デフォルト: false

• 例： 詳細ビューアイコン

詳細ビューアイコン

• 属性： data-detail-view-icon

• タイプ: 真偽値

• 詳細

  詳細ビュー列（プラス/マイナスアイコン）を表示するには、true に設定します。

• デフォルト: true

• 例： 詳細ビューアイコン

エスケープ

• 属性： data-escape

• タイプ: 真偽値

• 詳細

  &、<、>、”、 、および ' 文字を置き換えて、HTMLに挿入するために文字列をエスケープします。列タイトルに対して無効にするには、escapeTitle` オプションを確認してください。

• デフォルト: false

• 例： テーブルエスケープ

タイトルのエスケープ

• 属性： data-escape-title

• タイプ: 真偽値

• 詳細

  escape オプションを列タイトルに適用するかどうかを切り替えます。

• デフォルト: true

• 例： テーブルエスケープタイトル

フィルターオプション

• 属性： data-filter-options

• タイプ: 真偽値

• 詳細

  アルゴリズムのデフォルトのフィルタオプションを定義します。filterAlgorithm: 'and' は、指定されたすべてのフィルタが一致する必要があることを意味し、filterAlgorithm: 'or' は、指定されたフィルタのいずれかが一致する必要があることを意味します。

• デフォルト： { filterAlgorithm: 'and' }

• 例： フィルタオプション

固定スクロール

• 属性： data-fixed-scroll

• タイプ: 真偽値

• 詳細

  データをロードするときにテーブルの固定スクロールバー位置を有効にするには、true に設定します。

• デフォルト: false

• 例： 固定スクロール

フッターフィールド

• 属性： data-footer-field

• タイプ: 文字列

• 詳細

  フッターオブジェクト（データ配列またはサーバーレスポンスJSONから）のキーを定義します。フッターオブジェクトを使用して、フッターのcolspanおよび/またはフッターの値を設定/定義できます。data-pagination が true で、data-side-pagination が server の場合にのみトリガーされます。

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

• デフォルト： footerField

• 例： フッターフィールド

フッタースタイル

• 属性： data-footer-style

• タイプ: 関数

• 詳細

  フッタースタイルフォーマッタ関数。1つのパラメータを取ります。

  • column: 列オブジェクト。

  classes または css をサポートします。使用例

  function footerStyle(column) {
    return {
      css: { 'font-weight': 'normal' },
      classes: 'my-class'
    }
  }
  

• デフォルト: {}

• 例： フッタースタイル

ヘッダースタイル

• 属性： data-header-style

• タイプ: 関数

• 詳細

  ヘッダースタイルフォーマッタ関数。1つのパラメータを取ります。

  • column: 列オブジェクト。

  classes または css をサポートします。使用例

  function headerStyle(column) {
    return {
      css: { 'font-weight': 'normal' },
      classes: 'my-class'
    }
  }
  

• デフォルト: {}

• 例： ヘッダースタイル

高さ

• 属性： data-height

• タイプ： Number

• 詳細

  テーブルの高さ。テーブルの固定ヘッダーを有効にします。

• デフォルト: 未定義

• 例： テーブルの高さ

アイコン

• 属性： data-icons

• タイプ: オブジェクト

• 詳細

  ツールバー、ページネーション、および詳細ビューで使用されるアイコンを定義します。

• デフォルト

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

• 例： テーブルアイコン

アイコンサイズ

• 属性： data-icon-size

• タイプ: 文字列

• 詳細

  アイコンサイズを定義します。undefined、'lg'、'sm' を使用できます。

• デフォルト: 未定義

• 例： アイコンサイズ

アイコンプレフィックス

• 属性： data-icons-prefix

• タイプ: 文字列

• 詳細

  アイコンセット名を定義します。デフォルトでは、このオプションはテーマによって自動的に計算されます。

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

• デフォルト: 未定義

• 例： アイコンプレフィックス

  IDフィールド

• 属性： data-id-field

• タイプ: 文字列

• 詳細

  チェックボックス/ラジオボタンの値として使用されるフィールドを示します。これは、selectItemNameに対応します。

• デフォルト: 未定義

• 例： IDフィールド

クリックによる選択の無視対象

• 属性： data-ignore-click-to-select-on

• タイプ: 関数

• 詳細

  clickToSelect を無視する要素を設定します。1つのパラメータを取ります。

  • element: クリックされた要素。

  クリックを無視する場合はtrueを返し、クリックによって行を選択する場合はfalseを返します。このオプションは、clickToSelect がtrueの場合にのみ関連します。

• デフォルト： { return ['A', 'BUTTON'].includes(tagName) }

• 例： 無視するクリックして選択

読み込み中のフォントサイズ

• 属性： data-loading-font-size

• タイプ: 文字列

• 詳細

  ロードテキストのフォントサイズを定義するには、デフォルト値は 'auto' です。テーブルの幅に応じて12pxから32pxの間で自動的に計算されます。

• デフォルト： 'auto'

• 例： ローディングフォントサイズ

読み込み中テンプレート

• 属性： data-loading-template

• タイプ: 関数

• 詳細

  ロードタイプを自分でカスタマイズするには。パラメータオブジェクトには以下が含まれます。

  • loadingMessage: formatLoadingMessage ローケル。
• デフォルト

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

• 例： ローディングテンプレート

ロケール

• 属性： data-locale

• タイプ: 文字列

• 詳細

  使用するロケールを設定します（例：'zh-CN'）。ロケールファイルは事前にロードする必要があります。ロードされている場合は、次の順序でフォールバックロケールを使用できます。

  • 最初に、指定されたロケールを試します。
  • 次に、 '_' を '-' に変換し、地域コードを大文字にしたロケールを試します。
  • 次に、短いロケールコード（例：'zh-CN' の代わりに 'zh'）を試します。
  • 最後に、最後にロードされたロケールファイル（またはロケールがロードされていない場合はデフォルトロケール）を使用します。

  undefined または空の文字列のままにした場合、最後にロードされたロケール（またはロケールファイルがロードされていない場合は 'en-US'）を使用します。

• デフォルト: 未定義

• 例： テーブルロケール

メタデータの維持

• 属性： data-maintain-meta-data

• タイプ: 真偽値

• 詳細

  ページの変更と検索で次のメタデータを維持するには、true に設定します。

  • 選択された行
  • 非表示の行

• デフォルト: false

• 例： メタデータの維持

メソッド

• 属性： data-method

• タイプ: 文字列

• 詳細

  リモートデータのリクエストメソッドタイプ。

• デフォルト： 'get'

• 例： テーブルメソッド

最小カラム数

• 属性： data-minimum-count-columns

• タイプ： Number

• 詳細

  列ドロップダウンリストから非表示にする最小列数。

• デフォルト： 1

• 例： 最小列数

複数行選択

• 属性： data-multiple-select-row

• タイプ: 真偽値

• 詳細

  複数選択行を有効にするには、true に設定します。Ctrl +クリックを使用して1行を選択するか、Shift +クリックを使用して行の範囲を選択できます。

• デフォルト: false

• 例： 複数行選択

ページリスト

• 属性： data-page-list

• タイプ: 配列

• 詳細

  ページネーションプロパティを設定する場合、リストを選択してページサイズを初期化します。'all' または 'unlimited' オプションを含めると、すべてのレコードがテーブルに表示されます。

  ヒント：テーブルの行数がオプションよりも少ない場合、オプションは自動的に非表示になります。この機能を無効にするには、smartDisplay を false に設定します。

• デフォルト： [10, 25, 50, 100]

• 例： ページリスト

ページ番号

• 属性： data-page-number

• タイプ： Number

• 詳細

  ページネーションプロパティを設定する場合、ページ番号を初期化します。

• デフォルト： 1

• 例： ページ番号

ページサイズ

• 属性： data-page-size

• タイプ： Number

• 詳細

  ページネーションプロパティを設定する際は、ページサイズを初期化してください。

• デフォルト: 10

• 例: ページサイズ

ページネーション

• 属性: data-pagination

• タイプ: 真偽値

• 詳細

  true に設定すると、テーブルの下部にページネーションツールバーが表示されます。

• デフォルト: false

• 例: テーブルページネーション

ページネーション詳細の水平方向配置

• 属性: data-pagination-detail-h-align

• タイプ: 文字列

• 詳細

  ページネーションの詳細の配置方法を指定します。'left'、'right' を使用できます。

• デフォルト： 'left'

• 例: ページネーションの水平方向の配置

ページネーションの水平方向配置

• 属性: data-pagination-h-align

• タイプ: 文字列

• 詳細

  ページネーションの配置方法を指定します。'left'、'right' を使用できます。

• デフォルト: 'right'

• 例: ページネーションの水平方向の配置

ページネーション「もっと読み込む」

• 属性: data-pagination-load-more

• タイプ: 真偽値

• 詳細

  true に設定すると、ページネーションを使用してさらにデータを読み込むことができます。これはクライアントサイドのページネーションでのみ使用されます。一般的に、「さらに読み込む」機能を実装するには、responseHandler と組み合わせて返されたデータを処理する必要があります。

  これは主に、ページ総数が不明な場合に使用されます。このような場合、正確な総数を表示したり、ページ総数を計算したりすることはできません。代わりに、「100+」のような表示形式を使用して、表示された数を超えるアイテムが存在することを示すことができます。ユーザーが最後のページに移動すると、ページネーション情報が更新されるとともに、さらにデータが読み込まれます。このプロセスは、すべてのデータの読み込みが完了するまで続きます。

• デフォルト: false

• 例: さらに読み込むページネーション

ページネーションループ

• 属性: data-pagination-loop

• タイプ: 真偽値

• 詳細

  true に設定すると、ページネーションの連続ループモードが有効になります。

• デフォルト: true

• 例: ページネーションループ

ページネーション「次へ」テキスト

• 属性: data-pagination-next-text

• タイプ: 文字列

• 詳細

  ページネーションの詳細に表示されるアイコンまたはテキスト（次へボタン）を指定します。

• デフォルト: '›'

• 例: ページネーションテキスト

ページネーションの両側ページ数

• 属性: data-pagination-pages-by-side

• タイプ： Number

• 詳細

  現在のページの両側（右、左）に表示されるページ数です。

• デフォルト： 1

• 例: ページネーションインデックス番号

ページネーションのパーツ

• 属性: data-pagination-parts

• タイプ: 配列

• 詳細

  これらのオプションは、ページネーションのどの部分が表されるかを定義します。

  • pageInfo 現在のページに表示されるデータセットを示します（例：54行中1～10行目を表示）。
  • pageInfoShort pageInfo と似ていますが、テーブルにいくつの行があるかのみ表示します（例：54行を表示）。
  • pageSize ページに表示する行数を定義するドロップダウンを表示します。
  • pageList ページネーションの主要部分（ページのリスト）を表示します。

• デフォルト: ['pageInfo', 'pageSize', 'pageList']

• 例: ページネーションパーツ

ページネーション「前へ」テキスト

• 属性: data-pagination-pre-text

• タイプ: 文字列

• 詳細

  ページネーションの詳細に表示されるアイコンまたはテキスト（前へボタン）を指定します。

• デフォルト: '‹'

• 例: ページネーションテキスト

ページネーションの連続サイズ

• 属性: data-pagination-successively-size

• タイプ： Number

• 詳細

  1行に連続して表示できる最大ページ数です。

• デフォルト: 5

• 例: ページネーションインデックス番号

ページネーションの中間値使用

• 属性: data-pagination-use-intermediate

• タイプ: 真偽値

• 詳細

  すばやくアクセスできるように中間ページを計算して表示します。

• デフォルト: false

• 例: ページネーションインデックス番号

ページネーションの垂直方向配置

• 属性: data-pagination-v-align

• タイプ: 文字列

• 詳細

  ページネーションの垂直方向の配置方法を指定します。'top'、'bottom'、'both'（ページネーションを上下に配置）を使用できます。

• デフォルト: 'bottom'

• 例: ページネーションの垂直方向の配置

クエリパラメータ

• 属性: data-query-params

• タイプ: 関数

• 詳細

  リモートデータのリクエスト時に、queryParams を変更することで追加パラメータを送信できます。

  queryParamsType = 'limit' の場合、params オブジェクトには limit、offset、search、sort、order が含まれます。

  それ以外の場合は、pageSize、pageNumber、searchText、sortName、sortOrder が含まれます。

  リクエストを停止するには false を返します。

• デフォルト: function(params) { return params }

• 例: クエリパラメータ

クエリパラメータタイプ

• 属性: data-query-params-type

• タイプ: 文字列

• 詳細

  RESTFul タイプのクエリパラメータを送信するには、'limit' を設定します。

• デフォルト: 'limit'

• 例: クエリパラメータタイプ

正規表現検索

• 属性: data-regex-search

• タイプ: 真偽値

• 詳細

  true に設定すると、正規表現検索が有効になります。このオプションが有効になっている場合、正規表現で検索できます。たとえば、[47a]$ は、4、7、または a で終わるすべてのアイテムを検索します。正規表現は、/[47a]$/gim のようにフラグを付けて入力するか、[47a]$ のようにフラグなしで入力できます。デフォルトのフラグは gim です。

• デフォルト: false

• 例: 正規表現検索

順序の記憶

• 属性: data-remember-order

• タイプ: 真偽値

• 詳細

  true に設定すると、各列の順序が記憶されます。

• デフォルト: false

• 例: 順序の記憶

レスポンスハンドラ

• 属性: data-response-handler

• タイプ: 関数

• 詳細

  リモートデータを読み込む前に、レスポンスデータの形式を処理します。パラメータオブジェクトには以下が含まれます。

  • res: レスポンスデータ。
  • jqXHR: jqXHR オブジェクト。XMLHTTPRequest オブジェクトのスーパーセットです。詳細は、jqXHR タイプ を参照してください。

• デフォルト: function(res) { return res }

• 例: レスポンスハンドラ

行属性

• 属性: data-row-attributes

• タイプ: 関数

• 詳細

  行属性フォーマッタ関数。2つのパラメータを取ります。

  • row: 行レコードデータ。
  • index: 行インデックス。

  すべてカスタム属性をサポートします。

• デフォルト: {}

• 例: 行属性

行スタイル

• 属性: data-row-style

• タイプ: 関数

• 詳細

  行スタイルフォーマッタ関数。2つのパラメータを取ります。

  • row: 行レコードデータ。
  • index: 行インデックス。

  クラスまたはCSSをサポートします。

• デフォルト: {}

• 例: 行スタイル

検索

• 属性: data-search

• タイプ: 真偽値

• 詳細

  検索入力を有効にします。

  3つの検索方法があります。

  • 値に検索クエリが含まれている（デフォルト）。例：Github には git が含まれている。
  • 値が検索クエリと完全に一致する必要がある。例：Github（値）と Github（検索クエリ）。
  • 比較（<、>、<=、=<、>=、=>）。例：4 は 3 より大きい。

  注記

  • カスタム検索入力を使用する場合は、searchSelector を使用してください。
  • regexSearch オプションを使用して、正規表現で検索することもできます。
  • サーバーサイドページネーションを使用しているときに検索可能なパラメータをサーバーに送信する場合は、searchable オプションを使用してください。

• デフォルト: false

• 例: テーブル検索

検索可能

• 属性: data-searchable

• タイプ: 真偽値

• 詳細

  サーバーサイドページネーションを使用しているときに、検索可能なパラメータ をサーバーに送信するには、true に設定します。

• デフォルト: false

• 例: 検索可能

アクセント記号を無視する検索

• 属性: data-search-accent-neutralise

• タイプ: 真偽値

• 詳細

  アクセント記号を無視する機能を使用する場合は、true に設定します。

• デフォルト: false

• 例: アクセント記号を無視した検索

検索の配置

• 属性: data-search-align

• タイプ: 文字列

• 詳細

  検索入力の配置方法を指定します。'left'、'right' を使用できます。

• デフォルト: 'right'

• 例: 検索入力の配置

検索ハイライト

• 属性: data-search-highlight

• タイプ: 真偽値

• 詳細

  検索されたテキストを強調表示するには（<mark> HTML タグを使用）、true に設定します。カスタム強調表示フォーマッタ を定義することもできます。たとえば、HTMLを含む値の場合や、カスタムの強調表示色を使用する場合などです。

• デフォルト: 'false'

• 例: 検索結果の強調表示

Enterキーで検索

• 属性: data-search-on-enter-key

• タイプ: 真偽値

• 詳細

  Enter キーが押されるまで検索メソッドは実行されません。

• デフォルト: false

• 例: Enter キーで検索

検索セレクタ

• 属性: data-search-selector

• タイプ: Boolean|String

• 詳細

  このオプションが設定されている場合（有効なDOMセレクタである必要があります。例：#customSearch）、見つかったDOM要素（input 要素）が、組み込みの検索入力の代わりにテーブル検索として使用されます。

• デフォルト: false

• 例: 検索セレクタ

検索テキスト

• 属性: data-search-text

• タイプ: 文字列

• 詳細

  検索プロパティを設定するときに、検索テキストを初期化します。

• デフォルト: ''

• 例: 検索テキスト

検索タイムアウト

• 属性: data-search-time-out

• タイプ： Number

• 詳細

  検索実行のタイムアウトを設定します。

• デフォルト: 500

• 例: 検索タイムアウト

選択項目名

• 属性: data-select-item-name

• タイプ: 文字列

• 詳細

  ラジオボタンまたはチェックボックス入力の名前です。

• デフォルト: 'btSelectItem'

• 例： IDフィールド

サーバーソート

• 属性: data-server-sort

• タイプ: 真偽値

• 詳細

  クライアントサイドでデータをソートするには、false に設定します。sidePagination が server の場合にのみ機能します。

• デフォルト: true

• 例: サーバーソート

ボタンアイコンの表示

• 属性: data-show-button-icons

• タイプ: 真偽値

• 詳細

  すべてのボタンにアイコンが表示されます。

• デフォルト: true

• 例: ボタンアイコンの表示

ボタンテキストの表示

• 属性: data-show-button-text

• タイプ: 真偽値

• 詳細

  すべてのボタンにテキストが表示されます。

• デフォルト: false

• 例： ボタンテキストを表示

カラムの表示

• 属性： data-show-columns

• タイプ: 真偽値

• 詳細

  true に設定すると、列のドロップダウンリストが表示されます。 switchable 列オプションを false に設定すると、ドロップダウンリストの列項目を非表示にできます。 選択可能な列の最小数は、minimumCountColumns テーブルオプションで制御できます。

• デフォルト: false

• 例： 基本的な列 と 多数の列

カラム表示検索

• 属性： data-show-columns-search

• タイプ: 真偽値

• 詳細

  true に設定すると、列のフィルタ検索が表示されます。

• デフォルト: false

• 例： 列の検索

カラム表示トグル（すべて）

• 属性： data-show-columns-toggle-all

• タイプ: 真偽値

• 詳細

  true に設定すると、列オプション/ドロップダウン内にすべてを切り替えるチェックボックスが表示されます。

• デフォルト: false

• 例： 列の全切り替え

拡張ページネーションの表示

• 属性： data-show-extended-pagination

• タイプ: 真偽値

• 詳細

  true に設定すると、拡張バージョンのページネーション（フィルタされていないすべての行のカウントを含む）が表示されます。サーバー側でページネーションを使用する場合は、totalNotFilteredField を使用してカウントを定義してください。

• デフォルト: false

• 例： 拡張ページネーションの表示

フッターの表示

• 属性： data-show-footer

• タイプ: 真偽値

• 詳細

  true に設定すると、集計フッター行が表示されます。

• デフォルト: false

• 例： フッターの表示

全画面表示の表示

• 属性： data-show-fullscreen

• タイプ: 真偽値

• 詳細

  true に設定すると、全画面表示ボタンが表示されます。

• デフォルト: false

• 例： 全画面表示

ヘッダーの表示

• 属性： data-show-header

• タイプ: 真偽値

• 詳細

  false に設定すると、テーブルヘッダーが非表示になります。

• デフォルト: true

• 例： ヘッダーの表示

ページネーション切り替えの表示

• 属性： data-show-pagination-switch

• タイプ: 真偽値

• 詳細

  true に設定すると、ページネーション切り替えボタンが表示されます。

• デフォルト: false

• 例： ページネーション切り替えの表示

更新の表示

• 属性： data-show-refresh

• タイプ: 真偽値

• 詳細

  true に設定すると、更新ボタンが表示されます。

• デフォルト: false

• 例： 更新の表示

検索ボタンの表示

• 属性： data-show-search-button

• タイプ: 真偽値

• 詳細

  true に設定すると、検索入力の後ろに検索ボタンが表示されます。検索は、ボタンが押された場合にのみ実行されます（例：トラフィックまたは読み込み時間を防ぐため）。

• デフォルト: false

• 例： 検索ボタンの表示

検索クリアボタンの表示

• 属性： data-show-search-clear-button

• タイプ: 真偽値

• 詳細

  true に設定すると、検索入力の後ろにクリアボタンが表示され、検索入力がクリアされます（フィルターコントロールが有効になっている場合は、すべてのフィルターもクリアされます）。

• デフォルト: false

• 例： 検索クリアボタンの表示

トグルの表示

• 属性： data-show-toggle

• タイプ: 真偽値

• 詳細

  true に設定すると、テーブル/カードビューを切り替えるための切り替えボタンが表示されます。

• デフォルト: false

• 例： 切り替えの表示

ページネーションのサイド

• 属性： data-side-pagination

• タイプ: 文字列

• 詳細

  テーブルのサイドページネーションを定義します。 'client' または 'server' のみが使用できます。 'server' 側を使用するには、'url' または 'ajax' オプションを設定する必要があります。

  必要なサーバーレスポンス形式は、'sidePagination' オプションが 'client' または 'server' に設定されているかどうかにより異なります。次の例を参照してください

  • サーバーサイドページネーションなし
  • サーバーサイドページネーションあり

  URLパラメータ

  sidePagination が server に設定されている場合、bootstrap table は次の URL パラメータを使用して url を呼び出します

  • offset は 0 から total - 1 の値で、含める最初のレコードを示します。
  • limit は、1 ページあたりの行数を示す値です。

  サーバーサイドページネーションを実装する場合、この例のような形式で JSON ビューを実装する必要があります。そのビューは、上記で示した URL パラメータ値を取得し、offset インデックスから始まるレコードを返し、limit で示されたレコード数を返します。たとえば、レコード 11〜20 を取得する場合、ビューは URL 文字列から offset=10 および limit=10 を取得し、この例のようにレコードを返す必要があります。

• デフォルト： 'client'

• 例： クライアントサイドページネーション と サーバーサイドページネーション

サイレントソート

• 属性： data-silent-sort

• タイプ: 真偽値

• 詳細

  false に設定すると、読み込みメッセージ付きでデータをソートします。このオプションは、sidePagination オプションが 'server' に設定されている場合に機能します。

• デフォルト: true

• 例： サイレントソート

単一選択

• 属性： data-single-select

• タイプ: 真偽値

• 詳細

  true に設定すると、チェックボックスで1行のみを選択できます。

• デフォルト: false

• 例： 単一選択

スマート表示

• 属性： data-smart-display

• タイプ: 真偽値

• 詳細

  true に設定すると、ページネーションまたはカードビューがスマートに表示されます。

• デフォルト: true

• 例： スマート表示

ソート可能

• 属性： data-sortable

• タイプ: 真偽値

• 詳細

  false に設定すると、すべての列のソートが無効になります。

• デフォルト: true

• 例： テーブルソート

ソートクラス

• 属性： data-sort-class

• タイプ: 文字列

• 詳細

  ソートされた td 要素のクラス名です。

• デフォルト: 未定義

• 例： ソートクラス

空値を最後にソート

• 属性： data-sort-empty-last

• タイプ: 真偽値

• 詳細

  true に設定すると、<空文字列>、undefined、および null が最後の値としてソートされます。

• デフォルト: false

• 例： 空を最後にソート

ソート名

• 属性： data-sort-name

• タイプ: 文字列

• 詳細

  どの列をソートするかを定義します。

• デフォルト: 未定義

• 例： ソート名順

ソート順

• 属性： data-sort-order

• タイプ: 文字列

• 詳細

  列のソート順を定義します。 undefined、'asc'、または 'desc' のみが使用できます。

• デフォルト: 未定義

• 例： ソート名順

ソートリセット

• 属性： data-sort-reset

• タイプ: 真偽値

• 詳細

  true に設定すると、3回目のクリックでソートがリセットされます。

• デフォルト: false

• 例： ソートリセット

ソートとページリセット

• 属性： data-sort-reset-page

• タイプ: 真偽値

• 詳細

  true に設定すると、ソート時にページ番号がリセットされます。

• デフォルト: false

• 例： ソート時ページリセット

安定ソート

• 属性： data-sort-stable

• タイプ: 真偽値

• 詳細

  true に設定すると、安定したソートが得られます。行に '_position' プロパティを追加します。

• デフォルト: false

• 例： 安定ソート

厳密検索

• 属性： data-strict-search

• タイプ: 真偽値

• 詳細

  厳密な検索を有効にします。比較チェックを無効にします。

• デフォルト: false

• 例： 厳密検索

theadクラス

• 属性： data-thead-classes

• タイプ: 文字列

• 詳細

  テーブルtheadのクラス名です。 Bootstrap v4では、.thead-light または .thead-dark 修飾子クラスを使用して、thead を明るい灰色または暗い灰色にします。

• デフォルト: ''

• 例： thead クラス

ツールバー

• 属性： data-toolbar

• タイプ: 文字列/ノード

• 詳細

  ツールバーを示す jQuery セレクタ。例：#toolbar、.toolbar、または DOM ノード。

• デフォルト: 未定義

• 例： カスタムツールバー

ツールバーの配置

• 属性： data-toolbar-align

• タイプ: 文字列

• 詳細

  カスタムツールバーの配置方法を指定します。 'left'、'right' を使用できます。

• デフォルト： 'left'

• 例： ツールバーの配置

合計フィールド

• 属性： data-total-field

• タイプ: 文字列

• 詳細

  'total' データを含む受信 JSON のキー。

• デフォルト： 'total'

• 例： 合計/データフィールド

フィルターされていない合計

• 属性： data-total-not-filtered

• タイプ： Number

• 詳細

  このプロパティは、主にページネーションサーバーから渡され、使いやすくなっています。

• デフォルト： 0

フィルターされていない合計フィールド

• 属性： data-total-not-filtered-field

• タイプ： string

• 詳細

  JSON レスポンスからのフィールドは、showExtendedPagination に使用されます。

• デフォルト： totalNotFiltered

• 例： フィルタされていない合計フィールド

総行数

• 属性： data-total-rows

• タイプ： Number

• 詳細

  このプロパティは、主にページネーションサーバーから渡され、使いやすくなっています。

• デフォルト： 0

検索時のトリミング

• 属性： data-trim-on-search

• タイプ: 真偽値

• 詳細

  true に設定すると、検索フィールドのスペースがトリムされます。

• デフォルト: true

• 例： 検索時にトリム

未定義テキスト

• 属性： data-undefined-text

• タイプ: 文字列

• 詳細

  デフォルトの undefined テキストを定義します。

• デフォルト： '-'

• 例： 未定義テキスト

ユニークID

• 属性： data-unique-id

• タイプ: 文字列

• 詳細

  各行の一意の識別子を指定します。一意のIDは、常にHTMLに対して安全である必要があります（例：英数字）。HTMLを壊す可能性のある文字（例："）を含めることはできません。

• デフォルト: 未定義

• 例： getRowByUniqueId

URL

• 属性： data-url

• タイプ: 文字列

• 詳細

  リモートサイトからデータをリクエストする URL です。

  必要なサーバーレスポンス形式は、'sidePagination' オプションが指定されているかどうかによって異なります。次の例を参照してください

  • サーバーサイドページネーションなし
  • サーバーサイドページネーションあり

  URLパラメータ

  sidePagination が server に設定されている場合、bootstrap table は次の URL パラメータを使用して url を呼び出します

  • offset は 0 から total - 1 の値で、含める最初のレコードを示します。
  • limit は、1 ページあたりの行数を示す値です。

  サーバーサイドページネーションを実装する場合、この例のような形式で JSON ビューを実装する必要があります。そのビューは、上記で示した URL パラメータ値を取得し、offset インデックスから始まるレコードを返し、limit で示されたレコード数を返します。たとえば、レコード 11〜20 を取得する場合、ビューは URL 文字列から offset=10 および limit=10 を取得し、この例のようにレコードを返す必要があります。

• デフォルト: 未定義

• 例： URLから

• エラー処理

  読み込みエラーを取得するには、onLoadError を使用してください

仮想スクロール

• 属性： data-virtual-scroll

• タイプ: 真偽値

• 詳細

  true に設定すると、仮想スクロールが有効になり、仮想の「無限」リストが表示されます。

• デフォルト: false

• 例： 大量データ

仮想スクロールアイテムの高さ

• 属性： data-virtual-scroll-item-height

• タイプ： Number

• 詳細

  このオプションが定義されていない場合、デフォルトで最初の項目の高さが使用されます。

  仮想項目の高さがデフォルトの高さよりも大幅に大きい場合は、これを提供することが重要です。このディメンションは、初期化時にいくつのセルを作成するかを決定し、スクロール可能領域の高さを計算するのに役立ちます。この高さの値には、px 単位のみを使用できます。

• デフォルト: 未定義

可視検索

• 属性： data-visible-search

• タイプ: 真偽値

• 詳細

  表示されているカラム/データのみを検索対象とする場合は、true を設定します。データに表示されていない値が含まれている場合、それらの値は検索時に無視されます。

• デフォルト: false

• 例： 表示されているデータの検索