Individual Search Columns not working in Fixed Columns

roipatrick

I have a table and applied a Fixed column on it fixing the first two columns which was successful on my end. In Addition to this, I also applied individual search columns but it seems to work only on the not fixed columns. It does not work on the fixed columns. If you need to see how I copied and reconstructed the JS here's the code.

$(document).ready(function() { $('#example tfoot th').each( function () { var title = $('#example thead th').eq( $(this).index() ).text(); $(this).html( '' ); } ); var table = $('#example').DataTable({ setTimeout: "50", scrollY: "350px", scrollX: true, scrollCollapse: true, paging: false, heightMatch: "auto", columnFilter: true, fixedColumns: { leftColumns: 2 }, }); table.columns().every( function () { var that = this; $( 'input', this.footer() ).on( 'keyup change', function () { that .search( this.value ) .draw(); } ); } ); });

<style type="text/css">
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
width: 1210px;
margin: 0 0 0 0;
}
</style>

Note: To explain it more clear, I have let's say 6 columns and the first two columns (columns 1,2) are freezed/fixed. The indivudual column search works on 3,4,5,6 but not it 1 and 2.

kthorngren

Seems like its a problem with the combination of scrollx and fixheader being enabled.

Kevin

allan

Yes, more specifically, I think it sounds like it might be an event issue. The event isn't being listened for on the cloned fixed tables. Can you link to the page please?

Allan

zubair_shkoor

.

zubair_shkoor

hi allan,
I am also facing the same problem. I want to freeze the first two columns but when I freeze it, individual search doesn't work.
Following is my code.

customerTable = $('#customerTable').DataTable({
"responsive": true,
"paging": true,
"ordering": true,
"info": true,
"searching": true,
"serverSide": true,
"filter": true,
"orderCellsTop": true,
"order": [[0, "desc"]],
"scrollX": true,
"scrollCollapse": true,
fixedColumns: {
leftColumns: 2,
rightColumns: 1
},
"ajax": {
"url": "/Customer/LoadCustomers",
"type": "POST",
"dataType": "json",
"data": function (d) {
d.FirstCustomField = inActive;
d.SecondCustomField = isPotential;
d.ThirdCustomField = customerLookUp;
},
"complete": function () {
DropdownMenuWidth();
DropDownMenuPostion();
}
},
"language": {
"search": "",
"searchPlaceholder": "Search..."
},
'columnDefs': [
{
"aTargets": [7], //indexes of whatever columns you need to format
"mRender": function (data, type, full) {
if (data) {
var mDate = moment(data);
return (mDate && mDate.isValid()) ? mDate.format("L") : "";
}
return "";
}
}
],
initComplete: function () {
debugger;
var api = this.api();
api.columns().every(function (index) {
var that = this;
$('#customerTable thead tr:eq(1) th:eq(' + index + ') input').on('keyup change', function () {
debugger;
//$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value) {
that.search(this.value)
.draw();
}
});
});
},
"columns": [
{ "data": "LastName" },
{ "data": "FirstName" },
{ "data": "Phone1" },
{ "data": "Addr1" },
{ "data": "Addr2" },
{ "data": "City" },
{ "data": "State" },
{ "data": "InactiveDate" },
{ "data": "EmailAddr" },
{ "data": "ZipCode" },
{ "data": "Notes" },
{ "data": "NSF" },
{ "data": "ServiceNotes" },
{ "data": "BillToLastName" },
{ "data": "BillToFirstName" },
{ "data": "BillToAddr1" },
{ "data": "BillToAddr2" },
{ "data": "BillToCity" },
{ "data": "BillToZipCode" },
{ "data": "BillToFax" },
{
"data": "Discount",
render: function (data, type, full, meta) {
return "

" + formatCurrencyDT(data) + "

";
}
},
{
"render": function (data, type, full, meta) {

                if (IsRedirect==="False") {
                    return '<div class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">' +
                        '<i class="material-icons">menu</i></a>' +
                        '<ul class="dropdown-menu pull-left">' +
                        '<li>' +
                        '<a id="btnEdit" class="waves-effect trans-Inv-modal" href="#" onclick="EditScreen(' + full.Id + "," + "'" + sectionName + "'" + ')"' + '>' +
                        '<i class="material-icons">edit</i>Edit</a></li>'
                        + '</ul></div>';    
                }
                else {
                    return '<div class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">' +
                        '<i class="material-icons">menu</i></a>' +
                        '<ul class="dropdown-menu pull-left">' +
                        '<li><a class="waves-effect waves-block" onclick="myFunction('+full.Id +')" ><i class="material-icons">add</i>Sale Order</a></li>'+
                        '</ul></div>';
                }


            },"orderable":false
        }
    ],
    createdRow: function (row, data, dataIndex) {
        // Adding custom dropdown class to action column to adjust padding
        var columnTitle = $(customerTable.column($(row).find('td:last')).header()).html();
        if (columnTitle === constants.Actions) {
            $(row).find('td:last')
                .addClass('dropdown');
        }

    }

});

kthorngren

This example of using column searches with FixedColumns should help:
https://datatables.net/extensions/fixedcolumns/examples/styling/col_filter.html

Kevin

zubair_shkoor

ok thanks.