Hello, I'm trying to display some data that I get by ajax and put them in a responsive table using the Jquery Mobile framework.
The problem is that the first time I do the operation, it works normally, but already the second time, some elements appear different. Detail: on large screens it works, however the development is geared towards mobile.
(field names only illustrative)
Following html table:
<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>
Follow js code:
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 the first and second time:
** Note that the second one is already showing the other fields without my asking, and also shows a black block instead of the column title
How could I arrange this to always appear correctly (as in the first screen)
EDIT:
Just to better explain, the problem is not in pulling and showing the data. This I can do. The problem is in the wrong operation of the table with columntoggle, which does not hide the columns and data it should hide, even though the ui-table-cell-hidden class is enabled.