I have a DataTables setup to show a list of project names, and I have a button that should add an item to the displayed array. However, when I click the button, the table disappears.
Below is the code snippet:
view.html
<button ng-click="vm.add()">Add item</button>
<table datatable="ng" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs"
class="table table-hover table-striped table-bordered table-condensed">
<thead>
<tr style="background-color: #00b3ee; color: white; border:none">
<th style="text-align: center">Nom</th>
<th style="text-align: center">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="project in vm.project.projects">
<td style="width: 90%; vertical-align: middle">{{project}}</td>
<td align="center" style="vertical-align: middle">
<button data-toggle="modal" ng-click="vm.setProject(project)"
data-target="#deleteEureciaProjectModal" type="button" class="btn btn-danger">
<i class="fa fa-trash"> </i>Supprimer
</button>
</td>
</tr>
</tbody>
</table>
controller.js
vm.add = () => vm.project.projects.push('new project');
fetchProject().then(result => {
vm.project = result;
// vm.project = {
// projects: [
// "project1",
// "project2",
// "project3",
// "project4"
// ],
// etc...
// }
vm.project.projects.push("newProject"); //it's working here, which is normal
//init datatable
vm.dtInstance = {};
vm.dtOptions = DTOptionsBuilder.newOptions()
.withBootstrap();
vm.dtColumnDefs = [];
for (var i = 0; i < 2; i++) {
if (i == 1) {
vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
} else {
vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i));
}
}
})
I've attempted using objects instead of strings, but that didn't solve the issue. I'm unsure of what's causing this problem. I'm unable to utilize server-side processing, and I need to find a solution within Angular methods.