0

estoy en pleno desarrollo del proyecto de una aplicación web y me he topado con un problema sencillo pero que no logro resolver:

  • Mi aplicación muestra los eventos recogidos en una BD externa. Para evitar que me aparezca una tabla interminable, cuando la BD empieza a tener ya un tamaño considerable, he optado por dividir la tabla en distintas páginas y que estas muestren únicamente 5 eventos/página.

    • Soy capaz de sacar los 5 eventos por cada página, el problema es que cuando quiero hacer que se me creen los botones de paginado de forma dinámica (20 eventos -> 4 botones, 23 eventos -> 5 botones, etc) me aparece la línea html de los mismos entre "" por lo que no me reconoce los "li" la página html.

Dejo imagen: https://image.prntscr.com/image/9G0wSc9GTIC6I_jqsJsAAw.png

Dejo código de parte del HTML:

<head>
</head>
<body>
    <nav class="pull-left position" aria-label="Page navigation" id="div1">
        <ul id="ul_pager" class="pager">
            <li><a href="#" onclick="page(0)">1</a></li>
        </ul>
    </nav>
    <form id="form1" runat="server">
        <div>
            <table id="tableEvents"></table>
        </div>
    </form>
</body>

Dejo también el JavaScript:

    $(document).ready(function () {
        var i = 1;
        var j = i + 1;
        var ul = document.getElementById("ul_pager");

        while (i < tpage) {
            ul.append('<li><a href="#" onclick="page(' + i + ')"> ' + j + '</a></li>');
            i++;
            j++;
        }
    });

Aclaro que tpage es una variable (declarada en otro JS) que contiene el número de botones de paginado que se deben crear y funciona correctamente.

Muchas gracias por vuestra ayuda, un saludo.

3 respuestas 3

1

El problema es que en el método append no estás añadiendo elementos ´li´ si no cadenas con el código html del elemento li.

En cualquier caso, si utilizas jQuery, ¿por qué no lo utilizas luego para manipular el DOM?:

var tpage = 7;

$(document).ready(function () {
      var i = 1;
      var j = i + 1;
      var ul = $("#ul_pager");

      while (i < tpage) {
          ul.append($('<li><a href="#" onclick="page(' + i + ')"> ' + j + '</a></li>'));
          i++;
          j++;
      }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="pull-left position" aria-label="Page navigation" id="div1">
      <ul id="ul_pager" class="pager">
          <li><a href="#" onclick="page(0)">1</a></li>
      </ul>
  </nav>
  <form id="form1" runat="server">
      <div>
          <table id="tableEvents"></table>
      </div>
  </form>

1
  • Muchas gracias por la ayuda, Asier! Se hace complicado a veces utilizar un lenguaje al que no estás habituado y no sabes demasiado.
    – Ace
    el 13 nov. 2017 a las 17:02
0

Estás usando el método nativo append en lugar del de jQuery: Uno inserta texto mientras que el segundo interpreta el texto que introduzcas. Te pongo la solución con jQuery porque veo que ya lo estás usando; la solución con métodos nativos incluiría crear el elemento con document.createElement y luego insertarlo con appendChild en lugar de con append

let tpage=4;
$(document).ready(function () {
    var i = 1;
    var j = i + 1;
    var ul = document.getElementById("ul_pager");

    while (i < tpage) {
        $('#ul_pager').append('<li><a href="#" onclick="page(' + i + ')"> ' + j + '</a></li>');
        i++;
        j++;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="ul_pager" class="pager">
    <li><a href="#" onclick="page(0)">1</a></li>
</ul>

0

window.addEventListener("DOMContentLoaded", dom);

function dom(){
var ul = document.createElement("UL"),
    li = 20, i = 1;
    for(;i<=li;i++){
    var newLi = document.createElement("li");
    newLi.id = i;
    newLi.innerHTML = `Tengo id: ${i}`;
    ul.appendChild(newLi);
    document.body.appendChild(ul);
    }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.