Problem displaying buttons with Foundation

Problem displaying buttons with Foundation

KeepMovingKeepMoving Posts: 28Questions: 7Answers: 0

I have all my foundation scripts added properly and the Editor buttons and were working fine with the "dom" option.

dom:"Bftrip"

But now I've added this lines to append the foundation columns.

        new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ] );
        table.buttons().container()
        .appendTo( $('.small-6.columns:eq(0)', table.table().container() ) );
} );

And the columns are working but the buttons has dissapeared.
Any Idea why?

Here is my initialization of Datatable

 var editor;
            $(document).ready(function(){
                editor = new $.fn.dataTable.Editor({  
                    ajax:"scripts/r_Estudios.php",
                    table:"#estudios",  
                    fields:[{
                        label:"Clave",
                        name:"ClaveEstudio"
                },
                    {
                        label:"Nombre",
                        name:"Nombre"
                }
                    ] 
            });
            
         var table= $("#estudios").DataTable({ 
                lengthChange: false, 
                "language":{
                    "url": "./lenguaje/spanish.json"
                },
                ajax:"scripts/r_Estudios.php",
                columns:[{data:"ClaveEstudio"},{data:"Nombre"}],
                select:true
           } );
        new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ] );
        table.buttons().container()
        .appendTo( $('.small-6.columns:eq(0)', table.table().container() ) );
} );

Also the html

    <div class="container">
        <section>
            <h1>Alta Estudios</h1>
        <div class="row">
            <div class="small-8 columns">
            <table id="estudios" class="display" cellspacing="0" width="100%">
                <thead>
                <tr>
                           <th>Clave Estudio</th>
                           <th>Nombre estudio</th>
                    </tr>
                </thead>
            </table>
            </div>
         </div>
        </section>
    </div>

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,876Questions: 1Answers: 10,529 Site admin
    Answer ✓

    Could you try moving the appendTo line(s) into a initComplete function please? The problem is that the Ajax load makes the table async in its initialisation.

    Allan

This discussion has been closed.