In the system that I am developing I have a table where I use the ng-repeat-star / ng-repeat-end function of angularjs, the objective is that when giving click on a row of the table to show information that is hidden (additional rows are created for each parent row but when loading are hidden), depending on the selected row the corresponding information is displayed, this works correctly. p>
The problem occurs when I add the datatable="ng" to the table so that I can paginate it and at the same time can organize the content for any column in the table.
Selecting a row shows me the hidden row but sends it to the beginning of the table, in other words it does not stay below the selected row, whatever the selected row does the same behavior.
This is the code that the table generates.
<table id="listaBases" class="table table-bordered table-responsive" datatable="ng" cellspacing="0" width="100%">
<thead>
<tr>
<th class="with-fijo" ><?php texto('VER') ?></th>
<th style="text-align: center"><?php texto('CAMPANIA') ?></th>
<th style="text-align: center"><?php texto('ASEGURADORA') ?></th>
<th style="text-align: center"><?php texto('RAMO') ?></th>
<th style="text-align: center"><?php texto('POLIZA') ?></th>
<th style="text-align: center"><?php texto('VIGENCIA') ?></th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="list in lista_gestionnotificaciones">
<td >
<i ng-click="gestion_vista(list)" class="icon icon-eye"></i>
</td>
<td>
{{list.base_nombre}}
</td>
<td>
{{list.aseg_nombre}}
</td>
<td>
{{list.ramo_nombre}}
</td>
<td>
{{list.emis_nopoliza}}
</td>
<td>
{{list.vigencia}}
</td>
</tr>
<tr ng-repeat-end ng-if="list.marca == 1" >
<td></td>
<td colspan="12">
<div style="height: 300px; overflow-y:scroll; overflow-x:hidden">
<table id="movimientos" class="table tableMas table-bordered" dt-options="dtOptions2" fixed-header>
<thead>
<tr>
<th style="text-align: center"><?php texto('USUARIO') ?></th>
<th style="text-align: center"><?php texto('FECHA') ?> y <?php texto('HORA') ?></th>
<th style="text-align: center"><?php texto('TIPO_GESTION') ?></th>
<th style="text-align: center"><?php texto('TIPIFICACION') ?></th>
<th style="text-align: center; width: 50%;"><?php texto('GESTIONES') ?></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="gestion in list.gestiones">
<td>
{{gestion.nombre_usuario}}
</td>
<td>
{{gestion.gest_fecha}}
</td>
<td>
{{gestion.tipo_gestion}}
</td>
<td>
{{gestion.tipificacion_nombre}}
</td>
<td style="width: 1000px;">
<span ng-bind-html="gestion.gest_observacion"> </span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
This is the code to show the hidden row:
$scope.gestion_vista = function (par)
{
if (par.marca == 0) {
par.marca = 1;
}
else {
par.marca = 0;
}
};
Thank you very much in advance for the help you can give me.