Olá, estou tentando exibir alguns dados que pego por ajax e colocá-los em uma tabela responsiva usando o framework Jquery Mobile.
O problema é que, na primeira vez que eu faço a operação, funciona normalmente, porém já na segunda vez, alguns elementos aparecem diferentes. Detalhe: em telas grandes funciona, porém o desenvolvimento é voltado para mobile.
(nomes da campos meramente ilustrativos)
Segue tabela html:
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
<thead>
<tr>
<th>Q#BR</th>
<th data-priority="1">campo1</th>
<th data-priority="1">campo2</th>
<th data-priority="1">campo3</th>
<th data-priority="1">campo4</th>
<th data-priority="2">campo5</th>
<th data-priority="2">campo6</th>
<th data-priority="2">campo7</th>
<th data-priority="2">campo8</th>
</tr>
</thead>
<tbody id="tb_detail">
</tbody>
</table>
Segue código js:
function buildTableDetail(p_sts,p_ar){
$.ajax({
type:'GET',
crossDomain:true,
url:'http://localhost/arquivos/meu_arquivo.php?callback=?',
dataType:'jsonp',
data: {p1:p_ar,
p2:p_sts},
beforeSend: function(){
}
}).done(function(data){
$('#tb_detail').empty();
for (i = 0; i < data.dados.length; i++) {
$('#tb_detail').append('<tr> <td>'+data.dados[i].campo1+
'</td><td>'+data.dados[i].campo2+
'</td><td>'+data.dados[i].campo3+
'</td><td>'+data.dados[i].campo4+
'</td><td>'+data.dados[i].campo5+
'</td><td>'+data.dados[i].campo6+
'</td><td>'+data.dados[i].campo7+
'</td><td>'+data.dados[i].campo8+'</td></tr>');
}
$('#link').attr('href','#pg_alvo');
$('#link').click();
$('#pg_alvo').bind('pageinit', function () {
$('#tb_detail').table('refresh');
});
})
.fail(function(data, textStatus, errorThrown){
alert("Erro na operação.");
console.log(data);
console.log(textStatus);
console.log(errorThrown);
})
}
Print da primeira e segunda vez:
**reparem que na segunda já está mostrando os outros campos sem eu pedir, e também mostra um bloco preto ao invés do título da coluna
Como poderia concertar isso para sempre aparecer de forma correta?(como na primeira tela)
EDIT:
Só para explicar melhor, o problema não está em puxar e mostrar os dados. Isso eu consigo fazer. O problema está no funcionamento errado da tabela com columntoggle, que não esconde as colunas e dados que deveria esconder, mesmo tendo a classe ui-table-cell-hidden ativada.