Can we include search input in header & footer with vertical scroll and not horizontal scrollbars?

mbssan84

I want to create a table with col search and fixed height to show many records in length even.But im not getting it , when i click on the search input its disappearing. got some idea its been reflecting on DOM structure. can anybody help asap??

kthorngren

I took the search input column search example and created a test case with scrollY enabled and it works:

http://live.datatables.net/hopikadu/1/edit

Can you provide a link to your page or a test case showing the issue?

Kevin

mbssan84

And my code for this page is ..!

var table = $('#Localdatatable').DataTable({
order: [[1, "asc"]],
//pageLength: 25,
"iDisplayLength": "5",
"lengthMenu": [[5, 10, 25, -1], [5, 10, 25, "All"]],
//scrollY: '200', //height fixed forscroll,
paginate: true,
dom: 'lBfrtip',
buttons: [
{ extend: 'copy' },
{ extend: 'csv' },
'excel',
'pdf',
//'columnsToggle', //will display beside existing buttons
],
deferRender: true,
scrollY: 200,
scrollX: true,
scrollCollapse: true,
scroller: true

    });
    new $.fn.dataTable.FixedColumns(table, {
        fixedColoumns: {
            rightColoumn: 1
        }
    });jQuery('.dataTable').wrap('');


    //append multi buttons to dataTable method

    var button1 = new $.fn.dataTable.Buttons(table, {
        buttons: ['colvis'],
    }).container().appendTo($('div.col_buttons')).addClass('col-lg-12');

    // Create coloumn search footer
    $('th', table.table().footer()).each(function () {
        var title = $('#Localdatatable thead th').eq($(this).index()).text().trim();
        $(this).html('<input type="text" class="text-box single-line input-fullwidth" placeholder="Search ' + title + '" />');
    });

    // Apply the search
    table.columns().eq(0).each(function (colIdx) {
        $('input', table.column(colIdx).footer()).on('keyup change', function () {
            table
                .column(colIdx)
                .search(this.value)
                .draw();
        });
    });

mbssan84

Thanx Kevin !
Can you go through the screen provided.

And now i'm not able to fix the. DTFS cloned table alignments.struggling past hours.ofcourse new to development. Plz support.

---- included libraries too.---

kthorngren

Without a test case showing the issues its hard to say whats wrong. The display issues are likely CSS issues. Looks like you are using Bootstrap. Make sure you have all the correct Datatables JS and CSS to integrate with Bootstrap. You can use the Download Builder to build the correct set of files.

Kevin