How to incorproate Export buttons into the Editor's searchBuilder.html example?

cchintall83

Link to test case: DataTables Editor - searchBuilder .html
Debugger code (debug.datatables.net):
Error messages shown: No errors shown; but the Export buttons do not appear.
Description of problem: I am trying to learn how to install (incorporate) various buttons ( Export - copy, csv, excel, pdf) into the Editor;s SearbBuilder.html example. This is script used which adds the standard CRUD buttons but not the Export buttons.
buttons: [

        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor },
        {
            extend: 'collection',
            text: 'Export',
            buttons: [
                'copy',
                'excel',
                'csv',
                 'pdf',
                 'print'
            ]
        }

    ]

Can anyone provide a solution?
Thanks

allan

Have you loaded buttons.html5.js, pdfmake and jszip? What you have there appears to be correct.

I will however note that Editor's SearchBuilder example uses server-side processing (the reason it is in Editor's examples is because the server-side libraries we provide support server-side processing with SearchBuilder). The Export buttons do not work with server-side processing. They will export the 10 records shown only - not all the others from the other pages.

Don't use server-side processing if you want to use export. How many rows do you have in your table?

Allan

cchintall83

Hello Allan,

buttons.html5.js is loaded. The table is dynamic (connected to a MySQL database) and is expected to grow; however probably less than a few thousand. Since Export buttons do not work with server-side processing,will searchBuilder and Export buttons work with Editor's examples other than server-side processing ones?
Thanks for your response.
John

allan

For less than a thousand rows, disable server-side processing. It isn't needed and won't give you anything in the way of performance improvements.

With SSP disabled, SearchBuilder and export will work fine on the client-side.

I think I'll need a link to your page to determine why the buttons aren't showing up. What you have above appears to be fine.

Allan

cchintall83

Hi Allan,

I changed the serverSide option to false; Export was still not available. Attached is the codepen reference for this table.[https://codepen.io/jchintall2019/pen/PoeqMGQ]

kthorngren

Your test case has errors and doesn't seem to run. It looks like you are including many of the libraries twice. First you have this:

https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.11.5/b-2.2.2/b-html5-2.2.2/b-print-2.2.2/date-1.1.2/sb-1.3.2/sl-1.3.4/datatables.min.js

Followed by individually loading thing like jquery.js, jquery.dataTables.min.js, etc. Open the link to the compiled CDN to see what all is being loaded. You only want to load these libraries once. If you still need help please update the test case to load these once and remove the errors so it runs. You may want to remove the Editor stuff as you can't load it from the codepen environment. Or use the Datatables JS Bin environment so you can load the editor. Start with this example:
http://live.datatables.net/guwafemu/178/edit

Kevin

cchintall83

Hi,
The codepen file only has the searchBuilder.html file. This is the same file found in the Editor examples. This requires the staff.php to run. Even with all the redundant libraries included in the head of the HTML this file produces a table in any browser. The issue is that the Export component does not load.

I removed the redundant libraries. Refer to the attached file.[https://jsfiddle.net/jchintall/c9jv8hmg/1/]

John

kthorngren

Looks like you are just trying to run the example page itself. Why not just try a page with the JS code needed instead of loading all the other HTML you don't need. I took your dom and buttons configs from the jsfiddle and copied into the JS Bin base example I provided - so Editor will work. I used the Download Builder to get all the needed libraries, except Editor. Use the Editor CDN. provided in the JS Bin I linked to.

Here is the running example:
http://live.datatables.net/guwafemu/296/edit

Kevin

allan

Hi John,

A direct copy and paste of the source code for the examples isn't going to work since the resource files aren't all available. It also appears in your example the buttons.html5.js file isn't being loaded.

I've addressed both issues with the changes I've made to your example and put it here: http://live.datatables.net/mebihita/1/edit .

It will give an Ajax error - but that can be ignored since we are just interested in the Buttons here.

I'll see the Copy and CSV export options now that I've included the buttons.html5.js file. The pdfmake and JSZip libraries can be added if you want PDF and Excel export abilities, respectively.

I suggest you use the download builder to make sure you've got all the files you need rather than including them ad-hoc. That way lies madness

Allan

cchintall83

Hello Allan and Kevin,

Thank you for the help. I am essentially a new to programming. For me, in order for this framework to be improved it requires a revamping of the documentation to meet the new user's level of understanding. I hope this critique is taken positively thus allowing anyone using this framework has a smaller barrier for learning this program to create HTML tables. Just a suggestion would be to have a new user establish a series of tutorials. I have experienced, if experts write a tutorial may steps are assumed and not shown in the instructions which are not known to the new programmer. Thus frustrating the new users and perhaps do not invest any time learning this program.

John

allan

Hi John,

Many thanks for the feedback - it is very much appreciated! I need to strike a balance between making the documentation accessible, and actually being able to have the time to write and maintain it. I don't want to write a course for how to get started in Javascript or HTML for example - there are far better resources for that kind of thing (and probably much better teachers ).

One of the issues that you perhaps encountered here, getting the examples to just work on another page, is something I'm aware of - I plan (not sure when yet!) to have a one click button to open up the examples in an editable page. Of course that won't solve everything, particularly as that won't help when using npm, etc, but hopefully it might help a bit.

If you have any specific areas of the docs you struggled with, it would help me a lot of you could point them out so I can improve them.

Thanks,
Allan