HTML5/Excel/CSV/PDF not selecting all visible columns

HTML5/Excel/CSV/PDF not selecting all visible columns

paravisparavis Posts: 37Questions: 8Answers: 1

Hello,

We have a lot of "metadata" hidden in columns that are not visible in the DataTable. When using the Buttons export/copy functions without the columns explicitly defined in exportOptions, all data (including the hidden data) is made available, which is obviously not ideal.

However, when adding ":visible" to the columns option, we are only getting the first column, nothing more.

This only happens when we provide a custom container (created dynamically based on the data's column names) for the DataTable to live. When removing the container (and also the footer callback), the copy works as expected, copying only the visible data.

Any thoughts?

Thank you!

Answers

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    What happens if you do $('#myTable thead th:visible') in your browser's console? Does that return only a single column as well?

    If you link to the page I can take a look.

    Allan

  • paravisparavis Posts: 37Questions: 8Answers: 1

    No, that one returns all of the columns, but from all rows.

    Here is what it returns:

    <th rowspan="2" class="sorting_disabled" colspan="1" aria-label="Provider">Provider</th>
    <th class="dt-border-left dt-center" colspan="4" rowspan="1">CPT</th>
    <th class="dt-border-left dt-center" colspan="4" rowspan="1">Injection</th>
    <th class="dt-border-left dt-center" colspan="4" rowspan="1">Total</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Charges</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Payments</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Adjustments</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Collection</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Charges</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Payments</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Adjustments</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Collection</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Charges</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Payments</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Adjustments</th>
    <th class="dt-border-left dt-center" colspan="1" rowspan="1">Collection</th>
    

    Here is the full header:

    <thead>
        <tr role="row">
            <th rowspan="2" class="sorting_disabled" colspan="1" aria-label="Provider">Provider</th>
            <th class="dt-border-left dt-center" colspan="4" rowspan="1">CPT</th>
            <th class="dt-border-left dt-center" colspan="4" rowspan="1">Injection</th>
            <th class="dt-border-left dt-center" colspan="4" rowspan="1">Total</th>
        </tr>
        <tr role="row">
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Charges</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Payments</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Adjustments</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Collection</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Charges</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Payments</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Adjustments</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Collection</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Charges</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Payments</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Adjustments</th>
            <th class="dt-border-left dt-center" colspan="1" rowspan="1">Collection</th>
        </tr>
    </thead>
    

    Is that how you would expect it to look from the DataTables side? Only the "Provider" column is copied when using ":visible".

  • paravisparavis Posts: 37Questions: 8Answers: 1

    Not sure if this is a Buttons-related problem or a DataTables related problem, but we are using DataTables 1.10.7 with Buttons version 1.2.2.

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    If you could link a page showing the issue that would be a great help. However, I would recommend you update DataTables to 1.10.7.

    Allan

  • paravisparavis Posts: 37Questions: 8Answers: 1

    Ok - you mean to update to DataTables 1.10.12, yes? I will start with that.

    One thing I thought was odd ... I created a similar table, but with two completely separate header rows for the container, instead of the first column spanning two rows. That one seemed to copy ok.

    Anyway I'm going to get the latest version and give it a try here. Will update shortly.

    Thanks Allan.

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin

    Oops - yes, 1.10.12.

    If that doesn't help I would need a link to a page showing the issue.

    Allan

  • paravisparavis Posts: 37Questions: 8Answers: 1

    Ok.

    I'll have to get back to you on this one ... Tried updating the DT package for Rstudio to version 0.2, and it caused all sorts of problems for our apps. So I reverted back to the previous version.

    (Most noticeably, formatCurrency puts the dollar sign on the wrong side of the amount. And the "begin" option causes errors. Odd ... I'll have to take that up with those guys!)

    Might try to manually update just the DataTables JS/CSS and see how that goes.

    Will be a day or so until I have a chance to do this.

    Thanks again Allan. You and your service/support are top notch!

    ~Laz

  • paravisparavis Posts: 37Questions: 8Answers: 1

    Err, quick correction to my note - I didn't mean to say "begin" for the option name. Instead, I meant to say "before" ... ;-)

This discussion has been closed.