Copy, Print buttons with datatables editor

pw27

Hi...

I'm looking to use datatables editor.
Working with the "inline-editing" example (simple.html) I've got what I need, except....

The demo code has buttons defined:

layout: {
    topStart: {
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit', editor: editor },
            { extend: 'remove', editor: editor }
        ]
    }
},

I want to add the datatables print, copy... buttons, plus pagelength etc, usually I would use:

        "pageLength": 25,
    "lengthMenu": [ 15, 25, 50, 75, 100, 500],
    dom: 'Blfrtip',
    buttons: ['copy', 'csv', 'excel', 'pdf', 'print',],

but this doesn't seem to work when added to the example code.

For ref, I also added:

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
Clearly I'm doing something dumb, but I can't see it!

Any advice on how to add the above to the editor inline-editing example code appreciated!

Thanks!

kthorngren

The buttons option is an array of buttons. Combine the export buttons you want with the Editor buttons. See this example. The example uses the buttons collection but you don't have to. You can do something like this:

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

Kevin

pw27

Thanks.. I tried that, but all I get is the editor buttons... The additional ones don't show.
I'm assuming it's either
a- Wrong versions of the script files listed above,
b - Wrong loading sequence.

Tried several approaches but the same result.

If anyone could try adding the feature to simple.html in the examples, I'd appreciate it!

Thanks

allan

Have you included the buttons.html5.js and buttons.print.js files as well? Also for the Excel and PDF export you'll need JSZip and pdfmake, respectively.

The download builder is the best way to make sure you get all the files you need.

Failing that, if you link to a test case showing the issue, I can take a look and see what is going wrong.

Allan

pw27

Thanks...

See above - I do have those loaded, perhaps wrong versions or in the wrong place...

The download builder creates 4 files which don't currently exist in the examples file structure.

I think my problem is related to the queue processing js that loads scripts in the examples which I'm struggling to get me head around!

eg this single code line seems to be the input to the queue (inline-editing/simple.html line 18):

