272 lines
11 KiB
PHP
272 lines
11 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($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>
|
|
/* placing the footer on top */
|
|
thead {display: table-header-group;}
|
|
tfoot {display: table-header-group;}
|
|
#con-close-modal .checkbox input[type=checkbox] {margin-left: -16px;}
|
|
.mdi-square-edit-outline{color: #FF5722;}
|
|
.mdi-account-circle{color: #4CAF50;}
|
|
</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 selectedContacts = [];
|
|
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 '<input type="checkbox" class="contact-select" value="'+row.id+'" '+((selectedContacts.indexOf(row.id)>-1)?'checked="checked"':'' )+'>' + (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
|
|
],
|
|
"drawCallback": function () {
|
|
$('.dataTables_paginate > .pagination').addClass('pagination-rounded');
|
|
$('.contact-select').unbind();
|
|
$('.contact-select').click(function(){
|
|
if($(this).is(':checked')) {
|
|
selectedContacts.push($(this).val());
|
|
} else {
|
|
selectedContacts.splice(selectedContacts.indexOf($(this).val()), 1);
|
|
}
|
|
});
|
|
$('[data-toggle="tooltip"]').unbind();
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
|
|
},
|
|
"initComplete": function(settings, json) {
|
|
$('#list-page-datatable_length').append('<button class="btn btn-outline-dark btn-xs ms-5" type="button" id="save-search-btn">Save Search</button>');
|
|
$('#list-page-datatable_length').append('<button class="btn btn-outline-secondary btn-xs ms-2" type="button" id="save-selected-btn">Save Selected</button>');
|
|
$('#save-search-btn').click(function(){
|
|
var segment = prompt("Enter Segment ", "");
|
|
if (segment == null || segment == "") {
|
|
txt = "User cancelled the prompt.";
|
|
} else {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: '/contact/savesegment',
|
|
data: {name:segment, _token: $('meta[name="csrf-token"]').attr('content')},
|
|
success: function( data ) {
|
|
if(data.status == 'success') {
|
|
$('#notifications').append('<div class="alert alert-success">Segment Saved Successfully</div>');
|
|
}
|
|
},
|
|
});
|
|
}
|
|
});
|
|
|
|
$('#save-selected-btn').click(function(){
|
|
var selected = prompt("Enter User list Name", "");
|
|
if (selected == null || selected == "") {
|
|
txt = "User cancelled the prompt.";
|
|
} else {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: '/contact/savelist',
|
|
data: {name:selected, contacts:selectedContacts, _token: $('meta[name="csrf-token"]').attr('content')},
|
|
success: function( data ) {
|
|
if(data.status == 'success') {
|
|
$('#notifications').append('<div class="alert alert-success">Segment Saved Successfully</div>');
|
|
}
|
|
},
|
|
});
|
|
}
|
|
});
|
|
|
|
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")
|
|
})
|
|
});
|
|
|
|
</script>
|
|
<!-- end demo js-->
|
|
@endsection |