The DataTable Renders Empty From JQuery Generated DOM Table

GµårÐïåñ

I have a local page (so no web link available) that displays a textarea and a button. You put the properly formatted JSON code in there and click the button, it will parse it and generate a table on the fly appending it to a div and then when done calls DataTables. At this point the table shows up empty saying "No data available in table" suggesting that its not grabbing the data from the table that was just generated and added to the DOM, can someone explain to me what's going on?

I tried to create a DataTables live for you guys but the system introduced errors of its own because of how it processes them and so that was a moot effort. I have tried running DataTables debugger but it keeps saying that the debug.js file is not available, so not sure what's going on there. Any help would be greatly appreciated.

I did ask about it on StackOverflow, so the code is there if anyone needs to see it: http://stackoverflow.com/questions/33314290/jquery-generated-table-is-not-accessible-to-datatable

Thank you all in advance. Mike.

allan

Can you link to a test case showing the issue, per the forum rules please.

Allan

GµårÐïåñ

@allan, as I already stated, there is no test case available for review for ALL the reasons I stated in my post, that should have been pretty clear, so asking for it again won't change that unfortunately, although there is a private copy uploaded for team review.

Plus I did link to where all the code is and while waiting and not hearing back, we resolved it over at StackOverflow already. Seems that for some reason if generated using append it won't see it but generated using html works which makes no sense but resolved it anyway.

The issue that still lingers is the fact that the PDF export does not respect the * column widths and will result in cells with longer content pushing everything off the page. You can check it out here: http://res.myguardian.net/NS/ - so if you have some suggestions or assistance in that area, its currently the outstanding problem.

I have extensions BUTTONS and RESPONSIVE added to the core. I have tried to apply the PDFMake settings to control the output per their documentation but something in the core seems to be overriding it, because I can't get the output to change no matter what, it will ALWAYS display the same regardless. The only two settings it respects are page orientation and page size, nothing else like column sizes or anything. If somehow it would accept widths as auto, *, * then we would be golden.

I have reviewed anything I can find about this by searching for it but most of it is dated back during the deprecated versions or just doesn't apply or just doesn't answer the question. There isn't enough or any documentation on the site here to help with extensions either, which provides another roadblock to figuring things out.

allan

Good to hear you've got it working.

Regarding the auto column width in the exported PDF, a fully agree that column width control would be excellent. pdfmake does offer some control, but I opened an issue related to this back when I started using pdfmake. Unfortunately it hasn't be answered yet and I haven't had a chance to look into adding that feature myself.

You can use the customize method of the PDF button to add column widths, per the pdfmake documentation, but that is a limitation that I think is fairly critical when considering table widths.

Allan

GµårÐïåñ

Yes thank you, we got it working but I am still racking my brain trying to figure out the technical difference of append vs html but that's on my own and moot at the moment.

Yes it is very unfortunate that it won't take the settings passed to it properly, currently I have:

{ extend: 'pdf', text: 'Print to PDF', orientation: 'landscape', pageSize: 'legal', widths: [ 'auto', '*', '*' ] }

and while the orientation and page size are working, it completely ignores the widths: and I have tried a single * and also to specify each but as you can see, no effect. Just a quick question, since their playground shows that it is supposed to work, could it be the way we are passing the values to the library through DT that is breaking somehow? Just wondering.

allan

There isn't a widths option at the Button level, you'd need to use the customize function to add the widths to the pdfmake document object. Their tables example might be of some use there.

There is an example of how to use the customize method (albeit not to set the widths, but the same principle applies).

I can't understand why append / html would make any difference in the code you show in the SO post either...

Allan

GµårÐïåñ

Ok, I see what you meant. Apologies, earlier I misunderstood the reference to the customize as going outside of DT and making a call directly to the PDFM library, thank you for providing the example, I now know what you meant and will give it a go. I will provide my results.

Yes, to me appending to the DIV on the fly and when done calling DT seemed to make sense but apparently only worked when we decided to collect all that in a variable and then use html to apply it ONCE that did the trick, still can't understand why but its moot.

GµårÐïåñ

@allan, unless I am doing something wrong, this should do the trick, but no luck, can you see what (if anything) I am doing wrong?

buttons: [
    { extend: 'copy', text: 'Copy to Clipboard' },
    { extend: 'excel', text: 'Export to Excel' },
    { extend: 'csv', text: 'Export as CSV' },
    { extend: 'pdf', text: 'Print to PDF', orientation: 'landscape', pageSize: 'legal', 
        customize: function ( doc ) { 
            content: [ {
                alignment: 'justify',
                columns: [
                        { width: 'auto' },
                        { width: '*' },
                        { width: '*' }
                ],
                table: { widths: [ 'auto', '*', '*' ] }
            } ]                     
        }                   
    },
    { extend: 'print', text: 'Print', autoPrint: false }
]

