get the [Copy], [Excel], [CSV], [PDF], [Print] buttons at the top
get the [Copy], [Excel], [CSV], [PDF], [Print] buttons at the top
Hi Guys,
Thanks for helping me with my questions in the how to use the live.datatables post. It has become my proving ground before I try things in my local code.
I purchased the editor for datatables. Now I have question that I couldn't figure out from searching the forum. How do I get [Copy], [Excel], [CSV], [PDF], [Print] buttons to show up at the top of the table?
http://live.datatables.net/zoyolene/2/edit
Thank you for any insight on what I should read.
This question has an accepted answers - jump to answer
Answers
Hi @kenrights ,
There's two thing missing in your code - both demonstrated in the example here.
dom
to haveB
to display buttons.Cheers,
Colin
Hey Colin, Thanks for helping out. I knew about the 'B' requirement to the dom Option from reading posts. Currently, the 'B' has been removed because adding it removes search, information and pagination. Ouch!
I also assumed I had to add a library to the html which I did:
Are those the correct libraries? Perhaps the wrong order?
Beyond the above, after reviewing that dom page a few times, the need for specific CSS/JS files wasn't jumping out to me. It is probably there, I just can't figure out where it discusses those files.
Also, if anyone can point me to a post or blog that discusses the dom option and its many options, I'd be grateful. I'd like to understand what syntax like this
"dom": '<"top"i>rt<"bottom"flp><"clear">'
is doing.Sounds strange. Do you have something like
dom: "Bftirp
?They are in the wrong order. The editor.js relies on datatables.js being loaded first. Take a look at the basic example to see what is needed and the order:
https://editor.datatables.net/examples/simple/simple.html
I would recommend using the Download Builder to generate the files. They should also be in the correct order and you will be able to see and get the additional files needed for the various types of buttons.
This allows for adding classes to the different areas where the Datatables elements are placed. You can define how these classes look like maybe background color, etc. This page may help explain the clear class:
https://css-tricks.com/the-how-and-why-of-clearing-floats/
My guess is the
clear
is to make sure there are no other elements next to the last Datatables element (paging) in this case.Kevin
I agree, the js libraries I'm loading are the problem. I'm testing with live.datatables.net, where these js and css files are loaded by default:
As you can see from the live.datatables.net link at the top, these libraries are loaded below the above js and css files:
Yes, I used the Download Builder for my local install and it worked great. In fact the buttons appear. I just can't figure out how to get them to appear on live.datatables.net.
Sorry, I misread the content of the JS and CSS files you listed. Maybe you can post a link to the live.datatables.net test case you are building so we can help.
You can also use the Downlaod Builder CDN and replace the appropriate defaults that come with live.datatables.net.
Kevin
Sorry, just realized you posted the test case link. When I add the 'B' to the DOM option I see this error in the browser's console:
Uncaught Unknown button type: print
That is a default button when you don't specify the buttons. For it to show you need to add the
Print view
include files or specify the buttons you want, like copy, excel, etc. I added the copy button and thebuttons.html5.min.js
include.Here is the updated example:
http://live.datatables.net/zoyolene/4/edit
Kevin
Thank you Kevin. We are definitely getting closer. I added 'B' to the dom opton and I see that error in the console:
Uncaught Unknown button type: print
. From what I can see, you made 3 changes:1: You loaded another js library in the HTML:
I had already used the [Add Library] menu to add these lines:
But, it wasn't enough? Somehow you knew to add:
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.4/js/buttons.html5.min.js"></script>
You knew that from experience? How come adding "Buttons - nightly" from the [Add Library] menu didn't load this for me?
2: In the js, you added
B
to the dom option:dom: 'fip'
becamedom: 'Bfip'
3: At the bottom of the js, you added:
buttons: ['copy']
. It all worked and I'm grateful.Then, I wanted to add more buttons like we see in this example. So, I tried adding more buttons:
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
It broke. I played with it awhile and was able to get the
'csv'
to stick but, not the other buttons, 'excel', 'pdf', 'print'
. I assume I need to add another library. I went to the browser console to look for errors and didn't find any. How does a newbie figure out what modules to load? In my local install, all buttons show up and I don't have to load extra modules.Correct.
The Add Library option provides the base buttons. You can then add any of the options you would like.
Depending on the buttons you want you will need to use additional include files. This doc explains what is needed:
https://datatables.net/extensions/buttons/built-in
You can review the examples and see what is needed by looking at the Javascript and CSS tabs. This is true regarding examples for any of the extensions and any styling options.
You can use the Download Builder to see what options are needed and by selecting them you can package up the needed include files. For example you need to include the HTML5 export option if you want HTML5 buttons, you will need JSZip for Excel, etc.
Its possible you have "Concatenated" the files into one download file. If you open the download datatable.js for example you might see that it indicates all the included libraries.
The good thing about Datatables is there are a lot of options and flexibility for using resulting in awesome web pages. It took me a long time to get through the initial learning curve and figure out where things are in the docs, etc. You'll get there
Kevin
Okay, thank you. Yes, In my local install I "Concatenated" the files because I didn't know what I was going to need.
Regardless, that link you gave me above was helpful. I still struggled with it as the descriptions don't just say "use this URL" which would be nice. So, I went back to this other live.datatables.net example and started copying js libraries that looked like they might help make it work in my live.datatables.net project. Low and behold, I heard church bells and buttons appeared.
I fear that my "try this" method that I'm using isn't sustainable if I really want to learn how this software works. Like you said, it takes time to learn. I'm taking notes and commenting my code.
BTW: That link you gave me also lead me to learn about the collection option. Which rocks because I'm designing for mobile and all those buttons across the top of a phone would not look very pretty. Thank you!