Fixed header column is not working

Dorababu

I have a filter header with input elements where I applied fixed header column which didn't worked. I am getting the data from server side. Posting the code of mine

var table;
`table = $('#EventGrid').DataTable({
"pagingType": "full_numbers",
"orderCellsTop": true,
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
fixedColumns: true,
retrieve: true,
"fixedHeader": true,
"processing": true, // for show progress bar
"serverSide": true, // for process server side
// "orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/Reportable/ReportableGridData",
"data": { showAll: true, startDt: $("#eventFromDate").val(), endDt: $("#eventTodate").val() },
"type": "POST",
"datatype": "json"
},
"columns": [
{
"data": "Event", "name": "Event",
"render": function (data, type, row, meta) {
if (type === 'display') {
data = "<a href='/Reportable/ReportableEventDetail?IsReport=1&ReportableEventId="
+ row.ReportableEventId + "'>" + data.replace(/^(\w+)/, '<strong>$1</strong>') + "</a>";
}
return data;
}
},
{ "data": "VesselName", "name": "VesselName", "autoWidth": true },
{ "data": "VesselType", "name": "VesselType", "autoWidth": true },
{ "data": "EventType", "name": "EventType", "autoWidth": true },
{
"data": "EventDate", "name": "EventDate", "autoWidth": true,
"render": function (data) {
if (data === null) return "";
var pattern = /Date(([^)]+))/;//date format from server side
var results = pattern.exec(data);
var date = new Date(parseFloat(results[1]));
var month = date.getMonth();
// return (month.toString().length > 1 ? month : "0" + month) + "-" + date.getDate() + "-" + date.getFullYear();
return date.getDate() + "-" + (MonthNames[month]) + "-" + date.getFullYear();
}
},
{ "data": "Severity", "name": "Severity", "autoWidth": true },
{ "data": "Status", "name": "Status", "autoWidth": true },
{ "data": "Assignee", "name": "Assignee", "autoWidth": true },
{ "data": "Flag", "name": "Flag", "autoWidth": true },
{
"data": "BriefDescription", "name": "BriefDescription", "autoWidth": true,
"render": function (data) {
if (data === null) return "";

                    return '<span class=description>' + data + '</span>';
                }
            }
        ],
        initComplete: function () {
            $("#EventGrid tbody").on("click", "tr a", function (e) {
                showSpinner();
            });
            var api = this.api();
            var title = '';
            // Setup - add a text input to each header cell
            if (table.data().count() > 0) {
                $("#EventGrid .filters").show();
                $("#EventGrid_paginate").show();
                $("#EventGrid_length").show();
                $('.filterhead', api.table().header()).each(function (index) {
                    if (index > 0 && index !== 4) {
                        title = $(this).text();
                        $(this).html('<input type="text" id= "filter_' + title.replace(/ /g, '') + '"placeholder="Search ' + title + '" class="column_search" />');
                    }
                    else if (index === 4) {
                        var _gotoToday = $.datepicker._gotoToday;
                        $.datepicker._gotoToday = function (id) {
                            _gotoToday.call(this, id);
                            var target = $(id),
                                inst = this._getInst(target[0]);
                            this._selectDate(id, this._formatDate(inst,
                                inst.selectedDay, inst.drawMonth, inst.drawYear));
                        }
                        title = $(this).text();
                        $(this).html('<input type="text" readonly="true" id="datepicker" placeholder="Search ' + title + '" class="column_search" />');
                        $("#datepicker").datepicker({
                            changeMonth: true,
                            dateFormat: 'dd-M-yy',
                            changeYear: true,
                            yearRange: "-100:+0",
                            showOtherMonths: true,
                            showButtonPanel: true,
                            closeText: 'Clear', // Text to show for "close" button
                            onClose: function (dateText, inst) {
                                if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
                                    document.getElementById(this.id).value = '';
                                    table
                                        .column($(this).parent().index())
                                        .search(this.value)
                                        .draw();
                                }
                            },
                            showOtherMonths: true,
                            showOn: "button",
                            buttonImageOnly: true,
                            buttonText: "Select date",
                            selectOtherMonths: true
                        });
                    }
                });

                api.columns.adjust();
            }
            else {
                $("#EventGrid .filters").hide();
                $("#EventGrid_paginate").hide();
                $("#EventGrid_length").hide();
            }
        }
    });`

allan

Can you link to a test case showing the issue please?

Allan