<pre>
<table id="basic-datatable" class="display table-bordered nowrap table table-striped table-sm" style="font-size:12px;">
<thead>
<tr>
<th>Action</th>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Designation</th>
<th>Start Day/Time</th>
<th>Meter Reading</th>
<th>Start Remarks</th>
<th>End Day/Time</th>
<th>Meter Reading</th>
<th>End Remarks</th>
<th>Attachments</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr class="align-middle">
<td class="text-nowrap text-end">
<a class="btn btn-link p-0" href="~/DayInOut/ShowMapRoute?id=@item.Session" data-bs-toggle="tooltip" data-bs-placement="top" title="View Route" onclick="GetRouteById(@item.Session)">
<i class="mdi mdi-archive-edit"></i>
</a>
</td>
<td class="text-nowrap fw-bold">
<span title="@item.Client" class="d-inline-block text-truncate" style="max-width: 100px;"> E10001</span>
</td>
<td class="text-nowrap">
<span title="@item.Client" class="d-inline-block text-truncate" style="max-width: 100px;"> Tharaka Jayampathi </span>
</td>
<td class="text-nowrap">DivisionalCodinator</td>
<td class="text-nowrap fw-bold">
@if (item.DayStart.HasValue)
{
@item.DayStart.Value.ToString("M/d/yyyy")
<br>
@item.DayStart.Value.ToString("h:mm:ss tt")
}
else
{
<p>???</p>
}
<td class="text-nowrap">@item.StartMileage </td>
<td class="text-nowrap">@item.DayStartRemark </td>
<td class="text-nowrap fw-bold">
@if (item.DayEnd.HasValue)
{
@item.DayEnd.Value.ToString("M/d/yyyy")
<br>
@item.DayEnd.Value.ToString("h:mm:ss tt")
}
else
{
<p>???</p>
}
</td>
<td class="text-nowrap">@item.EndMileage </td>
<td class="text-nowrap">@item.DayEndRemark </td>
<td class="text-nowrap">
@if (item.DayStartAttachment != "" && item.DayStartAttachment != null)
{
<a title="Start" style=" border: 1px solid #dedede; margin-right: 5px;" class="btn px-2 btn-success btn btn-sm" target="_blank" href="@item.DayStartAttachment" download>
<i class="far fa-file-image"></i>
</a>
}
@if (item.DayEndAttachment != "" && item.DayEndAttachment != null)
{
<a title="End" style=" border: 1px solid #dedede; margin-right: 5px;" class="btn px-2 btn-danger btn btn-sm" target="_blank" href="@item.DayEndAttachment" download>
<i class="far fa-file-image"></i>
</a>
}
</td>
</tr>
}
</tbody>
<tfoot>
<tr>
<th>Action</th>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Designation</th>
<th>Start Day/Time</th>
<th>Meter Reading</th>
<th>Start Remarks</th>
<th>End Day/Time</th>
<th>Meter Reading</th>
<th>End Remarks</th>
<th>Attachments</th>
</tr>
</tfoot>
</table>
@section Styles {
<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;
}
thead input {
width: 100%;
}
</style>
}
@section Scripts{
<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 () {
// Setup - add a text input to specific footer cells
$('#basic-datatable thead tr')
.clone(true)
.addClass('filters')
.appendTo('#basic-datatable thead');
$("#basic-datatable").DataTable({
orderCellsTop: true,
dom: 'Bfrtip',
scrollX: true,
buttons: [{
extend: 'excelHtml5',
exportOptions: {
columns: [1, 2, 3, 4,5,6,7,8,9]
}
}
],
select: {
style: 'multi'
},
initComplete: function () {
var api = this.api();
// Define the columns that require filters
var filterColumns = [1, 2, 3, 4, 5, 6, 7, 8];
// 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();
}
});
},
});
});
</script>
</pre>
No comments:
Post a Comment