<table id="basic-datatable-Users" class="table table-striped dt-responsive nowrap w-100">
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Role</th>
<th>HRIS No</th>
<th>Bar Code</th>
<th>Supervisor</th>
<th>User Skill</th>
<th>Is Active</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach (var user in Model.Users)
{
<tr>
<td>
@user.FullName
</td>
<td>@user.PhoneNumber</td>
<td>@user.Email</td>
<td>@user.RoleName</td>
<td>@user.HrisNo</td>
<td>@user.BarCode</td>
<td>@user.Supervisor</td>
<td>@user.UserSkill</td>
<td>
@if (user.IsActive == true)
{
<div class="form-check form-switch">
<input data-toggle="ajax-modal" type="checkbox" checked disabled class="form-check-input">
</div>
}
else
{
<div class="form-check form-switch">
<input data-toggle="ajax-modal" type="checkbox" disabled class="form-check-input">
</div>
}
</td>
<td>
<a href="/user/details?id=@user.Id" type="button" title="User Edit" class="btn btn-sm btn-soft-primary rounded-pill">
<i class="mdi mdi-account-edit-outline"></i>
</a>
<button type="button" title="Deactivate" class="btn btn-sm btn-soft-primary rounded-pill" data-bs-toggle="modal" data-id="@user.Id" onclick="OpenUserDeleteSubmit(this);">
<i class="mdi mdi-delete"></i>
</button>
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Email</th>
<th>Role</th>
<th>HRIS No</th>
<th>Bar Code</th>
<th>Supervisor</th>
<th>User Skill</th>
<th>Is Active</th>
<th>Action</th>
</tr>
</tfoot>
</table>
<!-- Datatables css -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.6.2/css/select.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" />
<style>
div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}
.dt-button.buttons-excel{
background: #727cf5;
color:#fff;
border:0;
}
thead input {
width: 100%;
border:1px solid #ededed;
}
</style>
@section Scripts {
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.6.2/js/dataTables.select.min.js"></script>
<script>
$(document).ready(function () {
$('#basic-datatable-Users thead tr')
.clone(true)
.addClass('filters')
.appendTo('#basic-datatable-Users thead');
///
///
$("#basic-datatable-Users").DataTable({
orderCellsTop: true,
dom: 'Bfrtip',
scrollX: true,
responsive : true,
buttons: [{
extend: 'excelHtml5',
exportOptions: {
columns: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
}
],
select: {
style: 'multi'
},
keys: !0,
language: {
paginate: {
previous: "<i class='mdi mdi-chevron-left'>",
next: "<i class='mdi mdi-chevron-right'>"
}
},
drawCallback: function () {
$(".dataTables_paginate > .pagination").addClass("pagination-rounded")
},
//clear autocomplete
initComplete: function () {
var api = this.api();
// Define the columns that require filters
var filterColumns = [1, 2, 3, 4];
// For each column
api.columns().eq(0).each(function (colIdx) {
var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
if (filterColumns.includes(colIdx)) {
// Set the header cell to contain the input element
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$('input', cell)
.off('keyup change')
.on('change', function (e) {
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})';
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();
})
.on('keyup', function (e) {
e.stopPropagation();
$(this).trigger('change');
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
} else {
// Empty the header cell
$(cell).empty();
}
});
$(this.api().table().container()).find('input[type="search"]').parent().wrap('<form>').parent().attr('autocomplete', 'off').css('overflow', 'hidden').css('margin', 'auto');
}
});
});
/////
</script>
}