initComplete not working ?

mohsinarif10

below is my code i load data from model. in MVC but filter is not showing in data table

<script>
    $(document).ready(function () {       
        var table = $('#tableReport').DataTable({
            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
            },
            'columnDefs': [
                {
                    'targets': 0,
                    'checkboxes': {
                        'selectRow': true
                    }
                }
            ],
            'select': {
                'style': 'multi'
            },
            'order': [[1, 'asc']]
        });

        // Handle form submission event
        $('#frm-Report').on('submit', function (e) {
            var form = this;
            var arr = new Array();

            var ReportID = $("#ReportId").val();
            var DateFrom = $('#startDate').val();
            var DateTo = $('#endDate').val();
            var start = new Date(DateFrom);
            var end = new Date(DateTo);

            if (start <= end) {
                var rows_selected = table.column(0).checkboxes.selected();

                if (rows_selected.length == 0) {
                    SendNotif("Ooopss!", "No User is Selected", 'error');
                    return false;
                }

                // Iterate over all selected checkboxes
                $.each(rows_selected, function (index, rowId) {
                    // Create a hidden element
                    arr.push(rowId);
                    $(form).append(
                        $('<input>')
                            .attr('type', 'hidden')
                            .attr('name', 'id[]')

                            .val(rowId)
                    );
                });
                $(".se-pre-con").fadeIn("slow");


                if (document.location.pathname.includes("Reports")) {
                    FormSubmitReport(arr, DateFrom, DateTo, ReportID);
                }
                else {
                    FormSubmitGenrate(arr, DateFrom, DateTo);
                }
            }
            else {
                SendNotif('Error!', 'Invalid Date Range', 'error');
            }
            // Prevent actual form submission
            e.preventDefault();
        });

        function FormSubmitReport(arr, DateFrom, DateTo, ReportID) {

            window.location = '/Report/Generate?data=' + arr + '?' + DateFrom + '?' + DateTo + '?' + ReportID;


        }

        function FormSubmitGenrate(arr, DateFrom, DateTo) {

            window.location = '/Adjustment/Generate?data=' + arr + '?' + DateFrom + '?' + DateTo;


        }
    });


</script>

kthorngren

Does your HTML table have a footer? If not you will need to create one for the above code to appendTo().

Kevin