How to position features around the datatable
How to position features around the datatable
I am using 2.0.7
I would liek to acheive a layout where the following features are layed out :
- print buttons are in the topstart position
- pagination controls are in the topend position
- table information is in the bottomstart
- nothing is in the bottomend
After many combinations of using the layout parametere are initialisation I am nearly there - but no matter what I do I cannot get the pagination controls to be in the topend positon. The appear below the table information data in the bottomstart position.
Can anyone spot what I have done wrong / mis-understanding in my initialisation code :
table = $('#visitorTable').DataTable( {
searching: false,
layout: {
topStart: null,
topEnd: 'paging',
bottomStart: 'info',
bottomEnd: null
},
dom: 'Bfrtip',
buttons: [
'print','pdf', 'excel'
],
"data": [],
"columns": columns,
pageLength: 8,
"language": {
"emptyTable": "No Visitor Records for the day selected"
},
"oLanguage": {
"sLengthMenu": "Total Visitors : " + visitorList.length
},
"columnDefs":[{targets:0, "visible" : false, render:function(data){ return data }},
{targets:[1,2,3,4], render:function(data){ return data }},
{targets:5, render:function(data){ return data.substring(data.indexOf('-')+1)}}
],
"order": [[0,"asc"]]
});
This question has an accepted answers - jump to answer
Answers
The problem is you are using both
layout
anddom
. They are competing methods to layout the Datatables elements. With Datatables 2.x the preferred method is to uselayout
. Something like this:https://live.datatables.net/vajarunu/1/edit
Kevin
Thank You Kevin.
Remving the DOM reference and going all in solved the issue.