[RESOLVIDO] Javascript - obter total de linhas de uma tabela

3 de junho de 2020 6 respostas Resolvido

Cleiton_Conceicao 3 de junho de 2020

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');
        
      });
     
  });

6 Respostas

Lucas_Camara 3 de jun. de 2020

Joga essa linha:

getPagination('#table-id');

dentro do then e testa de novo.

Cleiton_Conceicao 3 de jun. de 2020

mesma coisa.

a paginação ele chega a criar, mas a numeração não aparece.

Cleiton_Conceicao 3 de jun. de 2020

Pois não está dando tempo de pegar o total de linhas.

Lucas_Camara 3 de jun. de 2020

Posta ai essa função getPagination

Cleiton_Conceicao 3 de jun. de 2020

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();
      }
    }
  }
}

Solucao aceita

Cleiton_Conceicao 3 de jun. de 2020 1 like

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();

  }

}

}

Criado 3 de junho de 2020

Ultima resposta 3 de jun. de 2020

Respostas 6

Participantes 2

6 Respostas

Topicos relacionados