My Individual column filtering (text inputs) is not working ,i think its colliding with Scroll - H-V

tester1

Hi,

My Individual column filtering (text inputs) is not working , i think its colliding with Scroll - horizontal and vertical

below is my whole code : please help me -- also please add more data if requeried as i am getting "Body too long /"

=========

<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<style type="text/css" class="init">

th, td { white-space: nowrap; }
div.dataTables_wrapper {
    width: 1004px;
    margin: 0 auto;
}

</style>
    <script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">

            $(document).ready(function() {
                    $('#example').dataTable( {
                           "pagingType": "full_numbers",
                           "scrollY": 380,
                           "scrollX": true
                     } );

                    // ----------------show hide cloumn -------------------------

                    var table = $('#example').DataTable();

                    $('a.toggle-vis').on( 'click', function (e) {
                    e.preventDefault();

                    // Get the column API object
                    var column = table.column( $(this).attr('data-column') );

                    // Toggle the visibility
                    column.visible( ! column.visible() );
                    } );


                    // ------------------------- HIGHLIGHT COLOUMN //---------------

                    var lastIdx = null; 

                    $('#example tbody') .on( 'mouseover', 'td', function () {
                            var colIdx = table.cell(this).index().column;

                            if ( colIdx !== lastIdx ) {
                                $( table.cells().nodes() ).removeClass( 'highlight' );
                                $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
                            }
                        } )
                        .on( 'mouseleave', function () {
                            $( table.cells().nodes() ).removeClass( 'highlight' );
                        } );

                    //  end HIGHLIGHT COLOUMN //------

            } );


</script>


    <script>
        $(document).ready(function() {
        // Setup - add a text input to each footer cell
        $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        } );

        // DataTable
        var tableab = $('#example').dataTable( {

                        } );

        // Apply the filter
        $("#example tfoot input").on( 'keyup change', function () {
        tableab
        .column( $(this).parent().index()+':visible' )
        .search( this.value )
        .draw();
        } );
        } );

     </script>   

Toggle column: 1 Column - 2 Column - 3 Column - 4 Column - 5 Column - 6 Column

    <?php br(2);?>

First name	Last name	Position	Office	Age	Start date	Salary	Extn.	E-mail
First name	Last name	Position	Office	Age	Start date	Salary	Extn.	E-mail
Tiger	Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800	5421	t.nixon@datatables.net
Garrett	Winters	Accountant	Tokyo	63	2011/07/25	$170,750	8422	g.winters@datatables.net
Unity	Butler	Marketing Designer	San Francisco	47	2009/12/09	$85,675	5384	u.butler@datatables.net
Howard	Hatfield	Office Manager	San Francisco	51	2008/12/16	$164,500	7031	h.hatfield@datatables.net
Hope	Fuentes	Secretary	San Francisco	41	2010/02/12	$109,850	6318	h.fuentes@datatables.net
Vivian	Harrell	Financial Controller	San Francisco	62	2009/02/14	$452,500	9422	v.harrell@datatables.net
Timothy	Mooney	Office Manager	London	37	2008/12/11	$136,200	7580	t.mooney@datatables.net
Jackson	Bradshaw	Director	New York	65	2008/09/26	$645,750	1042	j.bradshaw@datatables.net
Olivia	Liang	Support Engineer	Singapore	64	2011/02/03	$234,500	2120	o.liang@datatables.net

tester1

anyone here ?...

kqueekquee

i have the same problem here http://live.datatables.net/efuyaj/120/edit
width this line
"scrollY": 400px,
"scrollX": true

tester1

hmm , i think there is some issues in this ... admin should note this and solve this issues asap

chipmaga

Same problem here. Pretty sure its a conflict with scrollY and scrollX since turning off these options fixes it right away.

daniel_r

You can use my yadcf plugin for datatables , it supports both scrollX and scrollY , see it in action showcase sample