【Laravel】プロジェクト：TEST6 マスタデータの表示 画面編
マスタデータの表示
マスタデータとして画面表示。
以下記事を参考に実装。
bonoponz.hatenablog.com
で、詳細は省くとして早速最終結果から。
（※factoryで作成したテストデータとなります。）
カスタマイズした点としては、DBからデータを取得して表示している点。
ソースとしては、以下を追加。
// マスタメンテナンス
Route::get('/employeeMst', [EmployeeController::class, 'employeeMst']);コントローラー追加。
public function employeeMst(Request $request)
{
$query = Employee::query();
$employees = $query
->selectRaw('*')
->paginate(config('app.pageNum'))
;
return view('maintenance.employeeMst')
-> with('employees', $employees)
;
}app.phpに上限持たせておく。
/* ORIGINAL
|--------------------------------------------------------------------------
| Pagination Num
|--------------------------------------------------------------------------
| ページングの件数。コントローラにて参照。
|
*/
'pageNum' => 10000,bladeは下の感じ。
@extends('welcome')
@section('content')
<!---------------------------->
<!----- content ----->
<!---------------------------->
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Content Row -->
<div class="row">
<!-- タイトル -->
<div class="col-xl-8 col-md-6 mb-4">
<h1 class="h3 mb-0 text-gray-800">社員マスタ</h1>
</div>
<!-- ダウンロード -->
<div class="col-xl-2 col-md-6 mb-4" align="right">
<a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
<i class="fas fa-download fa-sm text-white-50"></i>CSVダウンロード</a>
</div>
<!-- アップロード -->
<div class="col-xl-2 col-md-6 mb-4" align="right">
<a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
<i class="fas fa-upload fa-sm text-white-50"></i>CSVアップロード</a>
</div>
</div>
</div>
<!-- Content Wrapper -->
<table id="example" class="table">
<thead>
<tr>
<th scope="col" class="centeringColumn80">社員番号</th>
<th scope="col" class="centeringColumn150">氏名</th>
<th scope="col" class="centeringColumn150">氏名カナ</th>
<th scope="col" class="centeringColumn80">性別</th>
<th scope="col" class="centeringColumn150">電話番号</th>
<th scope="col">住所</th>
<th scope="col" class="centeringColumn80">入社日</th>
<th scope="col" class="centeringColumn80">編集</th>
</tr>
</thead>
<tbody>
@foreach($employees as $employee)
<tr>
<td >{{$employee->id}}</td>
<td>{{$employee->LAST_NAME}} {{$employee->FIRST_NAME}}</td>
<td>{{$employee->LAST_NAME_KANA}} {{$employee->FIRST_NAME_KANA}}</td>
<td>{{$employee->SEX}}</td>
<td>{{$employee->TEL}}</td>
<td>{{$employee->PREFECTURE}} {{$employee->WARD}} {{$employee->ADDRESS}}</td>
<td>{{$employee->HIRE_DT}}</td>
<td>
<a href="/" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">
<i class="fas fa-sm text-white-50"></i>編集
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<!---------------------------->
<!----- script ----->
<!---------------------------->
<script>
$(document).ready(function() {
$('#example').DataTable({
columns: [
{ data: "社員番号", render: $.fn.dataTable.render.text() },
{ data: "氏名", render: $.fn.dataTable.render.text() },
{ data: "氏名カナ", render: $.fn.dataTable.render.text() },
{ data: "性別", render: $.fn.dataTable.render.text() },
{ data: "電話番号", render: $.fn.dataTable.render.text() },
{ data: "住所", render: $.fn.dataTable.render.text() },
{ data: "入社日", render: $.fn.dataTable.render.text() },
{ data: "編集", },
],
lengthChange: true, // lengthChange（表示件数選択機能）
searching: true, // searching（検索機能）
order: [ [ 0, "asc" ] ], // order（ソート機能）
language: {
"decimal": ".",
"emptyTable": "表示するデータがありません。",
"thousands": ",",
"sProcessing": "処理中...",
"sLengthMenu": "_MENU_ 件表示",
"sZeroRecords": "データはありません。",
"sInfo": " _TOTAL_ 件中 _START_ から _END_ まで表示",
"sInfoEmpty": " 0 件中 0 から 0 まで表示",
"sInfoFiltered": "（全 _MAX_ 件より抽出）",
"sInfoPostFix": "",
"sSearch": "検索:",
"sUrl": "",
"oPaginate": {
"sFirst": "先頭",
"sPrevious": "前",
"sNext": "次",
"sLast": "最終"
}
},
columnDefs: [
{
targets: 'centeringColumn80', // どの列か指定
width: 80,
className : 'dt-body-center dt-head-center' // センタリングの指定
},
{
targets: 'centeringColumn150', // どの列か指定
width: 150,
className : 'dt-body-center dt-head-center' // センタリングの指定
},
],
});
});
</script>
@endsection
ToDo
（済：■、完了：●、対応中：★、保留：△）
- 【■】インストール手順
- 【■】プロジェクトの始め方
- 【■】テンプレートの取込方
- 【●】fullcalendar を使用してカレンダー画面を表示させる
- 【●】カレンダー画面を表示させる際、画面遷移させず右側（コンテナ）部分に表示
- 【■】（小ネタ）はてなブログでソースコードを表示させる
- 【△】データの表示
- 【△】データの編集
- 【△】データの登録
- 【★→■】マスタデータの表示
- マスタデータの編集
- マスタデータの登録
- Laravel画面遷移時のサイドメニュー（アコーディング）状態保持の方法
- ファイルアップロード
- ファイルダウンロード
- google Calendarとの同期
- ログイン画面
- 注文データ登録
- （小ネタ）visual studioのソースにスクロールバーが出ない
- ファイルを機能単位で分割する
