Galera, como faço para executar um outro script após uma tabela html ser carregada completamente?
O código abaixo consome um webservice e cria uma tabela com paginação, porém a paginação não está funcionando perfeitamente pq a função está sendo executada quando a tabela não está criada totalmente. alguém pode me dar uma solução?
$("#consultar").click(function () {
axios
.get("#urlwebservice")
.then((response) => response.data)
.then((response) => {
response.instituicoes.map((item) => {
var table = `
<tr>
<td>${item.instituicao}</td>
<td class="direita">${item.preco}</td>
<td class="center" ><a href="/${item.id}" role="button" class="btn btn-edit"><i class="fa fa-usd"></i></a></td>
</tr>
`;
$("#table-id").append(table);
});
getPagination('#table-id');
});
});
Joga essa linha:
getPagination('#table-id');
dentro do then e testa de novo.
mesma coisa.
a paginação ele chega a criar, mas a numeração não aparece.
Pois não está dando tempo de pegar o total de linhas.
Posta ai essa função getPagination
function getPagination(table) {
var lastPage = 1;
// $(document).ready(function () {
lastPage = 1;
$('.pagination')
.find('li')
.slice(1, -1)
.remove();
var trnum = 0;
var maxRows = 10;
if (maxRows == 5000) {
$('.pagination').hide();
} else {
$('.pagination').show();
}
var totalRows = $(table + ' tbody tr').length;
$(table + ' tr:gt(0)').each(function() {
trnum++;
if (trnum > maxRows) {
$(this).hide();
}
if (trnum <= maxRows) {
$(this).show();
}
});
if (totalRows > maxRows) {
var pagenum = Math.ceil(totalRows / maxRows);
for (var i = 1; i <= pagenum; ) {
$('.pagination #prev')
.before(
'<li data-page="' +
i +
'">\
<span>' +
i++ +
'<span class="sr-only">(current)</span></span>\
</li>'
)
.show();
}
}
$('.pagination [data-page="1"]').addClass('active');
$('.pagination li').on('click', function(evt) {
evt.stopImmediatePropagation();
evt.preventDefault();
var pageNum = $(this).attr('data-page');
var maxRows = 10;
if (pageNum == 'prev') {
if (lastPage == 1) {
return;
}
pageNum = --lastPage;
}
if (pageNum == 'next') {
if (lastPage == $('.pagination li').length - 2) {
return;
}
pageNum = ++lastPage;
}
lastPage = pageNum;
var trIndex = 0;
$('.pagination li').removeClass('active');
$('.pagination [data-page="' + lastPage + '"]').addClass('active');
limitPagging();
$(table + ' tr:gt(0)').each(function() {
trIndex++;
if (
trIndex > maxRows * pageNum ||
trIndex <= maxRows * pageNum - maxRows
) {
$(this).hide();
} else {
$(this).show();
}
});
});
limitPagging();
/*})*/
// .val(5)
//.change();
}
function limitPagging() {
if ($('.pagination li').length > 7) {
if ($('.pagination li.active').attr('data-page') <= 3) {
$('.pagination li:gt(5)').hide();
$('.pagination li:lt(5)').show();
$('.pagination [data-page="next"]').show();
}
if ($('.pagination li.active').attr('data-page') > 3) {
$('.pagination li:gt(0)').hide();
$('.pagination [data-page="next"]').show();
for (
let i = parseInt($('.pagination li.active').attr('data-page')) - 2;
i <= parseInt($('.pagination li.active').attr('data-page')) + 2;
i++
) {
$('.pagination [data-page="' + i + '"]').show();
}
}
}
}
Conseguir resolver!!
fiz um contador dentro da função onde monto a tabela.
$("#consultar").click(function () {
axios
.get("iurlwebservice")
.then((response) => response.data)
.then((response) => {
var totalRows =0
response.instituicoes.map((item) => {
var table = `
<tr>
<td>${item.instituicao}</td>
<td class="direita">${item.preco}</td>
<td class="center" ><a href="/${item.id}" role="button" class="btn btn-edit"><i class="fa fa-usd"></i></a></td>
</tr>
`;
totalRows++; //criei esse contador e estou passando como parâmetro para função getPagination.
$("#table-id").append(table);
getPagination('#table-id',totalRows);
});
});
});
E AQUI NA FUNÇÃO ESTOU RECEBENDO O TOTAL DE LINHAS.
function getPagination(table,totalRows) {
var lastPage = 1;
// $(document).ready(function () {
lastPage = 1;
$('.pagination')
.find('li')
.slice(1, -1)
.remove();
var trnum = 0;
var maxRows = 10;
if (maxRows == 5000) {
$('.pagination').hide();
} else {
$('.pagination').show();
}
$(table + ' tr:gt(0)').each(function() {
trnum++;
if (trnum > maxRows) {
$(this).hide();
}
if (trnum <= maxRows) {
$(this).show();
}
});
if (totalRows > maxRows) {
var pagenum = Math.ceil(totalRows / maxRows);
for (var i = 1; i <= pagenum; ) {
$('.pagination #prev')
.before(
'<li data-page="' +
i +
'">\
<span>' +
i++ +
'<span class="sr-only">(current)</span></span>\
</li>'
)
.show();
}
}
$('.pagination [data-page="1"]').addClass('active');
$('.pagination li').on('click', function(evt) {
evt.stopImmediatePropagation();
evt.preventDefault();
var pageNum = $(this).attr('data-page');
var maxRows = 10;
if (pageNum == 'prev') {
if (lastPage == 1) {
return;
}
pageNum = --lastPage;
}
if (pageNum == 'next') {
if (lastPage == $('.pagination li').length - 2) {
return;
}
pageNum = ++lastPage;
}
lastPage = pageNum;
var trIndex = 0;
$('.pagination li').removeClass('active');
$('.pagination [data-page="' + lastPage + '"]').addClass('active');
limitPagging();
$(table + ' tr:gt(0)').each(function() {
trIndex++;
if (
trIndex > maxRows * pageNum ||
trIndex <= maxRows * pageNum - maxRows
) {
$(this).hide();
} else {
$(this).show();
}
});
});
limitPagging();
/*})*/
// .val(5)
//.change();
}
function limitPagging() {
if ($(’.pagination li’).length > 7) {
if ($('.pagination li.active').attr('data-page') <= 3) {
$('.pagination li:gt(5)').hide();
$('.pagination li:lt(5)').show();
$('.pagination [data-page="next"]').show();
}
if ($('.pagination li.active').attr('data-page') > 3) {
$('.pagination li:gt(0)').hide();
$('.pagination [data-page="next"]').show();
for (
let i = parseInt($('.pagination li.active').attr('data-page')) - 2;
i <= parseInt($('.pagination li.active').attr('data-page')) + 2;
i++
) {
$('.pagination [data-page="' + i + '"]').show();
}
}
}
}
1 curtida