Adding Excel export button hides/removes the Page Length Dropdown
Adding Excel export button hides/removes the Page Length Dropdown
SKC
Posts: 33Questions: 10Answers: 0
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.
This discussion has been closed.
Answers
I've just referred the following link :
https://datatables.net/extensions/buttons/examples/initialisation/pageLength.html
I've made following changes to the code :
But I don't know why but it doesn't work. Instead it hides the Page-Length drop-down element completely.
Should be:
Capital
Bfor Buttons (plug-ins use capitals).Allan
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)?
Your debug shows "Buttons Not installed".
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?
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)
ColVis is legacy as its documentation notes. I would suggest against using it. Use Buttons instead.
Use the
domoption to move where the buttons are inserted into the document.Allan
Ok got it.
But can you tell me what's wrong with my existing code?
Not really since i don't know what your code is
. All I can really say is that you would need to use
domto position the elements correctly in the DOM and then use CSS to lay them out as you want.Allan
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 :
But it doesn't seems to work.
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
I had already attached a screenshot of the libraries which I've implemented in one of the comments above( Nov 16) Capture3.PNG
Currently I've solved my issue by moving the length drop-down at the bottom and placing the excel button at the top.
But my original need is to display them side-by-side to each other at the top
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
"dom": 'Blfrtip',
dom: 'lBfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]