Datatables new layout
This commit is contained in:
@@ -35,7 +35,9 @@ class ParentDataTable extends DataTable
|
||||
public function getHtmlButtons()
|
||||
{
|
||||
$buttons = '';
|
||||
|
||||
// $buttons .= '<button type="button" data-id="{{$id}}" class="btn btn-xs btn-secondary btn-show mr-2"><i class="fa fa-fw fa-eye"></i></button>';
|
||||
// $buttons .= '<button type="button" data-id="{{$id}}" class="btn btn-xs btn-primary btn-edit mr-2"><i class="fa fa-fw fa-leaf-alt"></i></button>';
|
||||
$buttons .= '<button type="button" data-id="{{$id}}" class="btn btn-xs btn-primary btn-edit mr-2"><i class="fa fa-fw fa-pencil-alt"></i></button>';
|
||||
$buttons .= '<button type="button" data-id="{{$id}}" class="btn btn-xs btn-danger btn-del"><i class="fa fa-fw fa-trash"></i></button>';
|
||||
return $buttons;
|
||||
@@ -47,7 +49,7 @@ class ParentDataTable extends DataTable
|
||||
->exportable(false)
|
||||
->printable(false)
|
||||
->searchable(false)
|
||||
->width(80)
|
||||
->width(120)
|
||||
->addClass('text-center');
|
||||
}
|
||||
|
||||
@@ -87,32 +89,50 @@ class ParentDataTable extends DataTable
|
||||
->minifiedAjax()
|
||||
->dom($this->getDom())
|
||||
->orderBy(0,'asc')
|
||||
->buttons($this->getDatatablesButtons());
|
||||
->buttons(
|
||||
Button::make('export'),
|
||||
Button::make('print')
|
||||
);
|
||||
}
|
||||
|
||||
public function getParameters()
|
||||
{
|
||||
return [];
|
||||
}
|
||||
|
||||
public function getDatatablesButtons()
|
||||
{
|
||||
$buttons = [];
|
||||
$buttons[] = Button::make('export');
|
||||
$buttons[] = Button::make('print');
|
||||
return $buttons;
|
||||
return [
|
||||
'pageLength' => 10
|
||||
];
|
||||
}
|
||||
|
||||
public function getDom()
|
||||
{
|
||||
$dom = $this->getDatatablesHeaderDefault();
|
||||
$dom .= "rt";
|
||||
$dom = '';
|
||||
// $dom .= $this->getDatatablesHeaderDefault();
|
||||
$dom .= "tr";
|
||||
$dom .= $this->getDatatablesFooterDefault();
|
||||
return $dom;
|
||||
}
|
||||
|
||||
public function getDatatablesHeader() {
|
||||
return view('components.datatables.header');
|
||||
}
|
||||
|
||||
public function getDatatablesHeaderDefault() {
|
||||
return "<'row dt-toolbar-header'<'col-lg-4'l><'col-lg-4'B><'col-lg-4 text-right add'f>>";
|
||||
// return "<div class'row'><div class='col'></div></div>";
|
||||
/*
|
||||
|
||||
$dom = 't<"row datatable-pager light"<"col-md-12"'
|
||||
. '<"datatable-more-export-buttons filter-buttons pull-left">'
|
||||
. '<"datatable-more-export-favorites-buttons filter-buttons pull-left">'
|
||||
. '<"datatable-more-export-basket-buttons filter-buttons pull-left">'
|
||||
. '<"datatable-download-buttons filter-buttons pull-left">'
|
||||
. '>>'
|
||||
. '<"dt-toolbar-footer"<"col"i><"col pull-right datatable-pager light nopadding-right"p>>';
|
||||
|
||||
*/
|
||||
|
||||
$dom = "<'row dt-toolbar-header'<'col-lg-4'l><'col-lg-4'B><'col-lg-4 text-right add'f>>";
|
||||
return $dom;
|
||||
// return 't<"row datatable-pager light"<"col-md-12"<"datatable-more-export-buttons filter-buttons pull-left"><"datatable-more-export-favorites-buttons filter-buttons pull-left"><"datatable-more-export-basket-buttons filter-buttons pull-left"><"datatable-download-buttons filter-buttons pull-left">>><"dt-toolbar-footer"<"col-md-6"i><"col-md-6 pull-right datatable-pager light nopadding-right"p>>';
|
||||
|
||||
}
|
||||
|
||||
public function getDatatablesFooterDefault() {
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
])
|
||||
|
||||
@section('content')
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeFamilies.create'), 'label' => __('Shop.article_attribute_families.add')])
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeFamilies.index'), 'model' => 'ArticleAttributefamilies'])
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@include('components.js.datatable', ['route' => '/Shop/Admin/ArticleAttributeFamilies', 'model' => 'ArticleAttributefamilies'])
|
||||
@include('components.js.datatable', ['route' => route('Shop.Admin.ArticleAttributeFamilies.index'), 'model' => 'ArticleAttributefamilies'])
|
||||
@endpush
|
||||
@@ -5,9 +5,9 @@
|
||||
])
|
||||
|
||||
@section('content')
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeValues.create'), 'label' => __('Shop.article_attribute_values.add')])
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.ArticleAttributeValues.index'), 'model' => 'articleattributes'])
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@include('components.js.datatable', ['route' => '/Shop/Admin/ArticleAttributeValues', 'model' => 'articleattributes'])
|
||||
@include('components.js.datatable', ['route' => route('Shop.Admin.ArticleAttributeValues.index'), 'model' => 'articleattributes'])
|
||||
@endpush
|
||||
@@ -5,9 +5,9 @@
|
||||
])
|
||||
|
||||
@section('content')
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.ArticleFamilies.create'), 'label' => __('Shop.article_families.add')])
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.ArticleFamilies.index'), 'model' => 'articlefamilies'])
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@include('components.js.datatable', ['route' => '/Shop/Admin/ArticleFamilies', 'model' => 'articlefamilies'])
|
||||
@include('components.js.datatable', ['route' => route('Shop.Admin.ArticleFamilies.index'), 'model' => 'articlefamilies'])
|
||||
@endpush
|
||||
@@ -5,9 +5,9 @@
|
||||
])
|
||||
|
||||
@section('content')
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.Articles.create'), 'label' => __('Shop.articles.add')])
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.Articles.index'), 'model' => 'articles'])
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@include('components.js.datatable', ['route' => '/Shop/Admin/Articles', 'model' => 'articles'])
|
||||
@include('components.js.datatable', ['route' => route('Shop.Admin.Articles.index'), 'model' => 'articles'])
|
||||
@endpush
|
||||
@@ -6,15 +6,11 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
<div class="row pb-3">
|
||||
<div class="col text-right">
|
||||
<a href="{{ route('Shop.Admin.Categories.create') }}" class="btn btn-sm btn-success">{{ __('Shop.categories.add') }} <i class="fa fa-plus"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
{{$dataTable->table()}}
|
||||
@component('components.card')
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.Categories.index'), 'model' => 'categories'])
|
||||
@endcomponent
|
||||
</div>
|
||||
<div class="col-4">
|
||||
@include('Shop.Admin.Categories.partials.tree')
|
||||
@@ -24,6 +20,6 @@
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@include('components.js.datatable', ['route' => '/Shop/Admin/Categories', 'model' => 'categories'])
|
||||
@include('components.js.datatable', ['route' => route('Shop.Admin.Categories.index'), 'model' => 'categories'])
|
||||
@endpush
|
||||
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
])
|
||||
|
||||
@section('content')
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.TagGroups.create'), 'label' => __('Shop.tag_groups.add')])
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.TagGroups.index'), 'model' => 'TagGroups'])
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@include('components.js.datatable', ['route' => '/Shop/Admin/TagGroups', 'model' => 'TagGroups'])
|
||||
@include('components.js.datatable', ['route' => route('Shop.Admin.TagGroups.index'), 'model' => 'TagGroups'])
|
||||
@endpush
|
||||
@@ -5,7 +5,7 @@
|
||||
])
|
||||
|
||||
@section('content')
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.Tags.create'), 'label' => __('Shop.tags.add')])
|
||||
@include('components.datatable', ['route' => route('Shop.Admin.Tags.index'), 'model' => 'tags'])
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -17,5 +17,5 @@
|
||||
} );
|
||||
</script>
|
||||
|
||||
@include('components.js.datatable', ['route' => '/Shop/Admin/Tags', 'model' => 'tags'])
|
||||
@include('components.js.datatable', ['route' => route('Shop.Admin.Tags.index'), 'model' => 'tags'])
|
||||
@endpush
|
||||
24
resources/views/components/card.blade.php
Normal file
24
resources/views/components/card.blade.php
Normal 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>
|
||||
@@ -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 id="{{ $model }}-datatable-content">
|
||||
@include('components.datatables.header')
|
||||
{{$dataTable->table(['class'=>'table table-bordered table-hover table-striped w-100'])}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@component('boilerplate::card')
|
||||
{{$dataTable->table()}}
|
||||
@endcomponent
|
||||
10
resources/views/components/datatables/buttons/add.blade.php
Normal file
10
resources/views/components/datatables/buttons/add.blade.php
Normal 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
|
||||
@@ -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>
|
||||
@@ -0,0 +1,4 @@
|
||||
<button type="button" class="btn bg-gradient-secondary btn-filter">
|
||||
<i class="fa fa-filter"></i>
|
||||
</button>
|
||||
|
||||
11
resources/views/components/datatables/header.blade.php
Normal file
11
resources/views/components/datatables/header.blade.php
Normal 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>
|
||||
19
resources/views/components/datatables/search.blade.php
Normal file
19
resources/views/components/datatables/search.blade.php
Normal 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
|
||||
Reference in New Issue
Block a user