I am building a project using Django with Angular and CoffeeScript, which is having a lot of tables for which I use angular-datatables module. However, with this part I have a problem. Sometimes it simply doesn't load. Sometimes it works perfectly. The problem of not loading the table is especially visible in Chrome (there it is most often) but it makes me crazy also in other browsers.
I have an activate function in the controller. In this function I am getting the data from the service and initialise dataTable options in the following way:
activate = =>
allAccountsRequest = AccountsService.all()
allAccountsRequest.success (data, status, headers, config) =>
@accounts = data
@dtOptions = DTOptionsBuilder
.newOptions()
.withBootstrap()
.withOption('bLengthChange', false)
.withOption('bFilter', false)
.withOption('bInfo', false)
.withDisplayLength(20)
@dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(-1).notSortable()
]
This function is called every time I need to load or reload the data displayed in the table, i.e. when the user opens the page with the table or when he adds/remove or edit any account displayed in the table. However, very often after editing any of the rows the dataTable simply doesn't show up.
Part responsible for rendering the table in the template looks as following:
<table datatable="ng" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" class="table table-hover dataTable">
<thead>
<tr>
<th class="col-lg-3 text-center">First name</th>
<th class="col-lg-3 text-center">Last name</th>
<th class="col-lg-3 text-center">Username</th>
<th class="col-lg-3 text-center">Zarządzaj</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="account in vm.accounts">
<td class="vert-align">{{ account.first_name }}</td>
<td class="vert-align">{{ account.last_name }}</td>
<td class="vert-align">{{ account.username }}</td>
<td class="text-center vert-align"><!-- manageAccount --></td>
</tr>
</tbody>
</table>
Really I have no idea what could be wrong. I will be really grateful for your help.