1

Estoy intentado paginar varios items, he intentado de diversas formas pero por alguna razón no he logrado hacerlo. Lo que necesito es ir mostrando de 5 en cinco los resultados.

Si alguien puede ayudarme muy agradecido.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group">
   <div class="panel panel-info">
      <div class="panel-heading">
         <asp:Label ID="Label1" runat="server"></asp:Label>
         <div class="panel-body">
            <center>
               <h5>
                  <div class="row">
                     <br />
                     Num - Lugar - Fecha
                  </div>
               </h5>
            </center>
         </div>
         <ul class="list-group" id="Items">
            <li style="font-size: 0.875em;"class="list-group-item">46047   - Patio de Caña</br>21/12/2017 9:41:02 a. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46051   - Patio de Caña</br>21/12/2017 2:33:53 p. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46070   - Patio de Caña</br>21/12/2017 1:37:05 p. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46069   - Taller</br>21/12/2017 2:38:08 p. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46048   - Gasolinera</br>21/12/2017 2:37:09 p. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46072   - Gasolinera</br>21/12/2017 2:38:08 p. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46073   - Servicio Rapido</br>21/12/2017 2:37:43 p. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46075   - Servicio Rapido</br>21/12/2017 2:28:15 p. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46050   - Transporte</br>21/12/2017 12:00:00 a. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46049   - Transporte</br>21/12/2017 12:00:00 a. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46068   - Transporte</br>21/12/2017 12:00:00 a. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46074   - Transporte</br>21/12/2017 12:00:00 a. m.</li>
            <li style="font-size: 0.875em;"class="list-group-item">46076   - Transporte</br>21/12/2017 12:00:00 a. m.</li>
         </ul>
      </div>
   </div>
</div>

1 respuesta 1

3

Podria ser una opcion, tienes que usar javascript o jquery para que sea dinamico

//declaras el contenido que tendra cada lista
var items = '[{"Id":1,"Title":"46047 - Patio de Caña<br>21/12/2017 9:41:02 a. m."},{"Id":2,"Title":"46051 - Patio de Caña<br>21/12/2017 2:33:53 p. m."},{"Id":3,"Title":"46070 - Patio de Caña<br>21/12/2017 1:37:05 p. m."},{"Id":4,"Title":"46069 - Taller<br>21/12/2017 2:38:08 p. m."},{"Id":5,"Title":"46048 - Gasolinera<br>21/12/2017 2:37:09 p. m."},{"Id":6,"Title":"46072 - Gasolinera<br>21/12/2017 2:38:08 p. m."},{"Id":7,"Title":"46073 - Servicio Rapido<br>21/12/2017 2:37:43 p. m."},{"Id":8,"Title":"46075 - Servicio Rapido<br>21/12/2017 2:28:15 p. m."},{"Id":9,"Title":"46050 - Transporte<br>21/12/2017 12:00:00 a. m."},{"Id":10,"Title":"46068 - Transporte<br>21/12/2017 12:00:00 a. m."},{"Id":11,"Title":"46074 - Transporte<br>21/12/2017 12:00:00 a. m."},{"Id":12,"Title":"46076 - Transporte<br>21/12/2017 12:00:00 a. m."}]';
var pager = {};
pager.items = JSON.parse(items);
//declaras cuantas li se mostraran por pagina
pager.itemsPerPage = 3;
pagerInit(pager);

//para insertar el contenido de las listes vacias al html
function bindList() {
  var pgItems = pager.pagedItems[pager.currentPage];
  $("#Items").empty();
  for (var i = 0; i < pgItems.length; i++) {
    var option = $('<li class="list-group-item">');
    for (var key in pgItems[i]) {
      option.html(pgItems[i][key]);
    }
    $("#Items").append(option);
  }
}
//boton previo
function prevPage() {
  pager.prevPage();
  bindList();
}
//boton proximos

function nextPage() {
  pager.nextPage();
  bindList();
}

function pagerInit(p) {
  p.pagedItems = [];
  p.currentPage = 0;
  if (p.itemsPerPage === undefined) {
    p.itemsPerPage = 5;
  }
  p.prevPage = function() {
    if (p.currentPage > 0) {
      p.currentPage--;
    }
  };
  p.nextPage = function() {
    if (p.currentPage < p.pagedItems.length - 1) {
      p.currentPage++;
    }
  };
  init = function() {
    for (var i = 0; i < p.items.length; i++) {
      if (i % p.itemsPerPage === 0) {
        p.pagedItems[Math.floor(i / p.itemsPerPage)] = [p.items[i]];
      } else {
        p.pagedItems[Math.floor(i / p.itemsPerPage)].push(p.items[i]);
      }
    }
  };
  init();
}
$(function() {
  bindList();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="form-group">
  <div class="panel panel-info">
    <div class="panel-heading">
      <asp:Label ID="Label1" runat="server"></asp:Label>
      <div class="panel-body">
        <center>
          <h5>
            <div class="row">
              <br /> Num - Lugar - Fecha
            </div>
          </h5>
        </center>
      </div>
      <ul class="list-group" id="Items">
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
        <li style="font-size: 0.875em;" class="list-group-item"></li>
      </ul>
      <ul id="myList" class="list-group"></ul>
          <ul class="pager">
            <li class="previous"><a href="" onclick="prevPage(); return false;">«</a></li>
            <li class="next"><a href="" onclick="nextPage(); return false;">»</a></li>
          </ul>

    </div>

  </div>
</div>

1
  • Muchas gracias @LuisFernando genial tu respuesta. Commented el 21 dic. 2017 a las 21:23

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.