How to place Column Filter on the Top with Vertical Scroll

vinx1127

Hi Guys,

Initially, I have a working DataTables where my column filters were placed on top/header which is fine (Vertical Scroll is disabled).

But then, If I enabled the vertical scroll then my column filters were being placed on the footer. How can I place the filter on the header? Also, the horizontal scroll is showing up, even if i set the scrollX to false, i still have the same issue. How could i fix it?

var oTable = $('#PreSubmissiontable').DataTable({
        "processing": true,
        "serverSide": false,
        "scrollY": "500px",
        "scrollCollapse": true,
        "bFilter": true,
        "autoWidth": false,
        "bPaginate": false,
        "dom": 'T<"clear">lfrtip',
        //"scrollX": false,
        "tableTools": {
            "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf",
            "sRowSelect": "single",
            "aButtons": []
        },
        "ajax": {
            "url": "Handlers/GetWelcomeExclusiveAccountPLList.ashx",
            "type": "POST",
         
            "data": {
                "businessAreaId": $.session.get('businessAreaId')
                     
            }
        
        },
        "columns": [
        {
            "data": "pLAccountPromotionID"
        },
        {
            "data": "accountName"
        },
        {
            "data": "raisedBy"
        }
        
        ],
        initComplete: function () {
            var r = $('#PreSubmissiontable tfoot tr');
            r.find('th').each(function () {
                $(this).css('padding', 8);
            });
            $('#PreSubmissiontable thead').append(r);
            $('#search_0').css('text-align', 'center');
        }
    });
    // Apply the search
    oTable.columns().eq(0).each(function (colIdx) {
        $('input', oTable.column(colIdx).footer()).on('keyup change', function () {
            oTable.column(colIdx).search(this.value).draw();
        });
    });
    $('#PreSubmissiontable_filter').css('display', 'none');

Many thanks.

vinx1127

Any help on this guys? :)

jLinux

I just used the YADCF plugin, created by @daniel_r

I just tested it out with the vertical scroll, works like a charm. Just place the filters in another thead

http://d.pr/i/1bM44

P.S. Ive tried a few DT plugins, this is definitely the most stable and configurable, pretty much anything I wanted it to do, it could do, great plugin

daniel_r

Thanks @jLinux , yadcf support scrollX scrollY out of the box , see showcase sample1 / sample2

jLinux

You're welcome @daniel_r

@vinx1127, I recommend you phase out the TableTools extension and implement the new extensions that have been created (Specifically the Buttons Extension), much better, more stable, more dynamic, and some new features/extensions