get the [Copy], [Excel], [CSV], [PDF], [Print] buttons at the top

kenrights

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.

colin

Hi @kenrights ,

There's two thing missing in your code - both demonstrated in the example here.

1. you need dom to have B to display buttons.
2. missing JS/CSS files - see the list of necessary files in the "Javascript" and "CSS" tabs on that link above.

Cheers,

Colin

kenrights

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:

<!-- Editor -->
<link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<!-- Buttons -->
<link href="https://nightly.datatables.net/buttons/css/buttons.dataTables.css?_=c6b24f8a56e04fcee6105a02f4027462.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/buttons/js/dataTables.buttons.js?_=c6b24f8a56e04fcee6105a02f4027462"></script>
     

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.

kthorngren

Currently, the 'B' has been removed because adding it removes search, information and pagination.

Sounds strange. Do you have something like dom: "Bftirp?

Are those the correct libraries? Perhaps the wrong order?

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.

"dom": '<"top"i>rt<"bottom"flp><"clear">'

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

kenrights

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:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

As you can see from the live.datatables.net link at the top, these libraries are loaded below the above js and css files:

<!-- Editor -->
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
    <script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<!-- Buttons -->
    <link href="https://nightly.datatables.net/buttons/css/buttons.dataTables.css?_=c6b24f8a56e04fcee6105a02f4027462.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/buttons/js/dataTables.buttons.js?_=c6b24f8a56e04fcee6105a02f4027462"></script>

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.

kthorngren

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

kthorngren

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 the buttons.html5.min.js include.

Here is the updated example:
http://live.datatables.net/zoyolene/4/edit

Kevin

kenrights

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:

<!-- Buttons -->
    <link href="https://nightly.datatables.net/buttons/css/buttons.dataTables.css?_=c6b24f8a56e04fcee6105a02f4027462.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/buttons/js/dataTables.buttons.js?_=c6b24f8a56e04fcee6105a02f4027462"></script>

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' became dom: '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.

kthorngren

From what I can see, you made 3 changes

Correct.

How come adding "Buttons - nightly" from the [Add Library] menu didn't load this for me?

The Add Library option provides the base buttons. You can then add any of the options you would like.

How does a newbie figure out what modules to load?

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.

In my local install, all buttons show up and I don't have to load extra modules

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

kenrights

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!