Header can not be modified when datatable is filled from promise or ajax

[pidupuis]

Hi everybody,

I am implementing a search interface and according to the kind of data you want to search for, the datatable will not contain the same set of columns.

First, I want to display the datatable only when the search button is clicked. For this I used a little trick with ng-if I found here: #22 (comment).

So my function looks like this:

self.doSearch = function() {
    var dtColumns = [];
    for (var i=0; i < self.selectedIdType.header.length; i++) {
        dtColumns.push(DTColumnDefBuilder.newColumnDef(i).withTitle(self.selectedIdType.header[i]));
    }
    self.dtColumnDefs = dtColumns;

    self.dtOptions = DTOptionsBuilder.fromFnPromise(self.selectedIdType.getDataFunc(self.asyncSelected))
        .withPaginationType('full_numbers');

    self.showDT = true;
};

with HTML:

<table ng-if="Ctrl.showDT" datatable="" dt-options="Ctrl.dtOptions" dt-column-defs="Ctrl.dtColumnDefs" class="row-border hover"></table>

It works well for the first search but when I want to search for another kind of data, the datatable is filled with the good result, but the columns are not modified. Therefore, I obtain an error popup each time the first number of column does not fit the new content. And also the header values are not modified.

I also tried to modify self.dtOptions at the last loop iteration but nothing changes...

Why the header is not updated but the rows are? What am I doing wrong?

Thanks in advance for your help!

[l-lin]

My guess is that the number of columnDefs must correspond to the number of attributes of your data, eg your data looks like this:

{
    "id": 123,
    "firstName": "Foo",
    "lastName": "Bar"
}

So you must have 3 columnDefs that design each attribute of your data.
If you need to hide some column, then you can call the .notVisible() method.

[pidupuis]

That's the problem. For a kind of search, I have 3 attributes so I want to create 3 columns.
Then for another search, I have 4 different attributes so I want to replace the three columns by four new ones, fully different and independents...

The same thing is observed when I reverse the order (begin by 4 columns and change for 3 columns). The first search always works whatever the kind of search is but not the others after that.

The problem does not concern only the number of columns but also the titles. The title of my columns is not modified as the controller does not consider the update of self.dtColumnDefs.

[pidupuis]

I'm trying to investigate deeper and in fact, my header is never updated, even with a simple example as in here.

self.dtOptions = DTOptionsBuilder.fromFnPromise(getDataFunc('test'))
        .withPaginationType('full_numbers');
self.dtColumnDefs = [
    DTColumnDefBuilder.newColumnDef(0),
    DTColumnDefBuilder.newColumnDef(1),
    DTColumnDefBuilder.newColumnDef(2)
];

self.doSearch = function() {
    self.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0),
        DTColumnDefBuilder.newColumnDef(1).notVisible(),
        DTColumnDefBuilder.newColumnDef(2).notSortable()
    ];
}

Nothing happens...

My button is declared inside a directive using the following HTML:

<button ng-click="Ctrl.doSearch()" class="btn btn-default" type="submit">
    <span class="glyphicon glyphicon-search"></span>
</button> \

[pidupuis]

When I strictly follow your example here, where the datatable is filled manually, the header is modified as expected.

But for other ways to fill the datatable (from promise, from server side processing), the header can not be modified.

[pidupuis]

See this plunker. The columns are not modified in the second datatable...

[l-lin]

Fixed on the upcoming version 0.4.0.

[pidupuis]

Thanks a lot!

Even my plunker is solved since it uses the dev version of angular-datatables :)