GCC_Officer_Portal/target/classes/templates/modules/cdwaste/approval.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head>
<body>
    <div class="wrapper">
        <!-- Header -->
        <header th:replace="~{fragments/modules/base/header :: header}"></header>

        <div class="page-wrap">
            <!-- Left Menu -->
            <div th:replace="~{fragments/modules/base/menu :: menu}"></div>

            <div class="main-content">
                <div class="container-fluid">
                    <div class="page-header">
                        <div class="row align-items-end">
                            <div class="col-lg-8">
                                <div class="page-header-title">
                                    <i class="fas fa-th-large bg-blue"></i>
                                    <div class="d-inline">
                                        <h5>C & D Waste Collectors </h5>
                                        <span>Approval</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <nav class="breadcrumb-container" aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/index"><i class="ik ik-home"></i></a></li>
                                        <li class="breadcrumb-item">C & D Waste Collectors</li>
                                        <li class="breadcrumb-item active" aria-current="page">Approval</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>

                    <hr>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                             <div class="card-header">
				                				                
				          
				                
				            </div>
                                <div class="card-block">
                                    <div>
                                        <table id="worksDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
                                           <thead class="thead-dark">
        <tr role="row">
            <th>S.No</th> <!-- Auto-increment index -->
            <th>Name</th>
            <th>Mobile No</th>
            <th>Address</th>
            <th>Vehicle Number</th>
            <th>Vehicle Type</th>
            <th>Accepted Date</th>
            <th>Accepted By</th>
            <th>Register ID</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="approval, i : ${approvalDetails}">
            <td th:text="${i.count}">0</td> <!-- Index counter -->
            <td th:text="${approval.name}">Name</td>
            <td th:text="${approval.mobile_no}">Mobile No</td>
            <td th:text="${approval.address}">Address</td>
            <td th:text="${approval.vehicle_num}">Vehicle Number</td>
            <td th:text="${approval.vehicletype}">Vehicle Type</td>
            <td th:text="${approval.accepteddate}">Accepted Date</td>
            <td th:text="${approval.acceptedby}">Accepted By</td>
            <td th:text="${approval.register_id}">Register ID</td>
        </tr>
    </tbody>
    <tfoot class="thead-dark">
        <tr>
            <th>S.No</th>
            <th>Name</th>
            <th>Mobile No</th>
            <th>Address</th>
            <th>Vehicle Number</th>
            <th>Vehicle Type</th>
            <th>Accepted Date</th>
            <th>Accepted By</th>
            <th>Register ID</th>
        </tr>
    </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
        </div>
    </div>

   

    <!-- Include jQuery and Bootstrap JavaScript -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    <script th:replace="~{fragments/modules/base/script :: script}"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    	var table = $('#worksDatatable').DataTable({
            dom: 'Bftip',
            columnDefs: [
                { targets: 'no-sort', orderable: false }
            ],
            lengthMenu: [
                [50, 100, 200, 500, -1],
                ['50 rows', '100 rows', '200 rows', 'Show all']
            ],
            scrollY: '50vh',
            fixedColumns: {
                left: 1,
                right: 1
            },
            buttons: [
                {
                    extend: 'pageLength',
                    className: 'btn btn-warning'
                },
                {
                    title: 'Data export',
                    extend: 'copyHtml5',
                    text: 'Copy',
                    className: 'btn btn-secondary',
                    id: 'copyBtn'
                },
                {
                    extend: 'excelHtml5',
                    text: 'Excel',
                    className: 'btn btn-secondary',
                    id: 'excelBtn'
                },
                {
                    extend: 'csvHtml5',
                    text: 'CSV',
                    className: 'btn btn-secondary',
                    id: 'csvBtn'
                },
                {
                    extend: 'pdfHtml5',
                    text: 'PDF',
                    className: 'btn btn-secondary',
                    id: 'pdfBtn'
                }
            ],
            fixedHeader: true,
            autoWidth: true,
            responsive: true,
            searching: true,
            select: false,
            processing: false
        });
       
    });
    	   



    


    </script>
</body>
</html>