Bootstrapテーブルライブラリの基本設定

Bootstrapテーブルを利用するには、まず必要なライブラリを読み込む必要があります。jQueryはBootstrapテーブルの依存関係にあるため、必ず先に読み込んでください。

<script src="assets/jquery/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />

Bootstrapテーブルの導入

次に、Bootstrapテーブル専用のファイルを読み込みます。

<script src="assets/bootstrap-table/bootstrap-table.min.js"></script>
<link href="assets/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />

日本語化設定

テーブルを日本語で表示するためには、日本語化ファイルを読み込む必要があります。

<script src="assets/bootstrap-table/locale/bootstrap-table-ja-JP.min.js"></script>

データエクスポート機能

テーブルデータを様々な形式でエクスポートする機能を追加します。

<script src="assets/bootstrap-table/extensions/export/bootstrap-table-export.min.js"></script>

// テーブル初期化オプション
{
  exportEnabled: true,                                    // エクスポートボタンを表示
  exportScope: 'selected',                                // エクスポート範囲: 'all', 'selected', 'visible'
  exportFormats: ['json', 'xml', 'csv', 'txt', 'sql', 'xlsx']  // エクスポート形式
}

自動更新機能

テーブルデータを定期的に自動更新する機能を実装します。

<script src="assets/bootstrap-table/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>

// テーブル初期化オプション
{
  enableAutoRefresh: true,               // 自動更新プラグインを有効化
  autoRefreshActive: true,               // テーブル読み込み時に自動更新を開始
  refreshInterval: 60,                   // 自動更新の間隔（秒）
  silentRefresh: true                    // 更新時の通知を非表示
}

行コピー機能

選択した行のデータをクリップボードにコピーする機能を追加します。

<script src="assets/bootstrap-table/extensions/copy/bootstrap-table-copy.min.js"></script>

// テーブル初期化オプション
{
  showCopyButton: true,                  // コピーボタンを表示
  includeHiddenColumns: true,            // 非表示列もコピー対象に含める
  columnSeparator: ', ',                 // 列データの区切り文字
  rowSeparator: '\n'                     // 行データの区切り文字
}