Displaying multiple options above the table
Displaying multiple options above the table
kwhall86
Posts: 3Questions: 1Answers: 0
I am very new to web development and need some help.
I want to provide the ability to export my table and print, while also display the option to change the number of rows per page. The problem is that my buttons are being displayed on top of my drop down menu.
<script>
$(document).ready(function () {
$('#monthly').DataTable({
"iDisplayLength": 25,
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
dom: 'Bfrtip',
buttons: ['print', 'excelHtml5', 'csvHtml5'],
responsive: {
details: {
display: $.fn.dataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return 'Details for ' + data[0] + ' ' + data[1];
}
}),
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'table'
})
}
}
});
})
</script>
Thanks in advance for any help you can provide!
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
I think you need to add the length input option (
l
) to your config. For example:dom: 'Blfrtip'
.https://datatables.net/reference/option/dom
Kevin
Thanks. That seems to do the trick, but now the buttons and drop down menu have moved to what looks like one row above my search feature. See attached PNG file of a screen shot.
I am importing the following (I got these from this website's demos):
Since you are using Bootstrap you might need to change your
dom
options to this:https://datatables.net/reference/option/dom#Styling
Optionally you can use Bootstrap style buttons by changing your CSS and adding the DT bootstrap JS as described here:
https://datatables.net/manual/styling/bootstrap
https://datatables.net/extensions/buttons/examples/styling/bootstrap.html
Kevin
Thanks for helping a noob out!