0

Quiero que al momento de dar click en el boton siguiente(next) de la tabla, avance por ejemplo 5 paginas y no solo 1 que es por default.

¿Cómo podría lograr eso?

Lo que he intentado hasta ahora es mostrar mas numeros de pagina en la tabla con:

$.fn.dataTableExt.pager.numbers_length = 10;

Si bien muestra 3 paginas adicionales a la actual que esta seleccionada, no es lo que busco ya que ocupa mas espacio la paginacion.

for (var i = 0; i < 500; ++i) {
  $("tbody").append("<tr><td>" + i + "</td><td>" + Math.random() + "</td></tr>");
}

$.fn.dataTableExt.pager.numbers_length = 10;

$("table").dataTable({
  ordering: false,
  info: false,
  bFilter: false,
  extPagination: {
    numbers_length: 600
  }
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
  <title>JS Bin</title>
</head>
<body>
  <table border="1">
  <thead>
    <tr>
      <th>#</th>
      <th>Random numbers</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
  </body>
</html>

2

1 respuesta 1

1

Si nada mas funciona, hazlo manualmente, como este ejemplo.

Fíjate en la función que puse, cada vez que tocas next, se remplaza el elemento del botón y se pierde el handler así que hay que volver a configuración.

Saludos.

for (var i = 0; i < 500; ++i) {
  $("tbody").append("<tr><td>" + i + "</td><td>" + Math.random() + "</td></tr>");
}

$.fn.dataTableExt.pager.numbers_length = 5;

var dt = $("table").dataTable({
  ordering: false,
  info: false,
  bFilter: false,
  extPagination: {
    numbers_length: 600
  }
});

// esto es lo que agregue <<<<<------
var page = 4;
(function modificaBoton() {
  $(".paginate_button.next").on('click', function() {
    dt.fnPageChange(page);
    page+=5;
    modificaBoton();
  })
})();
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
  <title>JS Bin</title>
</head>

<body>
  <table border="1">
    <thead>
      <tr>
        <th>#</th>
        <th>Random numbers</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
</body>

</html>

1
  • Gracias @rnd, me sirvio tu respuesta. Commented el 26 ago. 2016 a las 22:55

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.