datatables

table.js

var invoicesTable = $('table.invoices-table').DataTable({
    processing: true,
    serverSide: true,
    lengthChange: true,
    rowId: 'id',
    "ajax": {
        "url": '/invoices',
        "dataSrc": "data.data",
        data: function ( d ) {
            var dateType = $('#dateType').val();
            var dateFrom = $('#invoicesFrom').val();
            var dateTo   = $('#invoicesTo').val();
            var status   = $('#status').val();

            if(status) {
                d.status = status;
            }

            //Validating dates format as a condition to send them in the request
            if(dateFrom && validDateFormat(dateFrom)) {
                d.dateFrom = dateFrom;
            }

            if(dateTo && validDateFormat(dateTo)) {
                d.dateTo = dateTo;
            }

            d.dateType = dateType;
        }
    },
    "columns": [
        { "data": "date", "name": "date" },
        { "data": "client_name", "name": "client_name",
            fnCreatedCell: function (td, cellData, rowData, row, col) {
                $(td).html("<a href='/clients/"+rowData.client_id+"'>"+cellData+"</a>");
            }
        },
        { "data": "number", "name": "number",
            fnCreatedCell: function (td, cellData, rowData, row, col) {
                $(td).html("<a class='invoice-link' href='/projects/"+rowData.project_id+"/invoices/"+rowData.id+"/edit'>"+cellData+"</a>");
            }
        },
        { "data": "project_number", "name": "project_number",
            fnCreatedCell: function (td, cellData, rowData, row, col) {
                $(td).html("<a href='/projects/"+rowData.project_id+"/'>"+cellData+"</a>");
            }
        },
        { "data": "reference_number", "name": "reference_number" },
        { "data": "po_number", "name": "po_number" },
        { "data": "due_date", "name": "due_date" },
        { "data": "total", "name": "total", "render": numberFormat, "type": "html-num-fmt" },
        { "data": "balance_due", "name": "balance_due", "render": numberFormat, "type": "html-num-fmt" },
        { "data": "status", "name": "status" },
    ],
    "autoWidth": false,
    "columnDefs": [
        { "width": "10%", "targets": 0 },
        { "width": "18%", "targets": 1 },
        { "width": "8%",  "targets": 2 },
        { "width": "10%", "targets": 3 },
        { "width": "12%", "targets": 4 },
        { "width": "8%",  "targets": 5 },
        { "width": "10%", "targets": 6 },
        { "width": "10%", "targets": 7 },
        { "width": "10%", "targets": 8 },
        { "width": "10%", "targets": 9 },
    ],
    dom: '<<"invoicesTableFilters"><t>ip>',
    order: [ [0, 'desc'] ],
    buttons: [
        {
            extend: 'print',
            title: '',
            exportOptions: {
                columns: ':visible',
                orthogonal: 'export'
            }
        },
        {
            extend: 'pdf',
            filename: 'Invoices',
            exportOptions: {
                columns: ':visible',
                orthogonal: 'export'
            }
        },
        {
            extend: 'excelHtml5',
            filename: 'Invoices',
            exportOptions: {
                columns: ':visible',
                orthogonal: 'export'
            }
        },
        {
            extend: 'csv',
            filename: 'Invoices',
            exportOptions: {
                columns: ':visible',
                orthogonal: 'export'
            },
        },
    ],
    pageLength: 150,
    initComplete: function(settings, json) {
        if(!(json.recordsTotal == 0)) {
            invoicesTable.buttons().container().appendTo( '.colsm6:eq(0)', invoicesTable.table().container() );
            $('.toggle-columns').removeClass("hidden");
            $(".dataTables_wrapper").show();
            $('table.invoices-table').removeClass('hidden-table');

            var filterFields = `
                <div class="filter-popover-container display-flex">
                    <div class="form-group">
                        <label for="status">Status</label><br>
                        <select class="form-control" id="status" name="status">
                            <option value="" selected></option>
                            <option value="Paid">Paid</option>
                            <option value="Open">Open</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="from">Date Type</label><br>
                        <select class="form-control" id="dateType" name="dateType">
                            <option value="date" selected>Date</option>
                            <option value="due_date">Due Date</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="from">Invoices From</label><br>
                        <input type="text" id="invoicesFrom" class="form-control popover-datepicker">
                    </div>
                    <div class="form-group margin-right0px">
                        <label for="to">To</label><br>
                        <input type="text" id="invoicesTo" class="form-control popover-datepicker">
                    </div>
                </div>
                <div class="margin-top10px">
                    <button class="btn btn-success apply-filters">Apply</button>
                </div>
            `;

            var filterObject = {
                fields: ['search', 'filterButton', 'length', 'buttons'],
                placeholders: {
                    search: 'Search Table',
                },
                lengthNums: ['150', '300', '450'],
                filterFields: filterFields,
                dataPlacement: 'right',
            };

            $("div.invoicesTableFilters").html(customFilters(filterObject));
        } else {
            $(".empty-results").removeClass("hidden");
            $(".dataTables_wrapper").hide();
        }
    }
});