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,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