【Bootstrap-Table js】javascript/ajax/HTML各テーブル表示方法詳細!

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は全部下記イメージになります。

〈イメージ〉

Bootstrap-Table

 

 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表示方法

  1. javascript内にテーブルヘッダーとデータを記載
  2. 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. length2

 

1もしくは2のパターンでajaxで動的にテーブル表示可能

  1. HTML①・javascript・web.php・SampleController
  2. 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);
}

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です