Use 'Index Column' and 'Column Filters' features together

charithalkml

I am new to web development. Can someone tell me how to use following features together?
I tried to do it but only one feature got worked for me.

https://datatables.net/examples/api/counter_columns.html
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

kthorngren

The best way for us to help is for you to provide a test case so we can see what you are doing. Otherwise its difficult for us to guess what problem you are having.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

charithalkml

Hi Kevin,
Thank you very much. I will follow that way next time.
I have fixed the issue for now. Following code worked for me successfully.

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#OrdersTable thead tr').clone(true).appendTo( '#OrdersTable thead' );
    $('#OrdersTable thead tr:eq(1) th').each( function (i) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
 
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );
 
    var table = $('#OrdersTable').DataTable( {
        orderCellsTop: true,
        fixedHeader: {
            header: true,
            footer: true
        },    
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0
        } ],
        "order": [[ 1, 'asc' ]]
    } );
 
    table.on( 'order.dt search.dt', function () {
        table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
} );