libs: {"targetFramework":"","js":["jquery","datatables","buttons","select","datetime","editor"],"css":["datatables","buttons","select","datetime","editor"],"components":{"datatables":{"css":"https:\/\/cdn.datatables.net\/2.0.2\/css","js":"https:\/\/cdn.datatables.net\/2.0.2\/js","resolve":true},"autofill":{"css":"https:\/\/cdn.datatables.net\/autofill\/2.7.0\/css","js":"https:\/\/cdn.datatables.net\/autofill\/2.7.0\/js","resolve":true},"buttons":{"css":"https:\/\/cdn.datatables.net\/buttons\/3.0.1\/css","js":"https:\/\/cdn.datatables.net\/buttons\/3.0.1\/js","resolve":true},"colreorder":{"css":"https:\/\/cdn.datatables.net\/colreorder\/2.0.0\/css","js":"https:\/\/cdn.datatables.net\/colreorder\/2.0.0\/js","resolve":true},"editor":{"css":"css","js":"js","resolve":true},"fixedcolumns":{"css":"https:\/\/cdn.datatables.net\/fixedcolumns\/5.0.0\/css","js":"https:\/\/cdn.datatables.net\/fixedcolumns\/5.0.0\/js","resolve":true},"fixedheader":{"css":"https:\/\/cdn.datatables.net\/fixedheader\/4.0.1\/css","js":"https:\/\/cdn.datatables.net\/fixedheader\/4.0.1\/js","resolve":true},"keytable":{"css":"https:\/\/cdn.datatables.net\/keytable\/2.12.0\/css","js":"https:\/\/cdn.datatables.net\/keytable\/2.12.0\/js","resolve":true},"responsive":{"css":"https:\/\/cdn.datatables.net\/responsive\/3.0.0\/css","js":"https:\/\/cdn.datatables.net\/responsive\/3.0.0\/js","resolve":true},"rowgroup":{"css":"https:\/\/cdn.datatables.net\/rowgroup\/1.5.0\/css","js":"https:\/\/cdn.datatables.net\/rowgroup\/1.5.0\/js","resolve":true},"rowreorder":{"css":"https:\/\/cdn.datatables.net\/rowreorder\/1.5.0\/css","js":"https:\/\/cdn.datatables.net\/rowreorder\/1.5.0\/js","resolve":true},"scroller":{"css":"https:\/\/cdn.datatables.net\/scroller\/2.4.1\/css","js":"https:\/\/cdn.datatables.net\/scroller\/2.4.1\/js","resolve":true},"select":{"css":"https:\/\/cdn.datatables.net\/select\/2.0.0\/css","js":"https:\/\/cdn.datatables.net\/select\/2.0.0\/js","resolve":true},"searchbuilder":{"css":"https:\/\/cdn.datatables.net\/searchbuilder\/1.7.0\/css","js":"https:\/\/cdn.datatables.net\/searchbuilder\/1.7.0\/js","resolve":true},"searchpanes":{"css":"https:\/\/cdn.datatables.net\/searchpanes\/2.3.0\/css","js":"https:\/\/cdn.datatables.net\/searchpanes\/2.3.0\/js","resolve":true},"staterestore":{"css":"https:\/\/cdn.datatables.net\/staterestore\/1.4.0\/css","js":"https:\/\/cdn.datatables.net\/staterestore\/1.4.0\/js","resolve":true},"datetime":{"css":"https:\/\/cdn.datatables.net\/datetime\/1.5.2\/css\/dataTables.dateTime.min.css","js":"https:\/\/cdn.datatables.net\/datetime\/1.5.2\/js\/dataTables.dateTime.min.js"},"bootstrap":{"css":"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css","js":"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js"},"bootstrap4":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/css\/bootstrap.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.14.3\/umd\/popper.min.js|https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.5.2\/js\/bootstrap.min.js"},"bootstrap5":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/5.3.0\/css\/bootstrap.min.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/5.3.0\/js\/bootstrap.bundle.min.js"},"bulma":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bulma\/0.9.3\/css\/bulma.min.css"},"foundation":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/foundation\/6.4.3\/css\/foundation.min.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/foundation\/6.4.3\/js\/foundation.min.js"},"jqueryui":{"css":"https:\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css","js":"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js"},"material":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/material-components-web\/14.0.0\/material-components-web.min.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/material-components-web\/14.0.0\/material-components-web.min.js"},"semanticui":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fomantic-ui\/2.9.2\/semantic.min.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/fomantic-ui\/2.9.2\/semantic.min.js"},"uikit":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/uikit\/3.0.2\/css\/uikit.min.css","js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/uikit\/3.0.2\/js\/uikit.min.js"},"tailwindcss":{"css":"","js":"https:\/\/cdn.tailwindcss.com"},"font-awesome":{"css":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/4.7.0\/css\/font-awesome.min.css"},"world-flags-sprite":{"css":"https:\/\/cdn.jsdelivr.net\/gh\/lafeber\/world-flags-sprite\/stylesheets\/flags32-both.css"},"demo":{"css":"resources\/demo.css","js":"resources\/demo.js"},"syntax":{"css":"resources\/syntax\/shCore.css","js":"resources\/syntax\/shCore.js"},"buttons-html5":{"js":"https:\/\/cdn.datatables.net\/buttons\/3.0.1\/js\/buttons.html5.min.js"},"buttons-colvis":{"js":"https:\/\/cdn.datatables.net\/buttons\/3.0.1\/js\/buttons.colVis.min.js"},"buttons-print":{"js":"https:\/\/cdn.datatables.net\/buttons\/3.0.1\/js\/buttons.print.min.js"},"jquery":{"js":"https:\/\/code.jquery.com\/jquery-3.7.1.js"},"jszip":{"js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js"},"pdfmake":{"js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdfmake\/0.2.7\/pdfmake.min.js"},"vfsfonts":{"js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/pdfmake\/0.2.7\/vfs_fonts.js"},"moment":{"js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/moment.js\/2.29.2\/moment.min.js"},"luxon":{"js":"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/luxon\/2.3.1\/luxon.min.js"},"sparkline":{"js":"https:\/\/cdn.jsdelivr.net\/gh\/fnando\/sparkline\/dist\/sparkline.js"},"editor-demo":{"js":"resources\/editor-demo.js"}}},
...which is a bit tricky to follow!

I tried to remove the queue builder (demo.js) but that broke things badly!

allan

Wait, you are using my demo.js file to run the scripts?

Scrap that! Use the download builder to give you a few files to include - e.g. (depending on your specific needs, and you'll need to add Editor, or download the files to include Editor):

<link href="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.1.4/b-3.1.1/b-html5-3.1.1/b-print-3.1.1/date-1.5.3/sl-2.0.5/datatables.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.1.4/b-3.1.1/b-html5-3.1.1/b-print-3.1.1/date-1.5.3/sl-2.0.5/datatables.min.js"></script>

You should not use my demo.js file for your own applications. It is very specifically for running the examples on this site and the options for those examples - none of which (I would imagine) will be relevant for you.

Allan

pw27

Thanks....

So, I stripped out all the stuff from the demo, and used download builder to create a js and a css file...

Gets as far as:
Uncaught TypeError: DataTable.render.select is not a function
at test.html:69:29

Which seems odd.
Running in xampp at the moment, I need to try and get it online so you can see, I think....

pw27

Apologies - found that silly error....

Still not working, but making progress I think...

pw27

Hi, Allan... Sent you a pm with an online link...

Thanks for any assistance.

pw27

It's odd, doesn't even start to load a table.
Code is pretty much as the boxes on the examples page now, rather than like the examples in the zip.
Must be something missing, there's not even a js error thrown.

allan

The Javascript is executing before the rest of the HTML has been loaded. You can use DOMContentLoaded to wait for the document to be ready:

window.addEventListener('DOMContentLoaded', function () {
  // .. code that uses the DOM

Allan

pw27

Many thanks! That did it....