si m pueden ayudar les agradecere Tengo varias tablas q las genero dinamicamente depende de los registros de la DB, las pongo dentro de unos acordiones donde el usuario las consultara si las necesita, las convierto a DataTable y le concedo un scrollY y otras caracteristicas, el problema esta q al generar la pagina y mostrar dichas tablas q no se encontraban visibles pk estaban dentro del accordion m genera el encabezado mas pequenno q el resto de la tabla como muestro en la foto si le doy a alguno de los sort del header automaticamente se arregla.
de esta forma genero mis tablas:
<div class="accordion md-accordion accordion-1 mb-1" id="accordion-open-bets" role="tablist">
<% lista.ForEach(players =>
{%>
<div class="card mb-1">
<% string[] playername = playerBets.Player.Split(' '); %>
<div class="card-header mdb-color lighten-1 mask waves-effect waves-block
rgba-white-slight" role="tab" id="<%=playername[1] %>">
<a class="white-text collapsed a-collapsable mt-n2 mb-n2" table="<%=playername[1] %>" data-toggle="collapse" href="#collapse<%=playername[1] %>" aria-expanded="true"
aria-controls="collapse96">
<div class="form-row">
<h5 class="col-6 mt-n1 mb-n1"><%=playerBets.Player %> (<%=playerBets.Pass %>)</h5>
<div class="col-6 mt-n1">
<i class="icon-accordion fas fa-angle-down float-right ml-1 rotate-icon"></i>
<span class="d-inline-block float-right ml-1 little-size-font"></span>
<i class="fas fa-hourglass-half float-right"></i>
</div>
</div>
</a>
</div>
<div id="collapse<%=playername[1] %>" class="collapse" role="tabpanel" aria-labelledby="<%=playername[1] %>"
data-parent="#accordion-open-bets">
<div class="card-body ml-n3 mr-n3 ml-md-0 mr-md-0">
<div class="table-responsive">
<table width="100%" id="table<%=playername[1] %>" class="d-table table table-sm table-bordered table-hover">
<thead class="mdb-color lighten-1 text-white">
<tr>
<th>Placed</th>
<th>Game Date</th>
<th>Sport</th>
<th>Description</th>
<th>Risk/Win</th>
</tr>
</thead>
<%if (playerBets.Bets.Count > 0)
{
playerBets.Bets.ForEach(betop =>
{%>
<tr>
<td class="text-break">
<%=betop.Placed %>
</td>
<td class="text-break">
<%=betop.GameDate %>
</td>
<td class="text-break">
<%=betop.Sport %>
</td>
<td class="text-break">
<%=betop.Description %>
</td>
<td class="text-break">
<%=betop.RiskWin %>
</td>
</tr>
<%});
}
%>
</table>
</div>
</div>
</div>
</div>
<%}); %>
</div>
y las inicializo asi:
$('table.d-table').DataTable({
searching: false,
paging: false,
info: false,
sort: true,
//scrollCollapse: true,
scrollY: "400px",
"columns": [
{ "width": "15%" },
{ "width": "15%" },
{ "width": "5%" },
{ "width": "50%" },
{ "width": "15%" }
]
});
le annadi una funcion q con el evento de resize me funciona bien pk m las acomoda pero quisiera q funcionara siempre
$(window).resize(function () {
$('.d-table').each(function () {
$(this).columns.adjust().draw();
});
});
he probado con setInterval y un each dentro para estar haciendo lo siempre y tampoco m funciona... Gracias de antemano