donation/app/Views/report_mem_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('mem_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> 

<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>scheme name</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>scheme name</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>