How to position features around the datatable

How to position features around the datatable

LindsayLindsay Posts: 5Questions: 2Answers: 0

I am using 2.0.7

I would liek to acheive a layout where the following features are layed out :

  1. print buttons are in the topstart position
  2. pagination controls are in the topend position
  3. table information is in the bottomstart
  4. 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

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951
    Answer ✓

    The problem is you are using both layout and dom. They are competing methods to layout the Datatables elements. With Datatables 2.x the preferred method is to use layout. Something like this:
    https://live.datatables.net/vajarunu/1/edit

    Kevin

  • LindsayLindsay Posts: 5Questions: 2Answers: 0

    Thank You Kevin.

    Remving the DOM reference and going all in solved the issue.

Sign In or Register to comment.