Bootstrap-Tableでテーブルを作成したので備忘録を残します♪皆様のお役にたてると嬉しいです(*´∀｀*)
目次
環境
- bootstrap4
- php7.3.9
- laravel5.7
bootstrap-table導入方法
各stylesheetやscriptを読み込む
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, Bootstrap Table!</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css"> </head> <body> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script> </body> </html>
表示方法種類
- HTML
- javascript
- ajax(JSON)
記載しているHTMLとjavascriptは全部下記イメージになります。
〈イメージ〉
HTMLでBootstrap-Table表示方法
〈HTML〉
<table data-toggle="table"> <thead> <tr> <th>ID</th> <th>商品名</th> <th>価格</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>りんご</td> <td>100</td> </tr> <tr> <td>1</td> <td>みかん</td> <td>150</td> </tr> </tbody> </table>
javascriptでBootstrap-Table表示方法
- javascript内にテーブルヘッダーとデータを記載
- HTML内にテーブルヘッダーを記載、データのみjavascript内で記載
1. javascript内にテーブルヘッダーとデータを記載
〈HTML〉
<table id="table"></table>
〈javascript〉
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '商品名'
}, {
field: 'price',
title: '価格'
}],
data: [{
id: 1,
name: 'りんご',
price: '100'
}, {
id: 2,
name: 'みかん',
price: '150'
}]
})
2. HTML内にテーブルヘッダーを記載、データのみjavascript内で記載
javascriptは①もしくは②
〈HTML〉
<table id="table"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">商品名</th> <th data-field="price">価格</th> </tr> </thead> </table>
〈javascript①〉
$('#table').bootstrapTable({
data: [{
id: 1,
name: 'りんご',
price: '100'
}, {
id: 2,
name: 'みかん',
price: '150'
}]
})
〈javascript②〉
var data = [{
id: 1,
name: 'りんご',
price: '100'
}, {
id: 2,
name: 'みかん',
price: '150'
}]
$(function() {
$table.bootstrapTable({ data: data });
});
ajaxでBootstrap-Tableを動的表示方法
Bootstrap-Tableの公式ドキュメントに数種類のデータ表示方法が載っていてremoteURLからもテーブルを作成できると記載してあるのですが、わたくし初心者はナニソレ状態。。
We can also use remote URL data by setting data-url="data1.json" on a normal table.
今回はlaravelで作成していたのでlaravelでajaxを利用してうまく行った例を紹介します。
テーブルに表示成功するには、コンソールでこの形にできればよいので、Controller側でこの形でreturnするよう合わせにいきました。
[{…}, {…}]
詳細表示▼
1もしくは2のパターンでajaxで動的にテーブル表示可能
- HTML①・javascript・web.php・SampleController
- HTML②・web.php・SampleController
〈HTML①〉
<table id="table"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">商品名</th> <th data-field="name">価格</th> </tr> </thead> </table>
〈javascript〉
$(function() {
$.ajax({
type: 'GET',
dataType: "json",
url: '/ajax/get_data',
}).done(function (data) {
$('#table').bootstrapTable({data: data})
})
})
〈HTML②〉
<table id="table" data-toggle="table" data-url="/ajax/get_data"> <thead> <tr> <th data-field="id">ID</th> <th data-field="created_at">商品名</th> <th data-field="name">価格</th> </tr> </thead> </table>
〈web.php〉
/** ajax処理 */
Route::get('ajax/get_data', 'SampleController@getData')->name('get_data');
〈SampleController〉
public function getData() {
$json_data = Data::all();
return response()->json($json_data);
}
