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
layoutanddom. 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.