|
|
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/head-sm :: head}"></head><style> #uploadNocSection { display: none; }
.card-body table { width: 100%; padding: 100px; }
.card-body th, td { padding: 8px; text-align: left; }
.amount-cell { text-align: right; padding-right: 1rem; /* Adjust padding as needed */ }
.table { width: 100% !important; }</style>
<body> <!-- Page Container --> <div id="page-container" class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark"> <!-- Sidebar Nav--> <aside th:replace="~{fragments/aside-right :: aside}"></aside> <!-- END Side Overlay (right)--> <!-- Sidebar Nav--> <nav th:replace="~{fragments/nav-sm :: nav}"></nav> <!-- END Sidebar --> <!-- Header --> <header th:replace="~{fragments/header-sm :: header}"></header> <!-- END Header --> <!-- Main Container --> <main id="main-container"> <div class="content"> <div class="block block-rounded"> <div class="block-header block-header-default"> <h3 class="block-title">List of Bookings Waiting for NOC </h3> </div> <div class="block-content p-0"> <div class="p-sm-4 p-0"> <div class="table-responsive"> <table class="table table-bordered table-striped table-vcenter js-dataTable-responsive" id="bookingapprovedtable"> <thead class="thead-light"> <tr> <th class="text-center no-sort">S.No</th> <th class="text-center">Booking Id</th> <th class="text-center">Zone</th> <th class="text-center">Division</th> <th class="text-center" width="20%">Hall Name</th> <th class="text-center">User Name</th> <th class="text-center">User type</th> <th class="text-center" width="10%">Booking Date</th> <th class="text-center">Number of days</th> <th class="text-center">Reason for Booking</th> <th class="text-center">Caretaker Name/MobileNumber</th> <th class="text-center">Action</th> </tr> </thead> <tbody> <tr th:each="booking, rowStat : ${waitingBookings}"> <td class="text-center" th:text="${rowStat.index + 1}"></td> <td class="text-center" th:text="${booking.bookingId}"></td> <td class="text-center" th:text="${booking.hallDetails.zone}"></td> <td class="text-center" th:text="${booking.hallDetails.division}"></td> <td class="text-center" th:text="${booking.hallDetails.hallName}"></td> <td class="text-center" th:text="${booking.users.name}"></td> <td class="text-center" th:text="${booking.users.usertype}"></td> <td class="text-center" th:text="${booking.bookingDate}"></td> <td class="text-center" th:text="${booking.noOfDays}"></td> <td class="text-center" th:text="${booking.reason}"></td> <td class="text-center" th:text="${booking.hallDetails.hallInchargeName} + ' / ' + ${booking.hallDetails.hallInchargeMobno}"> </td>
<td> <p> <span class="badge bg-success" style="cursor: pointer;" th:onclick="pendingbooking([[${booking.bookingId}]])">View</span> </p> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </main>
<!-- END Main Container --> <!--modal for pening--> <div class="modal fade backdrop" id="pendingBookingForm" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <form id="ownform"> <div class="block block-rounded block-themed block-transparent mb-0"> <div class="block-header bg-primary-dark"> <h3 class="block-title" id="2mtitle">Booking Information</h3> <div class="block-options"> <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close"> <i class="fa fa-fw fa-times"></i> </button> </div> </div> <div class="block-content row">
<div class="col-md-12 col-lg-12 col-sm-12 mb-2"> <input type="hidden" class="form-control text-center" name="bookingid" id="bookingid" disabled /> <div class="card-body"> <table> <tr> <th colspan="10" style="background-color: #f2f2f2;">User Details</th> </tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name: </th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_userName"></td> <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number: </th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_mobileNumber"></td>
<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type: </th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_usertype"></td>
</tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address: </th> <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_useraddress"></td>
</tr>
</table> </div> </div>
<div class="col-md-12 col-lg-12 col-sm-12 mb-2"> <input type="hidden" class="form-control text-center" name="bookingid" id="bookingid" disabled /> <div class="card-body"> <table> <tr> <th colspan="10" style="background-color: #f2f2f2;">Hall Details</th> </tr>
<tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name: </th> <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_hallName"></td>
</tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th> <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_halladdress"></td>
</tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker Name:</th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_caretakername"></td> <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker Mobile Number:</th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_caretakermobileNumber"></td>
</tr>
</table> </div> </div>
<div class="col-md-12 col-lg-12 col-sm-12"> <input type="hidden" class="form-control text-center" name="settlementid" id="settlementid" disabled /> <div class="card-body"> <table> <tr> <th colspan="4" style="background-color: #f2f2f2;">Booking Details (Booking Id:-<span id="booking_id" style="color:blue"></span>)</th> </tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date: </th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_bookingDate"></td> <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Status: </th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_bookingStatus"></td> </tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date: </th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_startDate"></td> <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit Amount:</th> <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;" id="td_depositeAmount"></td> </tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal">END Date:</th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_endDate"></td> <th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount: </th> <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;" id="td_hallAmount"></td> </tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot: </th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_startingSlot"></td> <th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th> <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;" id="td_gst"></td> </tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot: </th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_endingSlot"></td> <th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount: </th> <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;" id="td_totalAmount"></td>
</tr> </table> </div> <!--hello--> <div id="bookingDocumentsContainer" class="col-md-12 col-lg-12 col-sm-12 mt-4"> <!-- Booking documents will be dynamically populated here --> </div>
<div class="col-md-12 col-lg-12 col-sm-12 mb-2"> <input type="hidden" class="form-control text-center" name="bookingid" id="bookingid" disabled /> <div class="card-body"> <table> <tr> <th colspan="10" style="background-color: #f2f2f2;">Booking Payment Details</th> </tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal;"> Transaction ID:</th> <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_transactionId"></td> </tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount Received:</th> <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_payamountReceived"> </td> </tr> <tr> <th style="padding: 0.45rem 0.45rem;font-weight: normal;"> Transaction Status:</th> <td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_paymentStatus"></td> </tr> </table> <div class="row" id="reasondetails" style="display: none;"> <div class="col-md-6 mb-2"> <label class="form-label">Reason type :<span class="text-danger">*</span></label> <select class="form-control" id="reasontype"> <option value="0">Select Reason type</option> <option value="1">Illegal</option> <option value="2">Others</option> </select> </div> <div class="col-md-6 mb-2"> <label class="form-label">Reason:<span class="text-danger">*</span></label> <textarea class="form-control" name="reason" id="reason" required></textarea> <div id="reasonValidationText" class="text-danger small mt-1" style="display:none">Reason is required.</div> </div> </div>
</div> </div>
<div id="uploadNocSection"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="uploadNocModalLabel">Upload NOC</h5> </div> <div class="modal-body"> <label for="nocFile" class="form-label">Select NOC File</label> <input type="file" class="form-control nocfile" id="nocFile" name="nocFile" required> <input type="hidden" id="bookingid" name="bookingid"> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" id="submitNocButton">Submit</button> </div> </div> </div>
<div class="block-content block-content-full text-end bg-body" id="mbutton2"> <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-sm btn-primary" id="acceptbutton1" th:onclick="showUploadNocSection(); this.style.display='none';" data-booking-id="${booking.bookingId}"> Upload NOC </button>
<button type="button" class="btn btn-sm bg-danger" id="rejectbutton" th:onclick="rejectsubmit()">Reject</button> <!--
<button type="button" class="btn btn-sm btn-primary" id="accepttbutton" th:onclick="accept()">Approve</button>
--> </div> </div> </div> </div> </div>
</div>
</div>
<div class="col-sm-12"> <!--<label class="form-label">Documents:<span class="text-danger"></span></label>--> <div class="documents" id="documents"></div> </div>
</div> </div>
</form> </div> </div> </div>
<!-- End Modal User --> <!-- Footer --> <div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="fileModalLabel">File Preview</h5> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <embed id="filePreview" src="" width="100%" height="600px"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>
<div th:replace="~{fragments/resetpassword :: div}"></div> <footer th:replace="~{fragments/footer2 :: footer}"></footer> <script th:replace="~{fragments/loginscript :: script}"></script> <script> //script to open pending form function pendingbooking(bookingId) { $.ajax({ type: "GET", url: '/communityhall/api/officer/getBookingDetails', data: { 'bookingsId': bookingId }, success: function (x) { //console.log(x); showBookingInfo(x); } });
}
$('#submitNocButton').on('click', function (e) { e.preventDefault();
// Get the booking ID from the hidden input field let id = $('#bookingid').val(); // console.log("Booking ID:", id);
// Get the selected file let fileInput = $('#nocFile')[0].files[0];
// Check if a file is selected if (!fileInput) { Swal.fire({ icon: 'warning', title: 'No File Selected', text: 'Please select a file to upload.', allowOutsideClick: false, }); return; }
// Prepare the form data let formData = new FormData(); formData.append('nocFile', fileInput); formData.append('bookingid', id); // Ensure key matches backend parameter
// console.log("FormData entries:"); for (let [key, value] of formData.entries()) { console.log(`${key}: ${value}`); }
// Perform the AJAX request $.ajax({ url: '/communityhall/admin/api/uploadnoc', // API endpoint type: 'POST', data: formData, contentType: false, // Set to false for multipart/form-data processData: false, // Prevent jQuery from processing the data success: function (response) { // console.log("Upload success response:", response); Swal.fire({ icon: 'success', title: 'Success', text: 'NOC uploaded successfully!', allowOutsideClick: false, }).then(() => { $('#uploadNocModal').modal('hide'); // Close the modal location.reload(); // Refresh the page }); }, error: function (xhr, status, error) { console.error("Upload failed:", xhr.responseText); Swal.fire({ icon: 'error', title: 'Upload Failed', text: 'Failed to upload NOC: ' + xhr.responseText, allowOutsideClick: false, }); } }); });
// Populate bookingId when opening the modal $('#uploadNocModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget); // Button that triggered the modal var bookingId = button.data('booking-id'); // Extract bookingId from the button // console.log("Setting bookingId in modal:", bookingId); $('#bookingid').val(bookingId); // Set the bookingId in the hidden input field });
function showBookingInfo(list) { $('#pendingBookingForm').modal({ backdrop: 'static', keyboard: false }); $('#pendingBookingForm').modal('show'); var todaydate = new Date().toISOString().split('T')[0];
// Convert startDate to YYYY-MM-DD format if needed var startDate = new Date(list.startDate).toISOString().split('T')[0]; // Ensure this is in the correct format if (startDate > todaydate) { $('#reasondetails').show(); $('#rejectbutton').show(); } else { $('#reasondetails').hide(); $('#rejectbutton').hide(); } document.getElementById("td_userName").innerHTML = list.users.name; document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo; document.getElementById("td_usertype").innerHTML = list.users.usertype; document.getElementById("bookingid").value = list.bookingId; var userDetails = list.users; var userDetailsString = userDetails.doorNo + ", " + userDetails.street + ", " + userDetails.area + ", " + userDetails.location + "- " + userDetails.pinCode; document.getElementById("td_useraddress").innerHTML = userDetailsString; document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName; var hallDetails = list.hallDetails; var hallDetailsString = hallDetails.doorNo + ", " + hallDetails.street + ", " + hallDetails.area + ", " + hallDetails.city + "- " + hallDetails.pinCode; document.getElementById("td_halladdress").innerHTML = hallDetailsString; document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName; document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno; document.getElementById("td_bookingDate").innerHTML = list.bookingDate; document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2); document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2); document.getElementById("td_totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2); var gstcl = (list.hallAmount * (list.hallDetails.gst / 100)); var formattedGst = gstcl.toFixed(2); document.getElementById("td_gst").innerHTML = '₹ ' + formattedGst; document.getElementById("td_startDate").innerHTML = list.startDate; document.getElementById("td_endDate").innerHTML = list.endDate; document.getElementById("booking_id").innerHTML = list.bookingId; function getTimeSlot(slotValue) { //console.log("Slot Value in getTimeSlot function:", slotValue); var timeSlot; var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim if (trimmedSlotValue === '1') { timeSlot = 'Morning'; } else if (trimmedSlotValue === '2') { timeSlot = 'Evening'; } else { timeSlot = 'Unknown'; } //console.log("Time Slot:", timeSlot); return timeSlot; } document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot); document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot); document.getElementById("td_bookingStatus").innerHTML = list.bookingStatus; // Check if transactionId is not null, otherwise set to "NA" document.getElementById("td_transactionId").innerHTML = list.payments && list.payments.transactionId ? list.payments.transactionId : "NA";
// Check if amountReceived is not null, otherwise set to "NA" document.getElementById("td_payamountReceived").innerHTML = list.payments && list.payments.amountReceived ? '₹ ' + list.payments.amountReceived : "NA";
// Check if paymentStatus is not null, otherwise set to "NA" document.getElementById("td_paymentStatus").innerHTML = list.payments && list.payments.paymentStatus ? list.payments.paymentStatus : "NA"; // showReasonDocuments(list); } // function showReasonDocuments(list) { // $.ajax({ // type: "GET", // url: '/communityhall/api/officer/getReasonByName', // data: { // 'reasonName': list.reason // }, // success: function (x) { // //console.log(x); // showReasonWithDocument(x, list); // } // }); // }
function showUploadNocSection() { const uploadNocSection = document.getElementById("uploadNocSection"); uploadNocSection.style.display = "block"; // Make the section visible uploadNocSection.scrollIntoView({ behavior: "smooth" }); // Scroll to the section } // Display booking documents // function showReasonWithDocument(reasonData, list) { const container = $('#bookingDocumentsContainer'); // var reasonDocumentData = reasonData.reasonDocumentMasterList; // var bookingDocumentsList = list.bookingDocumentsList; // const reasonFieldsContainer = $('#documents'); // reasonFieldsContainer.empty(); // // Create a responsive table container // var tableResponsiveDiv = $('<div>').addClass('table-responsive'); // // // Create the table with Bootstrap classes and custom styles // var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({ // 'width': '100%', // 'height': 'auto', // 'border': '1px solid black' // }); // // Create the table header (thead) // var thead = $('<thead>').appendTo(table); // var headerRow = $('<tr>').appendTo(thead); // $('<th>').attr('colspan', '3').text('Document Details').css({ // 'color': 'black', // 'font-weight': 'bold', // 'background-color': '#f2f2f2', // 'padding': '0.45rem 0.45rem' // }).appendTo(headerRow); // // // Create header row for columns // var columnHeadersRow = $('<tr>').appendTo(thead); // $('<th>').text('S.No').appendTo(columnHeadersRow); // $('<th>').text('Required Info').appendTo(columnHeadersRow); // $('<th>').text('Required Documents').appendTo(columnHeadersRow); // // // Create the table body (tbody) // var tbody = $('<tbody>').appendTo(table); // // // Iterate through the documents list and populate rows // for (var i = 0; i < bookingDocumentsList.length; i++) { // (function (index) { // var row = $('<tr>').appendTo(tbody); // $('<td>').text(index + 1).appendTo(row); // // // Determine the text content for the second cell // var name = bookingDocumentsList[index].name ? bookingDocumentsList[index].name : ''; // Empty string if name is null or undefined // var fieldText = reasonDocumentData[index].fieldName; // var fullText = name ? fieldText + ': ' + name : fieldText; // Include colon only if name is not empty // // $('<td>').text(fullText).appendTo(row); // // // Create a link to view document image // var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () { // showDocumentImage(bookingDocumentsList[index].bookingDocUrl); // }); // $('<td>').append(viewLink).appendTo(row); // })(i); // } // // Append table to the responsive container // tableResponsiveDiv.append(table); // // Append table to the container in the DOM // reasonFieldsContainer.append(tableResponsiveDiv); // }
function showDocumentImage(fileURL) { //console.log(fileURL); openFileModal(fileURL); } // Event delegation for dynamically added elements $(document).on('click', '.view-document', function () { const fileURL = $(this).data('url'); openFileModal(fileURL); });
function openFileModal(fileURL) { $('#filePreview').attr('src', fileURL); $('#fileModal').modal('show'); }
function accept() { let id = document.getElementById("bookingid").value;
Swal.fire({ title: 'Do you want to Accept this User?', showDenyButton: true, showCancelButton: true, confirmButtonText: 'YES', denyButtonText: 'NO', }).then((result) => { if (result.isConfirmed) { // Show loading popup const loadingSwal = Swal.fire({ title: 'Processing...', text: 'Please wait while we process the acceptance.', allowOutsideClick: false, // Prevent closing the popup didOpen: () => { Swal.showLoading(); // Show the loading spinner }, showConfirmButton: false, // Hide the confirm button during loading });
$.ajax({ type: "POST", url: '/communityhall/api/officer/updateBookingApproved/' + id, data: { 'status': 'APPROVED', 'comments': 'Accepted', 'bookingId': id }, success: function (data, textStatus, xhr) { loadingSwal.close(); // Close the loading popup if (xhr.status === 200) { Swal.fire( 'Done', 'Successfully Approved to the ID: ' + id, 'success' ).then(() => { location.reload(); // Reload page after success }); } else { Swal.fire( 'Error', 'Failed to accept the Booking', 'error' ); } }, error: function (xhr, textStatus, errorThrown) { loadingSwal.close(); // Close the loading popup Swal.fire( 'Error', 'Failed to accept the Booking', 'error' ); } }); } else if (result.isDenied) { Swal.fire('Changes are not saved', '', 'info'); } }); } //hello function rejectsubmit() { let id = document.getElementById("bookingid").value; reasondetails.style.display = "block"; let reason = document.getElementById("reason").value.trim(); let reasontype = document.getElementById("reasontype").value; // Check if reason is empty only when rejecting if (reason === "" || reason.length === 0) { document.getElementById("reasonValidationText").style.display = "block"; return false; // Prevent form submission } else { document.getElementById("reasonValidationText").style.display = "none"; } Swal.fire({ title: 'Do you want to Reject this User ?', showDenyButton: true, showCancelButton: true, confirmButtonText: 'YES', denyButtonText: 'NO', }).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { $.ajax({ type: "POST", url: '/communityhall/api/officer/updateBookingReject/' + id, data: { 'status': 'REJECTED', 'comments': reason, 'bookingId': id, 'reasontype': reasontype }, success: function (data, textStatus, xhr) { //console.log("Rejection successful"); if (xhr.status === 200) { // Check if the response status is OK Swal.fire( 'Done', 'Successfully Rejected to the ID:' + id, 'success' ).then(() => { location.reload(); }); } else { Swal.fire( 'Error', 'Failed to reject the user', 'error' ); } }, error: function (xhr, textStatus, errorThrown) { console.error("Error:", errorThrown); Swal.fire( 'Error', 'Failed to reject the user', 'error' ); } }); } else if (result.isDenied) { Swal.fire('Changes are not saved', '', 'info') } }); return false; // Prevent form submission }
$(document).ready( function () { var buttons = [{ extend: 'pageLength', className: 'btn btn-primary' }, { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-primary', id: 'copyBtn' }, { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-primary', id: 'excelBtn' }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-primary', id: 'csvBtn' }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-primary', id: 'pdfBtn' }, ]; $('#bookingapprovedtable').DataTable( { dom: 'Bftip', columnDefs: [{ targets: 'no-sort', orderable: false }], lengthMenu: [ [50, 100, 200, 500, -1], ['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']], scrollY: '50vh', fixedColumns: { left: 1, right: 1 }, buttons: [buttons], responsive: true, searching: true, // Enable search select: false, processing: false, }); // Link the search input to DataTable $('#searchInput').on('keyup', function () { dataTable.search(this.value).draw(); }); }); </script></body>
</html>
|