js_ssp
Version:
Datatable server side for JS
79 lines (77 loc) • 3.13 kB
HTML
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTables Server-Side Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<style>
.container { margin-top: 2rem; }
.dataTables_wrapper { margin-top: 1rem; }
.filter-row { margin-bottom: 1rem; }
.filter-row input { width: 100%; }
</style>
</head>
<body>
<div class="container">
<h1>DataTables Server-Side Demo</h1>
<div class="card">
<div class="card-body">
<div class="row filter-row">
<div class="col">
<input type="text" class="form-control" placeholder="Filtrar por ID" data-column="0">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Filtrar por Nombre" data-column="1">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Filtrar por Email" data-column="2">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Filtrar por Fecha" data-column="3">
</div>
</div>
<table id="usuariosTable" class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Email</th>
<th>Fecha de Registro</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#usuariosTable').DataTable({
processing: true,
serverSide: true,
ajax: {
url: '/api/data',
},
columns: [
{ data: 'id' },
{ data: 'nombre' },
{ data: 'email' },
{ data: 'fecha_registro' }
],
language: {
url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json'
}
});
// Aplicar filtros individuales
$('.filter-row input').on('keyup change', function() {
var columnIndex = $(this).data('column');
table.column(columnIndex).search(this.value).draw();
});
});
</script>
</body>
</html>