yadcf, trouble when datatable is load

omsalam

Hi,
I try to use yadcf plug-in to add complex filter in my datatable.
I've a trouble : when the datatable is fully loaded, the form of yadcf disaperd.

When datatable is loading:
http://image.noelshack.com/fichiers/2014/33/1408277260-capturer.png

When datatble is load :
http://image.noelshack.com/fichiers/2014/33/1408277265-capturer2.png

I dont understand why ...
This is my source code :

    $(document).ready(function() {
        var oTable;

        $('#example tfoot th').each( function () {
            var title = $('#example thead th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" placeholder="Recherche '+title+'" />' );
        } );

        oTable = $('#example').DataTable( {
            "autoWidth": true,
            "processing": true,
            "serverSide": false,
            "deferRender": true,
            "paginationType": "full_numbers",
            "jQueryUI": true,
            "scrollY": "400",
            "scrollX": "90%",       
            "scrollCollapse": true,
            "ajax": "./server_processingALL.php",
            "sDom": '<"H"lfr>Wt<"F"ip><"#tools"T>',
            "oTableTools": {
                "sSwfPath": "./tools/copy_csv_xls_pdf.swf",
                "aButtons": [
                    "xls"
                ]
            },
            "createdRow": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                if ( aData[7] == "1")
                {
                     $('td', nRow).eq(7).addClass('green');
                     $('td', nRow).eq(7).html('Déjà Capitalisé');
                } 
                else if ( aData[7] == "0")
                {
                     $('td', nRow).eq(7).addClass('red');
                     $('td', nRow).eq(7).html('ATFN');
                } 
                else if ( aData[7] == "2")
                {
                     $('td', nRow).eq(7).addClass('orange');
                     $('td', nRow).eq(7).html('En cours traitement');
                }
                else if ( aData[7] == "3")
                {
                     $('td', nRow).eq(7).addClass('greenlight');
                     $('td', nRow).eq(7).html('PAS Fiche Nav');
                }
                else if ( aData[7] == "4")
                {
                     $('td', nRow).eq(7).addClass('yellow');
                     $('td', nRow).eq(7).html('Montée d\'indice');
                }

                $('td:eq(6)', nRow).addClass("numero_totr");
            },
            "aLengthMenu": [[15,25, 50, 75, 100, 200, 500], [15,25, 50, 75, 100, 200, 500]],
            "iDisplayLength": 15
        } );

        //$('#container').css( 'display', 'block' );
        //oTable.columns.adjust().draw();

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

        // AFFICHER CACHER COLONNE
        var colvis = new $.fn.dataTable.ColVis( oTable );    
        $( colvis.button() ).insertAfter('div.info');

        // CHANGER ORDRE COL0NNE
        // new $.fn.dataTable.ColReorder( oTable );


        yadcf.init(oTable, [{
            column_number: 0
        }]);

Thank for your help !

daniel_r

yadcf does not support the scrollY/scrollX (there is an open issue for that https://github.com/vedmack/yadcf/issues/43) see if it works if you remove the

"scrollY": "400",
"scrollX": "90%",  

b.t.w I see that you mix old style api (Hungarian notation) with the new style (capital "D") which I'm not so sure how healthy...

omsalam

OK,

So i use "filter_container_id" property to display my filter outside the tab.
It's resolve my problem.

Thank you for your help.

daniel_r

cool, I recommend you to use the latest 0.8.3.beta.6 version (grab it from here https://github.com/vedmack/yadcf/tree/master/lab) it has a fix for the filter_container_id & range filters combination

omsalam

Ok i'll try this version.

BTW : yadcf is a realy great plug-in !
thank for your job !

daniel_r

You are welcome :)