Datatables new layout

This commit is contained in:
Ludovic CANDELLIER
2020-06-29 00:15:19 +02:00
parent 3386f6ee1a
commit 0ad31dac19
15 changed files with 136 additions and 43 deletions

View File

@@ -0,0 +1,24 @@
<div class="card mb-0 {{ isset($tabs) ? ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'card-outline-tabs' : 'card-tabs' : ''}} {{ ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'card-outline' : '' }} card-{{ $color ?? config('boilerplate.theme.card.default_color', 'info') }}">
@if($title ?? $header ?? false)
<div class="card-header {{ isset($tabs) ? ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'p-0' : 'p-0 pt-1' : '' }} border-bottom-0">
@isset($header)
{{ $header }}
@else
<h3 class="card-title">{{ $title }}</h3>
@isset($tools)
<div class="card-tools">
{{ $tools }}
</div>
@endisset
@endisset
</div>
@endif
<div class="card-body {{ $title ?? false ? ($outline ?? config('boilerplate.theme.card.outline', false)) ? 'pt-0' : '' : '' }}">
{{ $slot }}
</div>
@isset($footer)
<div class="card-footer">
{{ $footer }}
</div>
@endif
</div>

View File

@@ -1,9 +1,4 @@
<div class="row pb-3">
<div class="col text-right">
<a href="{{ $route }}" class="btn btn-sm btn-primary">{{ $label }} <i class="fa fa-plus"></i></a>
</div>
</div>
@component('boilerplate::card')
{{$dataTable->table()}}
@endcomponent
<div id="{{ $model }}-datatable-content">
@include('components.datatables.header')
{{$dataTable->table(['class'=>'table table-bordered table-hover table-striped w-100'])}}
</div>

View File

@@ -0,0 +1,10 @@
<button type="button" class="btn bg-gradient-info btn-add"><i class="fa fa-plus-circle"></i></button>
@push('js')
<script>
$('#{{ $model }}-table-header .btn-add').click(function() {
url = '{{ $route }}' + '/create/';
window.location = url;
});
</script>
@endpush

View File

@@ -0,0 +1,14 @@
<div class="text-right datatable-export-buttons">
<button type="button" class="btn bg-gradient-secondary btn-print" data-placement="top" data-original-title="Imprimer le tableau">
<i class="fa fa-print"></i>
</button>
<button type="button" class="btn bg-gradient-secondary btn-excel">
<i class="fa fa-file-excel"></i>
</button>
<button type="button" class="btn bg-gradient-secondary btn-pdf">
<i class="fa fa-file-pdf"></i>
</button>
</div>

View File

@@ -0,0 +1,4 @@
<button type="button" class="btn bg-gradient-secondary btn-filter">
<i class="fa fa-filter"></i>
</button>

View File

@@ -0,0 +1,11 @@
<div class="row table-header" id="{{ $model }}-table-header">
<div class="col-lg-6 col-md-10 col-sm-8 mb-2">
@include('components.datatables.search')
</div>
<div class="col-lg-4 col-md-6 col-sm-6">
@include('components.datatables.buttons.exports')
</div>
<div class="col-lg-2 col-md-2 col-sm-4 text-right">
@include('components.datatables.buttons.add')
</div>
</div>

View File

@@ -0,0 +1,19 @@
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
<input type="text" class="form-control search-btn" placeholder="Rechercher..." value="">
<div class="input-group-append">
@include('components.datatables.buttons.filters')
</div>
</div>
@push('js')
<script>
var $search = $('#{{ $model }}-table-header .search-btn');
$search.on( 'keyup click', function () {
var table = window.LaravelDataTables["{{ $model }}-table"];
table.search($search.val()).draw();
} );
</script>
@endpush