Laravel 10.x karkasas. Duomenų lentelės (DataTables)
DataTables yra jQuery biblioteka, naudojama duomenų puslapiavimui, rūšiavimui ir paieškai. Jos minusas - netinka dideliam duomenų kiekiui.
DataTables biblioteka gali naudoti keletą skirtingų stilių. Visą palaikomų stilių sąrašą galite rasti DataTables bibliotekos dokumentacijoje.
Kadangi mūsų kuriama sistema naudoja Bootstrap 5 dizainą, tai tokį patį naudosim ir DataTables bibliotekai. Todėl
Daugiau apie duomenų lenteles skaitykite oficialioje DataTables dokumentacijoje.
DataTables biblioteka gali naudoti keletą skirtingų stilių. Visą palaikomų stilių sąrašą galite rasti DataTables bibliotekos dokumentacijoje.
Kadangi mūsų kuriama sistema naudoja Bootstrap 5 dizainą, tai tokį patį naudosim ir DataTables bibliotekai. Todėl
admin.blade.php faile turime atitinkamai pajungti CSS ir JS failus:
<head>
...
<link href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.min.css" rel="stylesheet">
</head><body> dalyje taip pat sukurkime papildomą lauką extra-script:
<body>
...
<script src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.0/js/dataTables.bootstrap5.min.js"></script>
@yield('extra-script')
</body>..\library\app\Http\Controllers\Admin\CountriesController.php ir įterpkite naują metodą:
public function dt()
{
$countries = Country::all();
return view('admin.countries.dt', compact('countries'));
}..\library\routes\web.php ir įterpkite naują maršrutą:
Route::group(['middleware' => ['role:admin|librarian']], function () {
...
Route::get('admin/countries-dt', [App\Http\Controllers\Admin\CountriesController::class, 'dt']);
});..\library\resources\views\admin\countries\ sukurkite naują failą dt.blade.php, kurio programinis kodas:
@extends('layouts.admin')
@section('title', 'Countries')
@section('content')
<div class="card">
<div class="card-header">
<a href="{{ url('admin/countries/create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> Add country</a>
</div>
<div class="card-body">
@if(Session::has('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
{{ Session::get('success') }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
@php
Session::forget('success');
@endphp
</div>
@endif
<div class="table-responsive">
<table id="countries" class="table table-bordered table-striped" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Alpha-2 code</th>
<th>Latitude</th>
<th>Longitude</th>
<th>Country</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach($countries as $country)
<tr>
<td>{{ $country->id }}</td>
<td>{{ $country->country }}</td>
<td>{{ $country->latitude }}</td>
<td>{{ $country->longitude }}</td>
<td>{{ $country->name }}</td>
<td>
<a href="{{ url('admin/countries/'.$country->id.'/edit') }}" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i> Edit</a>
<a href="{{ url('admin/countries/'.$country->id) }}" class="btn btn-success btn-sm"><i class="fas fa-eye"></i> View</a>
{!! Form::open(['method'=>'DELETE', 'url' => ['admin/countries', $country->id], 'style' => 'display:inline']) !!}
{!! Form::button('<i class="fas fa-trash-alt"></i> Delete', ['class' => 'btn btn-danger btn-sm', 'type' => 'submit']) !!}
{!! Form::close() !!}
</td>
</tr>
@endforeach
</tbody>
</table>
@section('extra-script')
{{Html::script('js/countries.js')}}
@endsection
</div>
</div>
</div>
@endsection
..\library\public\js sukurkite failą countries.js, kuriame įrašykite šį kodą:
$(document).ready(function() {
$('#countries').DataTable({
lengthMenu: [[10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "All"]], // galimybė naudotojui pasirinkti po kiek įrašų rodyti
pageLength: 25, // pagal nutylėjimą po kiek įrašų rodyti viename puslapyje
order: [[1, 'asc']], // pagal nutylėjimą rūšiuoti pirmą stulpelį didėjimo tvarka
columns: [ // šitas parametras nurodomas, nes norim, kad Actions stulpelis neturėtų rūšiavimo ir paieškos galimybių
{data: 'id'},
{data: 'alpha-2_code'},
{data: 'latitude'},
{data: 'longitude'},
{data: 'country'},
{data: 'actions', orderable: false, searchable: false},
],
});
});
DataTable() funkcijai galima nurodyti įvairius parametrus, bet jie nėra būtini. Visą parametrų sąrašą galima rasti DataTables bibliotekos dokumentacijoje.Daugiau apie duomenų lenteles skaitykite oficialioje DataTables dokumentacijoje.