Adding Excel export button hides/removes the Page Length Dropdown

SKC

I have just started using the Data Tables.
The Page Length Dropdown comes by default while implementing the DataTable.
Recently I added the Excel Button (export feature).
The issue is that adding this button hides/removes the Page Length Dropdown.

Is there a way where we can display both the features (i.e. the button and the dropdown) as I want to implement both of this feature?
Would changing the location of these controls solve the issue and how?

Here's my sample JS code :

$('#example).DataTable(
         {
             responsive: true,

             "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],     // page length options
             
             dom: 'bfrtip',             
              buttons: ['excel']
         });

Thank You.

SKC

I've just referred the following link :
https://datatables.net/extensions/buttons/examples/initialisation/pageLength.html

I've made following changes to the code :

$('#example).DataTable(
 {
 responsive: true,

    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],     // page length options
     
        "scrollY": 200,
        "scrollX": true,   // enables horizontal scrolling
   
        dom: 'bfrtip',             

       buttons: ['excel', 'pageLength']

}); 

But I don't know why but it doesn't work. Instead it hides the Page-Length drop-down element completely.

allan

dom: 'bfrtip',

Should be:

dom: 'Bfrtip',      

Capital B for Buttons (plug-ins use capitals).

Allan

SKC

I had tried the same.
But it doesn't work.

My code is in Capture.PNG and
the output in Capture2

Here's the link to Debugger : debug.datatables.net/orajaw

Could it be due to missing references to libraries (although I'm sure I've used each of them)?

tangerine

Could it be due to missing references to libraries

Your debug shows "Buttons Not installed".

SKC

I had used the following libraries ( I've attached the screenshots)

I had used the references for button libraries for both JS and CSS.

What am I doing wrong?

SKC

I just visited the following link :
https://datatables.net/extensions/colvis/

I want to know how can I move my Excel Button on top of search button (I think it might solve the problem of drop-down being hidden unnecessarily)

allan

ColVis is legacy as its documentation notes. I would suggest against using it. Use Buttons instead.

Use the dom option to move where the buttons are inserted into the document.

Allan

SKC

Ok got it.
But can you tell me what's wrong with my existing code?

allan

Not really since i don't know what your code is . All I can really say is that you would need to use dom to position the elements correctly in the DOM and then use CSS to lay them out as you want.

Allan

SKC

Thanks Allan.

I want the Pagelength and Excel side-by-side to each other.
Can you show me how the code should look like.

This is how my code looks like currently :

 $('#searchResult').DataTable(
         {
             responsive: true,
  
             "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],     // page length options

             "dom": 'Bfrtip',
             "buttons": ['excel','pageLength'],    // adds the excel button
           }

But it doesn't seems to work.
BTW I have enabled server-side processing. Could it be causing the issue?

allan

BTW I have enabled server-side processing. Could it be causing the issue?

No. Although with server-side processing that would only allow the visible rows to be exported.

The code above looks fine. Have you included the JSZip and buttons.html5.js files? I'd need a test case showing the issue to say much more than that.

Allan

SKC

I had already attached a screenshot of the libraries which I've implemented in one of the comments above( Nov 16) Capture3.PNG

SKC

Currently I've solved my issue by moving the length drop-down at the bottom and placing the excel button at the top.

"dom": '<"top"Bf>rt<"bottom"lip><"clear">'

But my original need is to display them side-by-side to each other at the top

allan

As far as I can tell from the above, they should be shown together, side-by-side. I would need a link to the page showing the issue to be able to inspect the CSS and understand why that is not the case here.

Allan

iafconsulting

"dom": 'Blfrtip',

girishkolte2000

dom: 'lBfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]