233 lines
9.2 KiB
PHP
233 lines
9.2 KiB
PHP
@extends('layouts.vertical', ["page_title"=> "Datatables"])
|
|
|
|
@section('css')
|
|
<!-- third party css -->
|
|
<link href="{{asset('assets/libs/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<link href="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<!-- third party css end -->
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
<div class="row">
|
|
<div class="col-md-6 p-2">
|
|
<h4 class="page-title">{{$title}} Management</h4>
|
|
</div>
|
|
<div class="col-md-6 p-2">
|
|
@if(isset($audit_months) && is_array($audit_months))
|
|
<div class="float-end me-2 d-flex align-items-center">
|
|
<select id="login-audit-month" class="form-select form-select-sm me-2" style="width: auto; min-width: 150px;">
|
|
@foreach($audit_months as $monthOption)
|
|
<option value="{{ $monthOption }}">{{ $monthOption }}</option>
|
|
@endforeach
|
|
</select>
|
|
<button type="button" id="btn-login-audit-report" class="btn btn-primary btn-sm waves-effect waves-light">Login Audit Report</button>
|
|
</div>
|
|
@endif
|
|
@if(isset($buttons))
|
|
@foreach($buttons as $button)
|
|
<a href="{{$button['link']}}" class="btn btn-{{$button['title']=='Add New'?'success':'dark'}} waves-effect waves-light float-end me-2" id="btn-{{strtolower(str_replace(' ', '-', $button['title']))}}">{{$button['title']}}</a>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
</div>
|
|
<!-- end page title -->
|
|
@if(session()->has('message'))
|
|
<div class="alert alert-success">
|
|
{{ session()->get('message') }}
|
|
</div>
|
|
@endif
|
|
@if(session()->has('error'))
|
|
<div class="alert alert-danger">
|
|
{{ session()->get('error') }}
|
|
</div>
|
|
@endif
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<table id="list-page-datatable" class="table w-100 nowrap">
|
|
<thead>
|
|
<tr>
|
|
@foreach($fields as $field => $props)
|
|
<th>{{$props['title']}}</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
<!-- <tfoot>
|
|
<tr>
|
|
@foreach($fields as $field => $props)
|
|
<th>
|
|
@if($field != 'actions')
|
|
<input type="text" placeholder="Search" class="form-control" />
|
|
@endif
|
|
</th>
|
|
@endforeach
|
|
</tr>
|
|
</tfoot> -->
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</div> <!-- end card body-->
|
|
</div> <!-- end card -->
|
|
</div><!-- end col-->
|
|
</div>
|
|
<!-- end row-->
|
|
</div> <!-- container -->
|
|
|
|
<!-- Right modal content -->
|
|
<div id="date_filter_modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header border-0">
|
|
<h4 class="modal-title" id="standard-modalLabel">Filter results by date</h4>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<form method="get" id="form-date-filter">
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">From Date</label>
|
|
<input type="text" name="startdate" class="form-control" data-provide="datepicker" value="{{isset($startdate)?date("m/d/Y", strtotime($startdate)):''}}" data-date-autoclose="true">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<div class="mb-3">
|
|
<label class="form-label">To Date</label>
|
|
<input type="text" name="enddate" class="form-control" data-provide="datepicker" value="{{isset($enddate)?date("m/d/Y", strtotime($enddate)):''}}" data-date-autoclose="true">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-success btn-sm">Filter</button>
|
|
<button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
|
|
</form>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
|
|
<style type="text/css">
|
|
.img-thumbnail { max-width: 100px }
|
|
thead {display: table-header-group;}
|
|
tfoot {display: table-header-group;}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<!-- third party js -->
|
|
<script src="{{asset('assets/libs/datatables/datatables.min.js')}}"></script>
|
|
<script src="{{asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function($){
|
|
var table = $('#list-page-datatable').DataTable({
|
|
//"stateSave": true,
|
|
"scrollX": true,
|
|
"language": {
|
|
"paginate": {
|
|
"previous": "<i class='mdi mdi-chevron-left'>",
|
|
"next": "<i class='mdi mdi-chevron-right'>"
|
|
}
|
|
},
|
|
"drawCallback": function () {
|
|
$('.dataTables_paginate > .pagination').addClass('pagination-rounded');
|
|
},
|
|
|
|
fixedHeader: true,
|
|
"pageLength": 50,
|
|
"lengthMenu": [[50, 100, 250, 500], [50, 100, 250, 500]],
|
|
'processing': true,
|
|
'serverSide': true,
|
|
'serverMethod': 'get',
|
|
searchDelay: 2000,
|
|
"order": [[ 1, "asc" ]],
|
|
'searching': true,
|
|
'info': true,
|
|
|
|
"ajax": {
|
|
url: '{{$base_url}}/ajaxlist',
|
|
data:{
|
|
//'listfilters': listfilters
|
|
},
|
|
dataSrc: 'data'
|
|
},
|
|
columns: [
|
|
@foreach($fields as $field => $props)
|
|
@if($field == 'actions')
|
|
{
|
|
data: null,
|
|
render: function ( data, type, row ) {
|
|
return data.actions.map(l => '<a href="{{$base_url}}'+l.link+'" class="action-icon"> <i class="mdi mdi-'+l.icon+'"></i></a>').join('')
|
|
}
|
|
},
|
|
@else
|
|
{ "data": "{{$field}}" },
|
|
@endif
|
|
@endforeach
|
|
],
|
|
"initComplete": function(settings, json) {
|
|
var api = this.api();
|
|
var textBox = $('.dataTables_filter label input');
|
|
textBox.unbind();
|
|
textBox.bind('keyup input', function(e) {
|
|
if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
|
|
// do nothing ¯\_(ツ)_/¯
|
|
} else if(e.keyCode == 13 || !textBox.val()) {
|
|
api.search(this.value).draw();
|
|
}
|
|
});
|
|
|
|
$searchButton = $('<button class="btn btn-success btn-xs p-1 m-2">')
|
|
.text('Search')
|
|
.click(function() {
|
|
api.search(textBox.val()).draw();
|
|
}),
|
|
$clearButton = $('<button class="btn btn-warning btn-xs p-1">')
|
|
.text('Clear')
|
|
.click(function() {
|
|
textBox.val('');
|
|
$searchButton.click();
|
|
})
|
|
$('.dataTables_filter').append($searchButton, $clearButton);
|
|
|
|
|
|
}
|
|
});
|
|
|
|
// table.columns().every( function (index) {
|
|
// var that = this;
|
|
// $( 'input', this.footer() ).on( 'keyup change clear', function () {
|
|
// console.log(this.value)
|
|
// that.search( this.value ).draw();
|
|
// });
|
|
// });
|
|
|
|
$('.dataTables_filter input')
|
|
.unbind('keypress keyup')
|
|
.bind('keypress keyup', function(e){
|
|
if ($(this).val().length < 3 && e.keyCode != 13) return;
|
|
table.fnFilter($(this).val());
|
|
});
|
|
|
|
$("#btn-date-filter").click(function(){
|
|
$("#date_filter_modal").modal("show")
|
|
})
|
|
|
|
@if(isset($audit_months) && is_array($audit_months))
|
|
$("#btn-login-audit-report").click(function(){
|
|
var month = $("#login-audit-month").val();
|
|
window.location.href = '{{ $base_url }}/loginauditreport?month=' + encodeURIComponent(month);
|
|
});
|
|
@endif
|
|
});
|
|
|
|
</script>
|
|
<!-- end demo js-->
|
|
@endsection |