1

Alguien sabe como puedo recorrer la paginación de mi datatable. Ejemplo solo me muestra de la página < 1 2 3 ... 100 111 >.

Pero ir a la página 50 me es muy complicado porque tengo que hacer 50 clics para llegar a la página 50, entonces no sé cómo hacer que al cargar ponga un input y diga "página", al ingresar 50 y enter y me lleva a la página 50. señalado en la parte de flecas qusiiera poder ir al pagina 50 sin tantos clic;

$('#tblArea').DataTable({
    processing: true,
    serverSide: true,
    ajax: url + '/serverSide',
    columns: [
        {data: "id"},
        {data: "pantalla"},
        {data: "actu"},
        {data: "disco"},
        {data: "precioreal"},
        {data: "codigo"},
        {data: "procesador"},
        {data: "reintentos"},
        {data: "cEstatus"},
        {data: "status"},


    ],
    stateSave: true,
    "lengthMenu": [[5, 10, 50,200, -1], [5, 10, 50, 200, "All"]],
});

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

Como deberia quedar o no se como hacer el input mande el ajax para ir a la pagina 50

6
  • 1
    El código como texto.
    – René
    Commented el 13 jun. a las 4:56
  • listo agrege el texto o el codigo Commented el 13 jun. a las 6:17
  • 1
    No es el texto o el código, es todo el código que compartas va como texto. Incluso cuando agregas una imagen te dice que no la uses para compartir código.
    – René
    Commented el 13 jun. a las 6:21
  • Como deberia quedar o no se como hacer el input mande el ajax para ir a la pagina 50 en la terce imagen agrege un ejemplo, Commented el 13 jun. a las 6:56
  • 1
    Solamente tienes que copiar y pegar el código en lugar de poner una imagen.
    – René
    Commented el 13 jun. a las 7:40

1 respuesta 1

1

Puedes añadir un input y utilizar la función Page para agregar la funcionalidad requerida, incluso es posible incluir algo de validación para no ir a una página inexistente

let table;
document.addEventListener("DOMContentLoaded",intit);
pageInput.addEventListener("change",paginate);

function intit(){
  table = new DataTable('#tabla',{ searching: false,  "bLengthChange": false, "bInfo": false});
  pageInput.setAttribute("max", table.page.info().pages);
  
  table.on("page", () =>{
    if(pageInput.valueAsNumber !== table.page.info().page+1)
        pageInput.valueAsNumber = table.page.info().page+1;
  }); 
}

function paginate(e){
  if(e.target.checkValidity()){
    table.page(e.target.valueAsNumber-1).draw('page');
  }
}
#pageInput:user-invalid {
  outline:1px solid red;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css" rel="stylesheet" />

<label>
Ingresa el Número de página
<input type="number" id="pageInput" value="1" step="1" min="1">
</label>


<table id="tabla">
  <thead>
    <tr>
      <th>Col A</th>
      <th>Col B</th>
      <th>Col C</th>
    </tr>
  </thead>
  <tbody>
    <script>
      for(let i=0; i<100;i++){
        document.write(`<tr>
          <td>Fila ${i} col A</td>
          <td>Fila ${i} col B</td>
          <td>Fila ${i} col C</td>
        </tr>`);
      }
    </script>
  </tbody>
</table>

3
  • 1
    Por lo que puedo ver, para el método Page la numeración de las páginas va de 0 a n - 1. En usuariolandia, si escribes el número 1, en realidad te lleva a la página 2, y tienes que escribir 0 para que te lleve a la página 1. Por otro lado, para mi como usuario también sería deseable que, si voy paginando con los controles que ofrece el DataTable, el número que se muestra en el input se vaya actualizando en concordancia.
    – jachguate
    Commented el 14 jun. a las 11:40
  • 1
    @jachguate Vale, gracias por la corrección!! Estoy altamente condicionado para satisfacer los caprichos de los usuarios, así que también agregue lo último que señalas
    – Yussef
    Commented el 14 jun. a las 12:24
  • Gracias @Yussef, pero, jaja, vamos, eso no era un capricho, jajaja. :D
    – jachguate
    Commented el 14 jun. a las 12:32

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.