Changing columns dynamically with angular-datatables

C

2

0

I am using angular datatables, an angularized version of the popular jquery datatables library.

Here is my html

<body ng-controller="TestCtrl">

    <input type="button" ng-click="changeColumns()" value="Change Columns"/>
    <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>

</body>

Here is my javascript

var module = angular.module('TestApp', ['datatables']);

module.controller('TestCtrl', [
    '$scope',
    'DTOptionsBuilder',
    'DTColumnBuilder',
    function($scope, DTOptionsBuilder, DTColumnBuilder) {

         $scope.dtOptions = DTOptionsBuilder.newOptions();

         $scope.dtColumns = [
             DTColumnBuilder.newColumn('ColumnA').withTitle('ColumnA'),
             DTColumnBuilder.newColumn('ColumnB').withTitle('ColumnB')
         ];

         $scope.changeColumns = function() {
             $scope.dtColumns = [
                 DTColumnBuilder.newColumn('ColumnA').withTitle('ColumnA'),
                 DTColumnBuilder.newColumn('ColumnB').withTitle('ColumnB'),
                 DTColumnBuilder.newColumn('ColumnC').withTitle('ColumnC'),
                 DTColumnBuilder.newColumn('ColumnD').withTitle('ColumnD')
             ];

         };
    }
]);

This is about as simple as I can reduce my problems down to, yet I still get the same error. When the page first loads, I see 'ColumnA' and 'ColumnB' as expected. Then I click on the 'Change Columns' button that I have got above the table.

The table rows go away, the original two columns stay, and I get this error in the browser console.

Error: headerCells[i] is undefined

followed by a nasty stack trace. I have tried to copy the tutorial that I had linked previously, with a few minor differences.. I don't get why this simple example is not working for me. Could anyone please help?

Cosmology answered 9/9, 2015 at 19:8 Comment(2)

Checkout the "ColReorder" plugin for DataTables.net. Add it, then you can dynamically (with JS code) re-create the columns and call this: new $.fn.dataTable.ColReorder(table); – Altissimo 9/9, 2015 at 19:14

You get the error because you cannot insert empty columns in a dataTable. The columns must be present either in the markup or in the source JSON / javascript array. It is easy to reorder columns (also without plugin) but the columns must exists. – Whitsuntide 18/10, 2015 at 13:21

S

5

Faced the same issue in my project.

vm.table.dtInstance.DataTable.destroy();
angular.element('#table-id').children('thead').children().remove();
angular.element('#table-id').children('tbody').children().remove();
vm.table.dtColumns = columnsList;

Helped for me. It deletes whole datatable and creates it from scratch when you set new columns list.

Snowblind answered 19/11, 2015 at 16:22 Comment(0)

A

-1

Use this

dtColumns.push(DTColumnBuilder.newColumn('ColumnC').withTitle('ColumnC'))
dtColumns.push(DTColumnBuilder.newColumn('ColumnD').withTitle('ColumnD'))

Appoint answered 19/4, 2016 at 12:4 Comment(1)

You could perhaps format the answer correctly and provide more details. – Federica 19/4, 2016 at 12:10

Recommended topics

Hot tags