angular-datatables Buttons disappearing on data change

[ottoyiu]

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

[florianotf]

I have the same issue.

[EricRipple]

Same issue.

[tjacquin]

Same thing here. Anybody figured it out yet?

[l-lin]

Mmh the issues come from the fact that the angular renderer calls DataTable() twice (one with 0 data and the second time when all the data are fetched). It seems that calling DataTable() a second time will trigger the removal of the buttons. As for why, I'm still investigating.

[philxtian]

I have the same issue.

Anyone?

[gezichenshan]

@philxtian same too.

[pc3b3r]

+1

[arthurjg]

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:

[mmaask]

+1 same issue.

[monica783]

Hi, I'm having the same issue. +1

[dziuban]

Could this issue be related? https://github.com/DataTables/DataTables/issues/646

[mmaask]

I believe it is, but I would appreciate cleaner solution for it :)

[JosephGarrone]

I'm having the same issue as well. Will look into a work around if I can.

[dziuban]

I have tried solution by @arthurjg and it works, the problem is that I needed to downgrade angular-datatables to version 0.4.3, so that I could use DTInstances.getLast().
I have tried doing the same with the latest version and dtInstanceCallback function, but it doesn't append buttons. I would appreciate a workaround for the latest version.

[JosephGarrone]

Looks like the options are getting cleared, I've modified angular-datatables.js on line ~700 and added the following before the DT/dt declarations.

options.initComplete = function () {
    var api = this.api();

    console.log(options.buttons);

    new $.fn.dataTable.Buttons(api, {
        buttons: options.buttons
    });

    api.buttons().container().appendTo($(api.table().container()).find('dt-buttons')[0]);
}

For some reason the options.buttons is cleared. If you follow it back up however, the options variable appears to be set. It's weird.

[JosephGarrone]

My workaround-solution, using the latest version of angular-datatables (0.5.1):

vm.buttonsBottom = [
    {
        text: '<span class="icon mif-printer"></span>Print',
        extend: 'print', className: 'table-button button mini-button'
    },
    {
        text: '<span class="icon mif-file-download"></span>Download', title: 'elays',
        extend: 'excel', className: 'table-button button mini-button'
    },
    {
        text: '<span class="icon mif-plus"></span>Add',
        className: 'table-button button mini-button', action: function () { vm.addDelay(); }
    }
];
vm.dtOptionsBot = DTOptionsBuilder.newOptions()
    .withPaginationType('full_numbers')
    .withDOM('lfrtip')
    .withButtons(vm.buttonsBottom.slice());
vm.dtOptionsBot.drawCallback = function () {
    var api = $(this).DataTable();

    new $.fn.dataTable.Buttons(api, {
        buttons: vm.buttonsBottom.slice()
    });

    $(this).parent().find('.dt-buttons').replaceWith(api.buttons().container());
}

Let me know if anyone needs code explained. Note, I'm using the Angular Controller As syntax.

Edit: Added .slice() to vm.buttonsBottom, seems like the options are actually changed from within the datatables, this is what causes the options to no longer redraw.

[l-lin]

Thanks @JosephGarrone! Thanks to your comment, I managed to correct the issue. 👍

[TheAshwanik]

Hello,
Thanks for the great plugin.
But I still could not get this working.

I am using the following:
in home.ctp I am loading all the js.

< script type="text/javascript" src="/plugins/datatables/js/dataTables.buttons.js"></script>
< script type="text/javascript" src="/plugins/datatables/js/buttons.colVis.js"></script>
< script type="text/javascript" src="/plugins/datatables/js/angular-datatables.buttons.js"></script>

which triggers the loading of my DatatablesIntegrationCtrl as well. Defined below:

myModule.controller('DatatablesIntegrationCtrl', function($scope, $rootScope, $http, $myUtils, DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withDOM('<"row"<"col-md-8 col-sm-12"<"inline-controls"l>><"col-md-4 col-sm-12"<"pull-right"f>B>>t<"row"<"col-md-4 col-sm-12"<"inline-controls"T>><"col-md-4 col-sm-12"<"inline-controls text-center"i>><"col-md-4 col-sm-12"p>>')
.withDisplayLength(25)
.withBootstrap()
.withOption('retrieve', true)
.withButtons([{
extend: 'collection',
text: 'Hide columns',
buttons: ['columnsVisibility'],
visibility: false
}])
// Add Table tools compatibility
.withTableTools('/plugins/datatables/copy_csv_xls_pdf.swf')
.withTableToolsOption('sRowSelect', 'multi')
.withTableToolsButtons([{
'.....
}
} ]

    }]);  

.....
});

The first time when I click a button to load a data from ajax, the table gets properly rendered and I see the column visibility button.

But the second time I click again the button , or if the data changes , the Colvisibility button disappears.
All other tabletool buttons are fine and visible even after many times.

I am using the angular-datatables and * angular-datatables-buttons - v0.5.2

Any idea ?

What other info I can provide you to help.

Thanks again.

[JosephGarrone]

Just curious as to when 0.5.2 will be released, currently using bower to source this plugin and would love to clean up my hacks.

[l-lin]

No date set yet. Somewhere in december I think.

[JosephGarrone]

There is still an issue, in that dtNGRenderer does not call DTRendererService.preRender(options) at any point when the collection is updated. The fix (I believe) is to change the following after the _alreadyRendered = true:

_alreadyRendered = true;
DTRendererService.preRender(renderer.options); // THIS IS NEW
var result = DTRendererService.hideLoadingAndRenderDataTable(_$elem, renderer.options);

[TheAshwanik]

@JosephGarrone , Thank you.
Guess we will have to wait until it gets released.

Massive thanks to you.
DTRendererService.preRender(renderer.options); // This resolves my issue mentioned above.

Any idea how can I restrict number of columns to be displayed , when the table is first displayed.
For eg: How can I show first 5 column, and have a colvis button to see any other columns.

[mmaask]

With @JosephGarrone solution with Bootstrap enabled the button still disappear, without Bootstrap while moving through pages the buttons stay, except they keep multiplying by 2 . Using the default code. Any advice?

[l-lin]

Using the @JosephGarrone solution, I do not have the issue you describe @Vaelyr. Perhaps you can show it on a plnkr or something alike? (I merged @JosephGarrone's code to the dev branch)

[mmaask]

@l-lin I have exactly the same code, but using .withBootstrap(); and the buttons won't show. Without Bootstrap I solved the multiplying problem and shows properly the buttons properly now.

[l-lin]

Can you edit this pen to reproduce your issue?

[mmaask]

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!