1

quiero paginar los siguiente li

<ul id="usuarios">
  <li><div id="1">miesha</div></li>
  <li><div id="2">ronda</div></li>
  <li><div id="3">thor</div></li>
  <li><div id="4">superman</div></li>
  <li><div id="5">batman</div></li>
  <li><div id="6">susan</div></li>
  <li><div id="7">minerva</div></li>
  <li><div id="8">pedro</div></li>
  <li><div id="9">diana</div></li>
  <li><div id="10">fedor</div></li>
</ul>

y mi js es:

$(function() {
                $("#usuarios").pagination({
                    items: 100,
                    itemsOnPage: 5,
                    cssStyle: 'light-theme'
                });
            });

importando el js y css

script(src="/javascripts/jquery.simplePagination.js")
    link(rel='stylesheet', type='text/css', href='/stylesheets/simplePagination.css')  

estoy siguiendo este tutorial: http://flaviusmatis.github.io/simplePagination.js/

no funciona nada de la lista, todo desaparecio. solamente se visualiza los botones

en que estoy fallando?

7
  • donde dices, "importanto el js y css" ... no lo haces con el formato "<script src=" ? Te da algun tipo de error por consola ?
    – lois6b
    Commented el 28 feb. 2017 a las 7:05
  • debiera decirte script is not a function y link is not a function
    – ffflabs
    Commented el 28 feb. 2017 a las 14:23
  • @amenadiel no sale ningun error, simplemente se deforma totalmente,
    – hubman
    Commented el 28 feb. 2017 a las 14:42
  • @lois6b estoy usando jade por eso lo importo de esa manera
    – hubman
    Commented el 28 feb. 2017 a las 14:50
  • y estás seguro que la ruta relativa te la está cogiendo ?
    – lois6b
    Commented el 28 feb. 2017 a las 14:58

1 respuesta 1

2

Hola para Realizar lo que deseas te aconsejo revises este Ejemplo, y no tendrías necesidad de hacer uso de la simplePagination.js.

Aplicando el ejemplo que te doy a lo que tu planteas, tu codigo HTML quedaria de la siguiente manera:

 <html>
  <head>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.js"></script>  
    <script src="js/list.min.js"></script>
 </head>
 <body>
    <div id="test-list">
      <input type="text" class="search" />
      <ul class="list" id="usuarios">
      <li><div id="1">miesha</div></li>
      <li><div id="2">ronda</div></li>
      <li><div id="3">thor</div></li>
      <li><div id="4">superman</div></li>
      <li><div id="5">batman</div></li>
      <li><div id="6">susan</div></li>
      <li><div id="7">minerva</div></li>
      <li><div id="8">pedro</div></li>
      <li><div id="9">diana</div></li>
      <li><div id="10">fedor</div></li>
      </ul>
      <ul class="pagination"></ul>
  </div>

En el Body de tu pagina, debes incorporar un pequeño script el cual te detallo a continuación:

  <script>
     $(document).ready(function(e) {
       var monkeyList = new List('test-list', {
       valueNames: ['name'],
       page: 3,
       pagination: true
     });
    });
   </script>

Incorpora en tu style.css:

.pagination li {
   display:inline-block;
   padding:5px;
}

De esta manera el resultado de tu paginacion quedaría de la siguiente manera:

introducir la descripción de la imagen aquí

El uso de este método a diferencia del que tu planteas (simplePagination.js) no guarda ninguna relación con que este sea mucho mejor que el otro, solo es cuestión de gustos, este en particular forma parte de mi experiencia. Saludos espero te sirva!

2
  • 1
    Las respuestas en las que se refiere a un recurso externo sin mayor explicación se consideran de baja calidad. Si el recurso referido es extenso, al menos incluyo un síntesis y explica si has usado ese recurso o por qué lo recomiendas.
    – Rubén
    Commented el 5 mar. 2017 a las 19:52
  • 2
    Tienes Razón muchas Gracias! Commented el 6 mar. 2017 a las 15:20

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.