Я использую Datatables, чтобы сделать мою таблицу динамической c. Обычно это работает нормально, но иногда я получаю это представление, когда попадаю на страницу. Обновление иногда не возвращает его к нормальному состоянию.
Расширение столбца таблицы
Хотя это не очень часто, это раздражает меня и конечного пользователя.
$('#bt_modal_new_call_open').prop('disabled',true);
$(document).ready(function() {
var table =
$('#tb_calls').DataTable({
"language": {
"url": "/public/json/Portuguese-Brasil.json"
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
]
});
$.ajax({
url:"/public/json/symbols.json",
dataType: 'json',
success: function(response){
//console.log("[RESPONSE] ",response);
simbolos = response;
//console.log(simbolos);
symbols = new Object();
symbols.title = "Ativo";
symbols.text = "Escolha o ativo";
symbols.inputOptions = new Object();
for(var i=0; i<simbolos.length; i++){
symbols.inputOptions[simbolos[i].symbol_name] = simbolos[i].symbol_name;
//options += "<option value='"+simbolos[i].symbol_name+"'>"+simbolos[i].symbol_name+"</option>";
options += "<option value='"+simbolos[i].symbol_name+"'>";
}
$('#bt_modal_new_call_open').prop('disabled',false);
},
error: function(request, status, error){
console.log("ERROR");
}
});
/* Formatting function for row details - modify as you need */
function format ( d ) {
//console.log(d);
// `d` is the original data object for the row
return ' <p>Estratégia: '+d.strategy+'</p>\
<p>Comentário: '+d.comment+'</p>';
}
$('#tb_calls tbody').on('click', 'td.details-control', function(){
var dados_child = $(this).closest('tr').find('input').eq(0).val();
dados_child = JSON.parse(dados_child);
var data = new Object();
data.strategy = dados_child.call_strategy;
data.comment = dados_child.call_comment;
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ){
$(this).closest('tr').find('td').eq(0).html('<i class="fas fa-plus text-success"></i>');
$(this).closest('tr').find('td').eq(0).attr('title','Mais detalhes');
//console.log("dasdsad");
row.child.hide();
tr.removeClass('shown');
}
else{
$(this).closest('tr').find('td').eq(0).html('<i class="fas fa-minus text-danger"></i>');
$(this).closest('tr').find('td').eq(0).attr('title','Menos detalhes');
// console.log("gdfhhgh");
row.child( format(data)).show();
tr.addClass('shown');
}
});
function checkHasEmpty(lst){
for (var i=0;i<lst.length; i++){
if (lst[i] == ""){
return true;
}
}
return false;
}
<table id="tb_calls" class="table table-sm table-hover table-striped" style="background-color:white">
<thead class="text-primary">
<tr>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary"></a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">#</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Status</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Data</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Category</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Symbol</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Type</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Order</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Price</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Take profit</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Stop loss</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Result</a></th>
<th style="text-align:center" nowrap="nowrap"><a class="text-primary">Ações</a></th>
</tr>
</thead>
<tbody>
<% if(calls.length>0){
for(var i=0; i<calls.length; i++){
if(calls[i].call_status != "CANCELED"){
%>
<tr>
<input type="hidden" value='<%=JSON.stringify(calls[i])%>'>
<td class="teste details-control" title="Mais detalhes" style="text-align:center" nowrap="nowrap"><i class="fas fa-plus text-success"></i></td>
<td style="text-align:center" nowrap="nowrap"><%=calls[i].call_id%></td>
<td style="text-align:center" id="<%=calls[i].call_status%>" nowrap="nowrap">
<%if(calls[i].call_status == "WAITING_APPROVAL"){%>
<span class="badge bg-warning">Pendente</span>
<%} else{%>
<%if(calls[i].call_status == "ACTIVE"){%>
<span class="badge bg-primary">Ativo</span>
<%} else{%>
<%if(calls[i].call_status == "FINISHED"){%>
<span class="badge bg-danger">Finalizado</span>
<%} else{%>
<span class="badge bg-secondary"><%=calls[i].call_status%></span>
<%}%>
<%}%>
<%}%>
</td>
<%if(calls[i].call_publish_time != null){%>
<td style="text-align:center" nowrap="nowrap"><%=formatDate(calls[i].call_publish_time)%></td>
<%} else{%>
<td style="text-align:center" nowrap="nowrap"> - </td>
<%}%>
<td style="text-align:center" nowrap="nowrap"><%=calls[i].call_category%></td>
<td style="text-align:center" nowrap="nowrap"><%=calls[i].call_symbol%></td>
<td style="text-align:center" nowrap="nowrap"><%=calls[i].call_type%></td>
<td style="text-align:center" nowrap="nowrap"><%=calls[i].call_order_type%></td>
<td style="text-align:center" id="<%=calls[i].call_entry_price_deviation%>" nowrap="nowrap"><%=calls[i].call_entry_price%></td>
<td style="text-align:center" nowrap="nowrap"><%=calls[i].call_take_profit%></td>
<td style="text-align:center" nowrap="nowrap"><%=calls[i].call_stop_loss%></td>
<td style="text-align:center" nowrap="nowrap"><%=calls[i].call_result%></td>
<td style="text-align:center" nowrap="nowrap">
<% if(calls[i].call_status == "FINISHED"){%>
<button disabled class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fas fa-cog"></i> Ações
</button>
<%}else{%>
<div class="float-center">
<div class="dropdown">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fas fa-cog"></i> Ações
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<%if(calls[i].call_status == "WAITING_APPROVAL"){%>
<a class="dropdown-item block edit-call">
<i class="fas fa-cog text-primary"></i>Editar
</a>
<a class="dropdown-item block activate-call">
<i class="fas fa-check text-success"></i>Ativar
</a>
<a class="dropdown-item block cancel-call">
<i class="fas fa-trash-alt text-danger"></i>Apagar
</a>
<%} else{%>
<a class="dropdown-item block edit-call">
<i class="fas fa-cog text-primary"></i>Editar
</a>
<a class="dropdown-item block end-call">
<i class="fas fa-times text-warning"></i>Finalizar
</a>
<a class="dropdown-item block cancel-call">
<i class="fas fa-trash-alt text-danger"></i>Apagar
</a>
<%}
}%>
</div>
</div>
</div>
</td>
</tr>
<%}
}
}
%>
</tbody>
</table>
</div>
Кто-нибудь знает, почему это может происходить и / или как ее решить?