Wehn Scroller is enabled, Individual search is not

malxxx

Good day wonderful people of the datatables community,

So far I am really getting the hang of using datatables. However there is a problem I am facing: a requirement is that scroller must be activated along with the filter per column">filter per column
feature of datatables.

But when I activate the scroller, the Individual filter vanishes. Is there an alternative to the given example? or is there something I have tochange?

Thank you very much

`    /*Initialize*/
    $(document).ready(function () {

        /*jQuery datatables output the JSON from URL.*/
        var tbl = $('#tblUserAccountsManagement').DataTable({
            ajax: {

                url: "AccountsManagementJSON.aspx",
                dataSrc: "",
                mDataProp: ""
            },
            aoColumns: [
                { //data: 'UserName',
                    mData: 'UserName'
                },
                { mData: 'UserRoleCode' },
                { mData: 'IsActive' },
                { mData: 'FullName' },
                { mData: 'Email' },
                { mData: 'Company' },
                { mData: 'TIN' },
                { mData: 'SSS' },
                { mData: 'Address1' },
                { mData: 'Address2' },
                { mData: 'Address3' }
            ],
            autofill: true,
            order: [[0, 'asc']],
            select: true,
            responsive: true,
            buttons: true,
            length: 10,
            /*exporting */
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'],
            /*load items as user scrolls. (SEARCH PER COLUMN WILL NOT WORK)
            scrollY: 200,
            deferRender: true,
            scroller: true
            */
        });
         //add timer to refresh datatable
        setInterval(function () {
            tbl.ajax.reload(null, false);
        }, 10000);//10 seconds

        /*add a search per column feature*/
        // Setup - add a text input to each header cell
        $('#tblUserAccountsManagement thead th').each(function () {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Src ' + title + '" />');
        });
        tbl.columns().every(function () {
            var that = this;
            $('input', this.header()).on('keyup change', function () {
                if (that.search() !== this.value) {
                    that
                        .search(this.value)
                        .draw();
                }
            });
        });`

malxxx

Please uncomment scrollY:200, deferRender and scroller to reproduce the error

malxxx

Solved the error, just have to place the setup exactly before the datatables declaration