donation/app/Views/report_general_invoice.php

<!-- start page title -->
<div class="row">
    <div class="col-md-4">
        <div class="page-title-box page-title-box-alt">
            <h4 class="page-title"><?= $page_name ?></h4>           
        </div>
    </div>
    <div class="offset-md-3 col-md-5"> 
        <form action="<?php echo base_url('general_inv_rp'); ?>" method="post">
            <div class="form-group">
            <div class="row">
                <div class="col-md-7">
                         <input class="form-control input-daterange-datepicker" type="text" name="date" value="<?php if(isset($selected_data)) { echo $selected_data; } ?>"/>
                </div>
                <div class="col-md-5">
                         <button type="submit" class="btn btn-primary">Generate Report</button>
                </div>
            </div>
          </div>
        </form>
    </div>
</div>     
<!-- end page title --> 




<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">


<table id="datatable-buttons" class="table table-striped dt-responsive nowrap w-100">
<thead>
<tr>
<th hidden>id</th>
<th>Invoice No</th>
<th>Invoice Date</th>
<th>Customer Name</th>
<th>GST</th>
<th>Discount</th>
<th>Count</th>
<th>OT Charges</th>
<th>Total</th>
<th>payment</th>
</tr>
</thead>


<tbody>
<?php foreach ($report_data as $row)
{ ?>
<tr>
    <td hidden><?php echo $row->invoice_id;?></td>
    <td><?php echo $row->invoice_number;?></td>
    <td><?php echo $row->invoice_date;?></td>
    <td><?php echo $row->first_name." ".$row->last_name;?></td>
    <td><?php echo $row->tax . '%'; ?></td>
    <td><?php echo '₹' . number_format($row->discount, 2, '.', ','); ?></td>
    <td><?php echo $row->item_count;?></td>
    <td><?php echo '₹' . number_format($row->shipping_charge, 2, '.', ','); ?></td>
    <td><?php echo '₹' . number_format($row->total_amount, 2, '.', ','); ?></td>
    <td><?php echo $row->payment_method;?></td>
</tr>    
<?php } ?>
</tbody>

</table>

</div> <!-- end card body-->
</div> <!-- end card -->
</div><!-- end col-->
</div>
<!-- end row-->


<script>
$(document).ready(function() {
    var table = $('#datatable-buttons').DataTable({
        "order": [[0, 'desc']],
        "dom": 'Bfrtip',
        buttons: [
            {
                extend: 'pdfHtml5',
                title: 'General Invoice Report',
                text: 'PDF',
                customize: function(doc) {
                    // Exclude the first and last columns
                    doc.content[1].table.body.forEach(function(row) {
                        row.splice(0, 1); // Remove the first column
                        row.splice(-1, 1); // Remove the last column
                    });
                }
            },
            {
                extend: 'print',
                title: 'General Invoice Report',
                text: 'Print',
                customize: function(win) {
                    // Exclude the first and last columns
                    $(win.document.body).find('table').find('th:first-child, td:first-child, th:last-child, td:last-child').remove();
                }
            },
            {
                extend: 'csv',
                text: 'CSV',
                title: 'General Invoice Report',
                exportOptions: {
                    columns: ':not(:first-child):not(:last-child)' // Exclude the first and last columns
                }
            }
        ],
        columnDefs: [
            { type: 'date', targets: [1,2,3,4,5,6,7,8,9], orderable: false } // Specify the column index for date sorting and disable sorting
        ]
    });

   // Add date range filter and dropdowns
   $('#datatable-buttons thead tr').clone(true).appendTo('#datatable-buttons thead');
    $('#datatable-buttons thead tr:eq(1) th').each(function (i) {
        var title = $(this).text();
        if (title != 'Invoice Date') {
            // For non-"Invoice Date" columns, add a dropdown
            var uniqueValues = table.column(i).data().unique().sort();
            var select = $('<select class="form-control form-control-sm"><option value="">Search ' + title + '</option></select>')
                .appendTo($(this).empty())
                .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex($(this).val());
                    table.column(i)
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

            uniqueValues.each(function (d, j) {
                select.append('<option value="' + d + '">' + d + '</option>');
            });
        } else {
            // For "Invoice Date" column, add a date input
            if (title != 'GST')
            $(this).html('<input type="date" class="form-control form-control-sm" placeholder="Search ' + title + '" />');
        }

        $('input', this).on('keyup change', function () {
            if (table.column(i).search() !== this.value) {
                table
                    .column(i)
                    .search(this.value)
                    .draw();
            }
        });
    });

    // Add date range filter for "Invoice Date" column
    var dateRangeFilter = $('<input type="text" class="form-control form-control-sm" placeholder="Select date range"/>')
        .appendTo('#datatable-buttons thead tr:eq(2) th:eq(2)')
        .daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            }
        })
        .on('click', function (e) {
            // Prevent sorting when clicking on the date range filter input
            e.stopPropagation();
        });

    dateRangeFilter.on('apply.daterangepicker', function (ev, picker) {
        table.column(2)
            .search(picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'))
            .draw();
    });

    dateRangeFilter.on('cancel.daterangepicker', function () {
        dateRangeFilter.val('');
        table.column(2).search('').draw();
    });
    
});

</script>