​

  var groupColumn = 0;

        $(document).ready(function () {

            // Setup clone - header filter

            $('#main-table thead tr')

                .clone(true)

                .addClass('filters')

                .appendTo('#main-table thead');

​

​

​

            //Generate filter inputs and apply filter.

            var table = $('#main-table').DataTable({

                columnDefs: [{ visible: false, targets: groupColumn }, { width: '10%', targets: 5 }],

                destroy: true,

                orderCellsTop: true,

                fixedHeader: true,

                pageLength: 50,

                dom: 'Bfrtip',

                buttons: {

                    dom: {

                        button: {

                            className: 'dt-button button-page-length btn btn-secondary'

                        }

                    },

                    buttons: [

                        {

​

                            extend: 'excelHtml5',

                            className: 'btn btn-secondary',

                            exportOptions: {

                                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

                            },

                            title: "",

                            filename: "All Projects List"

                        },

                        'pageLength'

                    ]

                },

                "order": [[groupColumn, "asc"]],

                "oLanguage": {

                    "sEmptyTable": "No data available."

                },

                "drawCallback": function (settings) {

                    var api = this.api();

                    var rows = api.rows({

                        page: 'current'

                    }).nodes();

                    var last = null;

​

                    api.column(groupColumn, {

                        page: 'current'

                    }).data().each(function (group, i) {

                        if (last !== group) {

                            $(rows).eq(i).before(

                                '<tr class="group"><td colspan="11" style="font-weight: bold;">' + group + '</td></tr>'

                            );

​

                            last = group;

                        }

                    });

                },

                initComplete: function () {

                    var api = this.api();

​

                    // For each column

                    api

                        .columns()

                        .eq(0)

                        .each(function (colIdx) {

                            // Set the header cell to contain the input element

                            var cell = $('.filters th').eq(

                                $(api.column(colIdx).header()).index()

                            );

                            var title = $(cell).text();

                            if ($(api.column(colIdx).header()).index() >= 0) {

                                if ($(api.column(colIdx).header()).index() == 3) {

                                    $(cell).html('<input type="text" id="ReqDateRead" class="form-control datepicker" placeholder="MM/dd/yyyy" />');

                                }

                                else if ($(api.column(colIdx).header()).index() == 7) {

                                    $(cell).html('<input type="checkbox" class="form-check-input filterCheckbox" name="capex" />');

                                }

                                else if ($(api.column(colIdx).header()).index() == 9) {

                                    $(cell).html('<input type="text" id="lastUpdateDate" class="form-control datepicker" placeholder="MM/dd/yyyy" />');

                                }

                                else {

                                    $(cell).html('<input type="text" class="form-control" style="width:100%" placeholder="Search" />');

                                }

                            }

​

                            // On every keypress in this input

                            $(

                                'input',

                                $('.filters th').eq($(api.column(colIdx).header()).index())

                            )

                                .off('keyup change')

                                .on('change', function (e) {

                                    // Get the search value

                                    $(this).attr('title', $(this).val());

                                    var regexr = '({search})'; //$(this).parents('th').find('select').val();

​

                                    var cursorPosition = this.selectionStart;

                                    // Search the column for that value

                                    api

                                        .column(colIdx)

                                        .search(

                                            this.value != ''

                                                ? regexr.replace('{search}', '(((' + this.value + ')))')

                                                : '',

                                            this.value != '',

                                            this.value == ''

                                        )

                                        .draw();

                                })

                                .on('keyup', function (e) {

                                    e.stopPropagation();

                                    $(this).trigger('change');

                                    $(this)

                                        .focus()[0];

                                    //.setSelectionRange(cursorPosition, cursorPosition);

                                });

                        });

                },

            });

            var dateRangeStart, dateRangeEnd;

​

            $("#main-table_filter").prepend('<div class="filter-date-range-picker"><input class="form-control form-control-sm" id="date_range" type="text" placeholder="Select dates" style="width: 230px; margin-right: 10px;"></div>');

​

            $("#date_range").daterangepicker({

                autoUpdateInput: false,

                locale: {

                    "format": "MM/DD/YYYY",

                    "cancelLabel": "Clear",

                }

            });

​

            $("#date_range").on('apply.daterangepicker', function (ev, picker) {

                dateRangeStart = moment(picker.startDate.format('MM/DD/YYYY'), 'MM/DD/YYYY');

                dateRangeEnd = moment(picker.endDate.format('MM/DD/YYYY'), 'MM/DD/YYYY');

                $(this).val(dateRangeStart.format('MM/DD/YYYY') + ' to ' + dateRangeEnd.format('MM/DD/YYYY'));

​

                $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {

                    let min = dateRangeStart;

                    let max = dateRangeEnd;

                    let date = new Date(data[3]);

​

                    if (

                        (min === null && max === null) ||

                        (min === null && date <= max) ||

                        (min <= date && max === null) ||

                        (min <= date && date <= max)

                    ) {

                        return true;

                    }

                    return false;

​

                });

​

                table.draw();

            });

​

            $("#date_range").on('cancel.daterangepicker', function (ev, picker) {

                dateRangeStart = dateRangeEnd = null;

                $(this).val('');

                table.draw();

            });

​

​

            $('#range').on('change', table.draw);

            $('#range').change();

​

​

​

​

            table.buttons().container()

                .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');

​

​

​

            $(".dataTables_length select").addClass('form-select form-select-sm');

​

            //Set datepicker

            $(".datepicker").datepicker({

                format: 'MM/dd/yyyy'

            });

​

            //Open calander when click on icon.

            $('.date-icon').on('click', function () {

                $('.datepicker').focus();

            });

​

            $('input:checkbox[name="capex"]').on('change', function () {

                //build a regex filter string with an or(|) condition

                var checked = $('input:checkbox[name="capex"]').is(':checked');

                if (checked) {

                    checked = "Yes"

                } else {

                    checked = ""

                }

                table.column(8).search(checked).draw(false);

​

            });

​

            // Order by the grouping

            $('#main-table tbody').on('click', 'tr.group', function () {

                var currentOrder = table.order()[0];

                if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {

                    table.order([groupColumn, 'desc']).draw();

                }

                else {

                    table.order([groupColumn, 'asc']).draw();

                }

            });

​

        });