92 lines
3.2 KiB
PHP
92 lines
3.2 KiB
PHP
@php
|
|
$dtColumns = collect($columns)->map(function ($c) {
|
|
return [
|
|
'data' => $c['key'],
|
|
'name' => $c['key'],
|
|
'orderable' => $c['orderable'] ?? true,
|
|
'searchable' => $c['searchable'] ?? true,
|
|
];
|
|
})->values();
|
|
@endphp
|
|
<table id="{{ $id }}" class="table table-hover table-bordered w-100 align-middle my-3">
|
|
<thead>
|
|
<tr>
|
|
@foreach($columns as $col)
|
|
<th>{{ $col['label'] }}</th>
|
|
@endforeach
|
|
</tr>
|
|
<tr>
|
|
@foreach($columns as $col)
|
|
<th>
|
|
@if(($col['searchable'] ?? true))
|
|
<input type="text" class="form-control form-control-sm column-search" placeholder="Search {{ $col['label'] }}"
|
|
data-column="{{ $loop->index }}">
|
|
@endif
|
|
</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
@push('custom-scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
$.fn.DataTable.ext.pager.numbers_length = 7;
|
|
|
|
var table = $('#{{ $id }}').DataTable({
|
|
processing: true,
|
|
serverSide: true,
|
|
ajax: '{{ $ajax }}',
|
|
columns: @json($dtColumns),
|
|
orderCellsTop: true, // Important for the second header row
|
|
fixedHeader: true,
|
|
pagingType: 'full_numbers',
|
|
language: {
|
|
searchPlaceholder: "Search records",
|
|
search: "",
|
|
lengthMenu: "_MENU_",
|
|
},
|
|
dom: "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
|
|
"<'row mt-3 align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
|
|
initComplete: function () {
|
|
// Initialize select2 for length menu
|
|
$('.dataTables_length select').select2({
|
|
minimumResultsForSearch: Infinity,
|
|
width: '60px'
|
|
});
|
|
|
|
// Apply the search
|
|
this.api().columns().every(function () {
|
|
var that = this;
|
|
$('input', this.header()).on('keyup change clear', function () {
|
|
if (that.search() !== this.value) {
|
|
that
|
|
.search(this.value)
|
|
.draw();
|
|
}
|
|
});
|
|
});
|
|
},
|
|
drawCallback: function() {
|
|
if ($('.dataTables_length select').data('select2')) {
|
|
$('.dataTables_length select').select2('destroy');
|
|
}
|
|
$('.dataTables_length select').select2({
|
|
minimumResultsForSearch: Infinity,
|
|
width: '60px'
|
|
});
|
|
}
|
|
});
|
|
|
|
// Prevent sorting when clicking on the input
|
|
$('#{{ $id }} thead tr:eq(1) th').on('click', function (e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
// Custom search logic for the individual inputs
|
|
$('#{{ $id }} .column-search').on('keyup change', function () {
|
|
var columnIndex = $(this).data('column');
|
|
table.column(columnIndex).search(this.value).draw();
|
|
});
|
|
});
|
|
</script>
|
|
@endpush |