Problem displaying buttons with Foundation
Problem displaying buttons with Foundation
KeepMoving
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
This discussion has been closed.
Answers
Could you try moving the
appendTo
line(s) into ainitComplete
function please? The problem is that the Ajax load makes the table async in its initialisation.Allan