allan

Are you transpiling that is some way? It doesn't look like valid Javascript. Specifically the content: [ ... stuff - does that not give an error in the browser id you attempt to run it?

You need to modify the doc object that is passed in, like the example does. doc.content[1].table.widths = ...; for example.

Allan

GµårÐïåñ

Nope, no error generated, I gave you the complete button section so you could see the context.

I did see the doc.content.splice( 1, 0, { but wasn't sure how that applied to my case or frankly what the splice options meant.

But modifying the code to what you said, we get this and still no go, no effect, no error:

buttons: [
    { extend: 'copy', text: 'Copy to Clipboard' },
    { extend: 'excel', text: 'Export to Excel' },
    { extend: 'csv', text: 'Export as CSV' },
    { extend: 'pdf', text: 'Print to PDF', orientation: 'landscape', pageSize: 'legal', 
        customize: function ( doc ) { doc.content[1].table.widths = [ 'auto', '*', '*' ] }                              
    },
    { extend: 'print', text: 'Print', autoPrint: false }
]

allan

The splice is just the standard Array.prototype.splice method - it is inserting an extra item into the doc.content array (where that array format is defined by pdfmake).

And no, the width array that you give I don't think will work for the reason of the bug I linked to above and you commented on in GitHub. Try giving it absolute values and you should see it having some effect - but that is really outside the scope of DataTables and into pdfmake.

Allan

GµårÐïåñ

Thank you for the feedback. Its a pity that the software doesn't work as it should and is causing so much grief. Have you considered using another software that actually works like it should without so much bugs and hassle? And obvious lack of support on their end since they haven't even acknowledged or responded to it.

On a side note, I know what the splice itself does as a method, I meant in the context of what we are trying to achieve here, but thanks for the explanation.

allan

If you have any suggestions for a better PDF creation library in Javascript then your input would be very welcome. There is pdfkit but its API is rather verbose (pdfmake is a wrapper around it if I recall correctly, which is why I chose pdfmake). There are also a number of non-free solutions, but that is a non-starter for integration with the core software (although plug-ins could be provided).

Allan

GµårÐïåñ

@allan, please don't take that any kind of knock on you, it wasn't meant that way, you are great and have a wonderful product that I am proud to use. In fact once all the kinks are worked out we plan on getting Editor too. Just wanted you to know that.

I have used Prallax's jsPDF in other projects and seem fairly stable and easy to use (https://parall.ax/products/jspdf) but not sure how it would work with your API framework but given that its OO, HTML5, and jQuery, I don't think you will run into any problem integrating it but at the very least, have a look and see what you think.

In the meantime, I was able to get the columns to "work" by setting their widths to 33.33% which is as close to a perfect 3 way split as you are going to get but obviously its less than optimal since you have a lot of wasted space, for example, the first column would consume much less space if it was set to auto and the rest would be able to share the remaining space more efficiently than being fixed, but none the less, at least its readable on a single page and I changed the size to legal so at least it has more realestate to work with but it would make it harder for people to print it out :)

{ extend: 'pdf', text: 'Print to PDF', orientation: 'landscape', pageSize: 'legal', 
customize: function ( doc ) { doc.content[1].table.widths = [ '33.33%', '33.33%', '33.33%' ] }},

Thanks for your assist on this and I look forward to seeing these little annoyances ironed out over time, if their support actually gets on the issue.

allan

Hah - no knock was taken :-). Sorry if I sounds like it was.

The reason I didn't use jspdf was that it doesn't support tables - it didn't at the time, and I don't see any change on that. Its documentation was also not as welcoming as pdfmake. Not an issue for myself, you and other developers who are willing to get to grips with it, but I wanted the pdf library to be approachable for newer / greener devs.

That said, if jspdf developers at a better rate than the others, I'd be happy to switch!

Good to hear you got your table laying out in the PDF now.

Allan

GµårÐïåñ

I completely understand, you make the best choices you can to provide the most you can at the easiest implementation possible, can't fault you there at all and good call.

Now the next challenge is getting the regular print to behave (the button to the far right) because that's currently not respecting the style based column widths that I have set for the form which is somewhat to be expected, any tricks you can recommend there?

allan

The print button simply reads the data from the existing table and then constructs a new one with that data. It doesn't actually read any styles from the existing table as I was worried about performance, document structure and CSS styles if I were to support export styling.

So instead is leaves the browser to construct the browser using the built in layout algorithms.

There is a customize option for the print button as well, which could be used to add styling, etc, to the print document if you want.

Allan

GµårÐïåñ

I understand. Thank you for the information.
I will take a look and see what I can come up with.