Skip to main content
se añadieron 184 caracteres en el cuerpo
Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

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="0">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>

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);
}

function paginate(e){
  if(e.target.checkValidity()){
    table.page(e.target.valueAsNumber).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="0">
</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>

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>

se añadieron 61 caracteres en el cuerpo
Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

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);
}

function paginate(e){
  if(e.target.checkValidity()){
    table.page(e.target.valueAsNumber).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="0">
</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>

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');
  pageInput.setAttribute("max", table.page.info().pages);
}

function paginate(e){
  if(e.target.checkValidity()){
    table.page(e.target.valueAsNumber).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="0">
</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>

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);
}

function paginate(e){
  if(e.target.checkValidity()){
    table.page(e.target.valueAsNumber).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="0">
</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>

Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

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');
  pageInput.setAttribute("max", table.page.info().pages);
}

function paginate(e){
  if(e.target.checkValidity()){
    table.page(e.target.valueAsNumber).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="0">
</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>