individual column searching not working with scrollX = true

alfred.angkasa

Hi, i have a problem regarding the individual searching with scrollX = true.

if i comment scrollX = true, the individualSearch is working.

` $(document).ready(function() {
// Setup - add a text input to each footer cell

        $('#dataTable thead tr:eq(1) th').each( function (i) {
            var title = $('#dataTable thead tr:eq(0) th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" data-index="'+i+'" />' );
        } );

        var dataTable = $('#dataTable').DataTable( {
            "processing": true,
            "scrollX": true,
            "fixedColumns" : true,
            "orderCellsTop" : true,
            "language": {
                "processing": "Hang on. Waiting for response..." //add a loading image,simply putting <img src="loader.gif" /> tag.
            },
            "serverSide": true,
            "ajax":{
                url :"server_processing.php", // json datasource
                type: "post",  // method  , by default get
                error: function(){  // error handling
                    $(".dataTable-error").html("");
                    $("#dataTable").append('<tbody class="dataTable-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                    $("#dataTable_processing").css("display","none");

                }

            },
            initComplete: function() {
                var api = this.api();

                // Apply the search
                api.columns().every(function(index) {
                    var that = this;

                    $('#dataTable thead tr:eq(1) th:eq(' + index + ') input', this.table().container() ).on( 'keyup change', function () {
                        alert("A");
                        if (that.search() !== this.value) 
                        {
                            that.column($(this).parent().index() + ':visible')
                            .search(this.value)
                            .draw();
                        }
                    } );


                });
            }
        } );
    } );`

any clue / help to solve this?

alfred.angkasa

Hi, Please close this discussion.

I figured it out by this url
1. https://github.com/DataTables/FixedColumns/commit/c0d9bca088a3b79e947454042981e35cb79d8be2?diff=split

1. https://bubt.edu.bd/assets/backend/DataTables-1.10.13/DataTables-1.10.13/extensions/FixedColumns/examples/styling/col_filter.html

   I just need to change the initComplete into
   `$(this.table().container() ).on( 'keyup', 'thead input', function () {
   {

                           that.column( $(this).data('index') )
                               .search( this.value )
                               .draw();
                       }
                   } );`
   

and done.