question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

angular-datatables Buttons disappearing on data change

See original GitHub issue

Hello,

I’m using angular-datatables v0.5.1, along with the Buttons plugin, using the Angular data model way (datatable=“ng”), and when I change the data of the table - ‘Copy’, ‘Print’, ‘CSV’ buttons from the plugin just disappears.

            <div>
                <table id="node-table" datatable="ng" class="table table-striped"
                       dt-options="dtOptions" dt-instance="dtInstance">
                    <thead>
                    <tr>
                        <th ng-repeat="col in cols">{{col.title}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>test</td>
                    </tr>
                    <tr ng-repeat="row in rows">
                        <td ng-repeat="col in cols">
                            {{row[col.field]}}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

Any changes to the rows scope variable, will rid of the Buttons.

My dtOptions as follows:

        $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withPaginationType('full_numbers')
            .withBootstrap()
            .withButtons([
                'copy', 'colvis', 'csv', 'print']);

I also tried re-creating the dtOptions after the data change, but no luck there.

This isn’t a problem if i use dtColumns, and load data using promises.

Thanks, Otto

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:27 (10 by maintainers)

github_iconTop GitHub Comments

1reaction
arthurjgcommented, Nov 26, 2015

I have the same too. But I have found out a temporary solution to “keep” the buttons on screen. Like described in DataTables Buttons doc https://datatables.net/extensions/buttons/ under topic “Direct Insertion” we can insert the buttons directly, so we only need to put that code inside “drawCallback” event in datatable options so that the buttons are inserted each time the table is redrawn, like below:

dt-but-fix

0reactions
mmaaskcommented, Dec 11, 2015

Okay seems I wasn’t using one of the dev branch libraries, works fine with it. Hopefully gets merged to master soon then 😃 Many thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Datatable updated data disappear upon export/sort ...
The problem I'm facing is that after I edit or delete (after the API call that changes the values in my database) the...
Read more >
DataTables buttons removes the length menu
Hi,. After I add the Copy, Print etc buttons on my datatable it removes the "Show N Entries" drop down. Is it possible...
Read more >
DataTables buttons-option not supportet? - MDBootstrap
Hello, i'm using datatables but i'm missing the buttons-feature? Piotr Glejzer staff commented 3 years ago. Hi, which buttons do you talking about?...
Read more >
Google Visualization API Reference | Charts
This can either be the JSON returned by calling DataTable.toJSON() on a populated table, or a JavaScript object containing data used to initialize...
Read more >
Table | Angular Material
Adding and removing data when using an array-based datasource. link code open_in_new. Add data ... Table dynamically changing the columns displayed. link
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found