Initial commit

This commit is contained in:
kevin 2025-05-19 11:21:45 -04:00
commit 8f899c6c89
21 changed files with 27443 additions and 0 deletions

42
add_dataset.php Normal file
View File

@ -0,0 +1,42 @@
<?php include("includes/header.php"); ?>
<?php include("db.php"); ?>
<?php
// Verificar si se pasó el nombre de la tabla como parámetro
if (!isset($_GET['table'])) {
die("No se especificó una tabla.");
}
$table_name = $_GET['table'];
// Validar el nombre de la tabla
if (!preg_match('/^[a-zA-Z0-9_]+$/', $table_name)) {
die("El nombre de la tabla contiene caracteres no permitidos.");
}
?>
<div class="container p-4">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body">
<h5 class="text-center">Agregar Dataset a la tabla: <?php echo $table_name; ?></h5>
<form action="save_dataset.php?table=<?php echo $table_name; ?>" method="POST">
<div class="form-group mb-3">
<input type="text" name="instruction" class="form-control" placeholder="Instruction" autofocus required>
</div>
<div class="form-group mb-3">
<input type="text" name="input" class="form-control" placeholder="Input" required>
</div>
<div class="form-group mb-3">
<textarea name="output" rows="2" class="form-control" placeholder="Output" required></textarea>
</div>
<div class="d-grid">
<input type="submit" name="save_dataset" class="btn btn-success" value="Guardar Dataset">
</div>
</form>
</div>
</div>
</div>
</div>
<?php include("includes/footer.php"); ?>

29
create_table.php Normal file
View File

@ -0,0 +1,29 @@
<?php
include("db.php");
if (isset($_POST['create_table'])) {
$table_name = $_POST['table_name'];
// Validar el nombre de la tabla (solo letras, números y guiones bajos)
if (!preg_match('/^[a-zA-Z0-9_]+$/', $table_name)) {
die("El nombre de la tabla contiene caracteres no permitidos.");
}
// Crear la tabla con las columnas especificadas
$query = "CREATE TABLE $table_name (
id INT AUTO_INCREMENT PRIMARY KEY,
instruction TEXT NOT NULL,
input TEXT NOT NULL,
output TEXT NOT NULL,
created_ad TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)";
$result = mysqli_query($conn, $query);
if ($result) {
echo "<script>alert('Tabla creada exitosamente.'); window.location.href = 'index.php';</script>";
} else {
die("Error al crear la tabla: " . mysqli_error($conn));
}
}

17
db.php Executable file
View File

@ -0,0 +1,17 @@
<?php
$conn = mysqli_connect(
'localhost', // Database host
'root', // Database username
'XmRTSMQ9', // Database password
'php_crud' // Database name
);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>

31
delete_dataset.php Executable file
View File

@ -0,0 +1,31 @@
<?php
include("db.php");
// Verificar si se pasaron los parámetros 'table' y 'id'
if (!isset($_GET['table']) || !isset($_GET['id'])) {
die("No se especificaron los parámetros necesarios.");
}
$table_name = $_GET['table'];
$id = $_GET['id'];
// Validar el nombre de la tabla (solo letras, números y guiones bajos)
if (!preg_match('/^[a-zA-Z0-9_]+$/', $table_name)) {
die("El nombre de la tabla contiene caracteres no permitidos.");
}
// Validar que el ID sea un número
if (!is_numeric($id)) {
die("El ID especificado no es válido.");
}
// Eliminar el registro de la tabla
$query = "DELETE FROM $table_name WHERE id = $id";
$result = mysqli_query($conn, $query);
if ($result) {
echo "<script>alert('Registro eliminado exitosamente.'); window.location.href = 'gestor_dataset.php?table=$table_name';</script>";
} else {
die("Error al eliminar el registro: " . mysqli_error($conn));
}

25
delete_table.php Normal file
View File

@ -0,0 +1,25 @@
<?php
include("db.php");
// Verificar si se pasó el nombre de la tabla como parámetro
if (!isset($_GET['table'])) {
die("No se especificó una tabla.");
}
$table_name = $_GET['table'];
// Validar el nombre de la tabla (solo letras, números y guiones bajos)
if (!preg_match('/^[a-zA-Z0-9_]+$/', $table_name)) {
die("El nombre de la tabla contiene caracteres no permitidos.");
}
// Eliminar la tabla de la base de datos
$query = "DROP TABLE $table_name";
$result = mysqli_query($conn, $query);
if ($result) {
echo "<script>alert('Tabla eliminada exitosamente.'); window.location.href = 'index.php';</script>";
} else {
die("Error al eliminar la tabla: " . mysqli_error($conn));
}

66
edit.php Executable file
View File

@ -0,0 +1,66 @@
<?php
include("db.php");
// Verificar si se pasaron los parámetros 'id' y 'table'
if (!isset($_GET['id']) || !isset($_GET['table'])) {
die("No se especificaron los parámetros necesarios.");
}
$id = $_GET['id'];
$table_name = $_GET['table'];
// Validar el nombre de la tabla
if (!preg_match('/^[a-zA-Z0-9_]+$/', $table_name)) {
die("El nombre de la tabla contiene caracteres no permitidos.");
}
// Obtener el registro de la base de datos
$query = "SELECT * FROM $table_name WHERE id = $id";
$result = mysqli_query($conn, $query);
if (mysqli_num_rows($result) == 1) {
$row = mysqli_fetch_array($result);
$instruction = $row['instruction'];
$input = $row['input'];
$output = $row['output'];
}
// Actualizar el registro en la base de datos
if (isset($_POST['update_dataset'])) {
$instruction = $_POST['instruction'];
$input = $_POST['input'];
$output = $_POST['output'];
$query = "UPDATE $table_name SET instruction = '$instruction', input = '$input', output = '$output' WHERE id = $id";
mysqli_query($conn, $query);
header("Location: gestor_dataset.php?table=$table_name");
}
?>
<?php include("includes/header.php"); ?>
<div class="container p-4">
<div class="row">
<div class="col-md-4 mx-auto">
<div class="card card-body">
<form action="edit.php?table=<?php echo $table_name; ?>&id=<?php echo $id; ?>" method="POST">
<div class="form-group mb-3">
<input type="text" name="instruction" class="form-control" value="<?php echo $instruction; ?>" placeholder="Update Instruction" autofocus>
</div>
<div class="form-group mb-3">
<input type="text" name="input" class="form-control" value="<?php echo $input; ?>" placeholder="Update Input">
</div>
<div class="form-group mb-3">
<textarea name="output" rows="2" class="form-control" placeholder="Update Output"><?php echo $output; ?></textarea>
</div>
<button class="btn btn-success" name="update_dataset">
Update Dataset
</button>
</form>
</div>
</div>
</div>
</div>
<?php include("includes/footer.php"); ?>

45
fetchData.php Normal file
View File

@ -0,0 +1,45 @@
<?php
$dbDetails = array(
'host' => 'localhost',
'user' => 'root',
'pass' => 'XmRTSMQ9',
'db' => 'php_crud'
);
$table = 'general';
$primaryKey = 'id';
$columns = array(
array('db' => 'id', 'dt' => 0),
array('db' => 'instruction', 'dt' => 1),
array('db' => 'input', 'dt' => 2),
array('db' => 'output', 'dt' => 3),
array(
'db' => 'created_at',
'dt' => 4,
'formatter' => function ($d, $row) {
return date('js M Y', strtotime($d));
}
),
array(
'db' => 'id',
'dt' => 5,
'formatter' => function ($d, $row) {
return '<a href="edit.php?id=' . $d . '" class="btn btn-secondary m-2">Editar</a>
<a href="delete_dataset.php?id=' . $d . '" class="btn btn-danger" onclick="return confirm(\'¿Estás seguro de que deseas eliminar este registro?\');">Eliminar</a>';
}
)
);
require('ssp.class.php');
// Output data as json format
echo json_encode(
SSP::simple($_GET, $dbDetails, $table, $primaryKey, $columns)
);

118
gestor_dataset.php Normal file
View File

@ -0,0 +1,118 @@
<?php include("includes/header.php"); ?>
<?php include("db.php"); ?>
<?php
// Verificar si se pasó el nombre de la tabla como parámetro
if (!isset($_GET['table'])) {
die("No se especificó una tabla.");
}
$table_name = $_GET['table'];
// Validar el nombre de la tabla (solo letras, números y guiones bajos)
if (!preg_match('/^[a-zA-Z0-9_]+$/', $table_name)) {
die("El nombre de la tabla contiene caracteres no permitidos.");
}
// Número de registros por página
$records_per_page = 25;
// Página actual (por defecto es 1)
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$page = max($page, 1); // Asegurarse de que no sea menor que 1
// Calcular el OFFSET
$offset = ($page - 1) * $records_per_page;
// Consultar el número total de registros
$total_query = "SELECT COUNT(*) AS total FROM $table_name";
$total_result = mysqli_query($conn, $total_query);
$total_row = mysqli_fetch_assoc($total_result);
$total_records = $total_row['total'];
// Calcular el número total de páginas
$total_pages = ceil($total_records / $records_per_page);
// Consultar los datos con LIMIT y OFFSET
$query = "SELECT * FROM $table_name LIMIT $records_per_page OFFSET $offset";
$result_dataset = mysqli_query($conn, $query);
?>
<div class="container p-4">
<div class="row">
<!-- Botón para agregar dataset -->
<div class="col-12 mb-3">
<a href="add_dataset.php?table=<?php echo $table_name; ?>" class="btn btn-primary">
Add Dataset
</a>
</div>
<!-- Tabla con los datos -->
<div class="col-md-12">
<h5 class="text-center">Datos en la tabla: <?php echo $table_name; ?></h5>
<table id="example" class="table table-bordered">
<thead>
<tr>
<th>Instruction</th>
<th>Input</th>
<th>Output</th>
<th>Created At</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php while ($row = mysqli_fetch_array($result_dataset)) { ?>
<tr>
<td><?php echo $row['instruction']; ?></td>
<td><?php echo $row['input']; ?></td>
<td><?php echo $row['output']; ?></td>
<td><?php echo $row['created_ad']; ?></td>
<td>
<a href="edit.php?table=<?php echo $table_name; ?>&id=<?php echo $row['id']; ?>" class="btn btn-secondary m-2">
Editar
</a>
<a href="delete_dataset.php?table=<?php echo $table_name; ?>&id=<?php echo $row['id']; ?>" class="btn btn-danger" onclick="return confirm('¿Estás seguro de que deseas eliminar este registro?');">
Eliminar
</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<!-- Controles de paginación -->
<div class="d-flex justify-content-center mt-4">
<nav>
<ul class="pagination">
<!-- Botón "Anterior" -->
<li class="page-item <?php if ($page <= 1) echo 'disabled'; ?>">
<a class="page-link" href="gestor_dataset.php?table=<?php echo $table_name; ?>&page=<?php echo $page - 1; ?>">Anterior</a>
</li>
<!-- Menú desplegable para seleccionar página -->
<li class="page-item">
<select class="form-select" onchange="location = this.value;">
<?php for ($i = 1; $i <= $total_pages; $i++) { ?>
<option value="gestor_dataset.php?table=<?php echo $table_name; ?>&page=<?php echo $i; ?>" <?php if ($page == $i) echo 'selected'; ?>>
Página <?php echo $i; ?>
</option>
<?php } ?>
</select>
</li>
<!-- Botón "Siguiente" -->
<li class="page-item <?php if ($page >= $total_pages) echo 'disabled'; ?>">
<a class="page-link" href="gestor_dataset.php?table=<?php echo $table_name; ?>&page=<?php echo $page + 1; ?>">Siguiente</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<?php include("includes/footer.php"); ?>

7
includes/footer.php Executable file
View File

@ -0,0 +1,7 @@
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
</body>
</html>

31
includes/header.php Executable file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GESTOR DATASET</title>
<!-- Bootstrap 4 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<!-- CSS de DataTables -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.0/css/dataTables.dataTables.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<!-- JS de DataTables -->
<script src="https://cdn.datatables.net/2.3.0/js/dataTables.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container">
<a href="index.php" class="navbar-brand">GESTOR DATASET</a>
</div>
</nav>

60
index.php Executable file
View File

@ -0,0 +1,60 @@
<?php include("includes/header.php"); ?>
<?php include("db.php"); ?>
<div class="container p-4">
<div class="row">
<!-- Listar tablas existentes -->
<div class="col-md-8">
<h5 class="text-center">Tablas Existentes</h5>
<table class="table table-bordered">
<thead>
<tr>
<th>Nombre de la Tabla</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php
// Obtener todas las tablas de la base de datos
$query = "SHOW TABLES";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($result)) {
$table_name = $row[0];
?>
<tr>
<td><?php echo $table_name; ?></td>
<td>
<!-- Enlace para editar datasets en la tabla -->
<a href="server_side/index.php?table=<?php echo $table_name; ?>" class="btn btn-primary">
Editar
</a>
<!-- Enlace para eliminar la tabla -->
<a href="delete_table.php?table=<?php echo $table_name; ?>" class="btn btn-danger" onclick="return confirm('¿Estás seguro de que deseas eliminar esta tabla?');">
Eliminar
</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<!-- Formulario para crear una nueva tabla -->
<div class="col-md-4">
<div class="card card-body">
<h5 class="text-center">Crear Tabla</h5>
<form action="create_table.php" method="POST">
<div class="form-group mb-3">
<input type="text" name="table_name" class="form-control" placeholder="Nombre de la Tabla" required>
</div>
<div class="d-grid">
<input type="submit" name="create_table" class="btn btn-primary" value="Crear Tabla">
</div>
</form>
</div>
</div>
</div>
</div>
<?php include("includes/footer.php"); ?>

30
save_dataset.php Executable file
View File

@ -0,0 +1,30 @@
<?php
include("db.php");
// Verificar si se pasó el nombre de la tabla como parámetro
if (!isset($_GET['table'])) {
die("No se especificó una tabla.");
}
$table_name = $_GET['table'];
// Validar el nombre de la tabla
if (!preg_match('/^[a-zA-Z0-9_]+$/', $table_name)) {
die("El nombre de la tabla contiene caracteres no permitidos.");
}
if (isset($_POST['save_dataset'])) {
$instruction = $_POST['instruction'];
$input = $_POST['input'];
$output = $_POST['output'];
$query = "INSERT INTO $table_name (instruction, input, output) VALUES ('$instruction', '$input', '$output')";
$result = mysqli_query($conn, $query);
if (!$result) {
die("Error al insertar datos: " . mysqli_error($conn));
}
echo "<script>alert('Dataset guardado exitosamente.'); window.location.href = 'gestor_dataset.php?table=$table_name';</script>";
}

817
scripts/dtaTables.css Normal file
View File

@ -0,0 +1,817 @@
:root {
--dt-row-selected: 13, 110, 253;
--dt-row-selected-text: 255, 255, 255;
--dt-row-selected-link: 9, 10, 11;
--dt-row-stripe: 0, 0, 0;
--dt-row-hover: 0, 0, 0;
--dt-column-ordering: 0, 0, 0;
--dt-html-background: white;
}
:root.dark {
--dt-html-background: rgb(33, 37, 41);
}
table.dataTable td.dt-control {
text-align: center;
cursor: pointer;
}
table.dataTable td.dt-control:before {
display: inline-block;
box-sizing: border-box;
content: "";
border-top: 5px solid transparent;
border-left: 10px solid rgba(0, 0, 0, 0.5);
border-bottom: 5px solid transparent;
border-right: 0px solid transparent;
}
table.dataTable tr.dt-hasChild td.dt-control:before {
border-top: 10px solid rgba(0, 0, 0, 0.5);
border-left: 5px solid transparent;
border-bottom: 0px solid transparent;
border-right: 5px solid transparent;
}
table.dataTable tfoot:empty {
display: none;
}
html.dark table.dataTable td.dt-control:before,
:root[data-bs-theme=dark] table.dataTable td.dt-control:before,
:root[data-theme=dark] table.dataTable td.dt-control:before {
border-left-color: rgba(255, 255, 255, 0.5);
}
html.dark table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before {
border-top-color: rgba(255, 255, 255, 0.5);
border-left-color: transparent;
}
div.dt-scroll {
width: 100%;
}
div.dt-scroll-body thead tr,
div.dt-scroll-body tfoot tr {
height: 0;
}
div.dt-scroll-body thead tr th, div.dt-scroll-body thead tr td,
div.dt-scroll-body tfoot tr th,
div.dt-scroll-body tfoot tr td {
height: 0 !important;
padding-top: 0px !important;
padding-bottom: 0px !important;
border-top-width: 0px !important;
border-bottom-width: 0px !important;
}
div.dt-scroll-body thead tr th div.dt-scroll-sizing, div.dt-scroll-body thead tr td div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr td div.dt-scroll-sizing {
height: 0 !important;
overflow: hidden !important;
}
table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
outline: none;
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before {
position: absolute;
display: block;
bottom: 50%;
content: "\25B2";
content: "\25B2"/"";
}
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
position: absolute;
display: block;
top: 50%;
content: "\25BC";
content: "\25BC"/"";
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
position: relative;
width: 12px;
height: 20px;
}
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
left: 0;
opacity: 0.125;
line-height: 9px;
font-size: 0.8em;
}
table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > td.dt-orderable-asc,
table.dataTable thead > tr > td.dt-orderable-desc {
cursor: pointer;
}
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
outline: 2px solid rgba(0, 0, 0, 0.05);
outline-offset: -2px;
}
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order:after {
opacity: 0.6;
}
table.dataTable thead > tr > th.sorting_desc_disabled span.dt-column-order:after, table.dataTable thead > tr > th.sorting_asc_disabled span.dt-column-order:before,
table.dataTable thead > tr > td.sorting_desc_disabled span.dt-column-order:after,
table.dataTable thead > tr > td.sorting_asc_disabled span.dt-column-order:before {
display: none;
}
table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
outline: none;
}
table.dataTable thead > tr > th div.dt-column-header,
table.dataTable thead > tr > th div.dt-column-footer,
table.dataTable thead > tr > td div.dt-column-header,
table.dataTable thead > tr > td div.dt-column-footer,
table.dataTable tfoot > tr > th div.dt-column-header,
table.dataTable tfoot > tr > th div.dt-column-footer,
table.dataTable tfoot > tr > td div.dt-column-header,
table.dataTable tfoot > tr > td div.dt-column-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 4px;
}
table.dataTable thead > tr > th div.dt-column-header span.dt-column-title,
table.dataTable thead > tr > th div.dt-column-footer span.dt-column-title,
table.dataTable thead > tr > td div.dt-column-header span.dt-column-title,
table.dataTable thead > tr > td div.dt-column-footer span.dt-column-title,
table.dataTable tfoot > tr > th div.dt-column-header span.dt-column-title,
table.dataTable tfoot > tr > th div.dt-column-footer span.dt-column-title,
table.dataTable tfoot > tr > td div.dt-column-header span.dt-column-title,
table.dataTable tfoot > tr > td div.dt-column-footer span.dt-column-title {
flex-grow: 1;
}
table.dataTable thead > tr > th div.dt-column-header span.dt-column-title:empty,
table.dataTable thead > tr > th div.dt-column-footer span.dt-column-title:empty,
table.dataTable thead > tr > td div.dt-column-header span.dt-column-title:empty,
table.dataTable thead > tr > td div.dt-column-footer span.dt-column-title:empty,
table.dataTable tfoot > tr > th div.dt-column-header span.dt-column-title:empty,
table.dataTable tfoot > tr > th div.dt-column-footer span.dt-column-title:empty,
table.dataTable tfoot > tr > td div.dt-column-header span.dt-column-title:empty,
table.dataTable tfoot > tr > td div.dt-column-footer span.dt-column-title:empty {
display: none;
}
div.dt-scroll-body > table.dataTable > thead > tr > th,
div.dt-scroll-body > table.dataTable > thead > tr > td {
overflow: hidden;
}
:root.dark table.dataTable thead > tr > th.dt-orderable-asc:hover, :root.dark table.dataTable thead > tr > th.dt-orderable-desc:hover,
:root.dark table.dataTable thead > tr > td.dt-orderable-asc:hover,
:root.dark table.dataTable thead > tr > td.dt-orderable-desc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > th.dt-orderable-asc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > th.dt-orderable-desc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > td.dt-orderable-asc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > td.dt-orderable-desc:hover {
outline: 2px solid rgba(255, 255, 255, 0.05);
}
div.dt-processing {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
margin-left: -100px;
margin-top: -22px;
text-align: center;
padding: 2px;
z-index: 10;
}
div.dt-processing > div:last-child {
position: relative;
width: 80px;
height: 15px;
margin: 1em auto;
}
div.dt-processing > div:last-child > div {
position: absolute;
top: 0;
width: 13px;
height: 13px;
border-radius: 50%;
background: rgb(13, 110, 253);
background: rgb(var(--dt-row-selected));
animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div.dt-processing > div:last-child > div:nth-child(1) {
left: 8px;
animation: datatables-loader-1 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(2) {
left: 8px;
animation: datatables-loader-2 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(3) {
left: 32px;
animation: datatables-loader-2 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(4) {
left: 56px;
animation: datatables-loader-3 0.6s infinite;
}
@keyframes datatables-loader-1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes datatables-loader-3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes datatables-loader-2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
table.dataTable.nowrap th, table.dataTable.nowrap td {
white-space: nowrap;
}
table.dataTable th,
table.dataTable td {
box-sizing: border-box;
}
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
text-align: right;
}
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer, table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer,
table.dataTable td.dt-type-numeric div.dt-column-header,
table.dataTable td.dt-type-numeric div.dt-column-footer,
table.dataTable td.dt-type-date div.dt-column-header,
table.dataTable td.dt-type-date div.dt-column-footer {
flex-direction: row-reverse;
}
table.dataTable th.dt-left,
table.dataTable td.dt-left {
text-align: left;
}
table.dataTable th.dt-center,
table.dataTable td.dt-center {
text-align: center;
}
table.dataTable th.dt-right,
table.dataTable td.dt-right {
text-align: right;
}
table.dataTable th.dt-right div.dt-column-header,
table.dataTable th.dt-right div.dt-column-footer,
table.dataTable td.dt-right div.dt-column-header,
table.dataTable td.dt-right div.dt-column-footer {
flex-direction: row-reverse;
}
table.dataTable th.dt-justify,
table.dataTable td.dt-justify {
text-align: justify;
}
table.dataTable th.dt-nowrap,
table.dataTable td.dt-nowrap {
white-space: nowrap;
}
table.dataTable th.dt-empty,
table.dataTable td.dt-empty {
text-align: center;
vertical-align: top;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
text-align: left;
}
table.dataTable thead th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable tfoot td.dt-head-left {
text-align: left;
}
table.dataTable thead th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable tfoot td.dt-head-center {
text-align: center;
}
table.dataTable thead th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable tfoot td.dt-head-right {
text-align: right;
}
table.dataTable thead th.dt-head-right div.dt-column-header,
table.dataTable thead th.dt-head-right div.dt-column-footer,
table.dataTable thead td.dt-head-right div.dt-column-header,
table.dataTable thead td.dt-head-right div.dt-column-footer,
table.dataTable tfoot th.dt-head-right div.dt-column-header,
table.dataTable tfoot th.dt-head-right div.dt-column-footer,
table.dataTable tfoot td.dt-head-right div.dt-column-header,
table.dataTable tfoot td.dt-head-right div.dt-column-footer {
flex-direction: row-reverse;
}
table.dataTable thead th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable tfoot td.dt-head-justify {
text-align: justify;
}
table.dataTable thead th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable tfoot td.dt-head-nowrap {
white-space: nowrap;
}
table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
text-align: left;
}
table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
text-align: center;
}
table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
text-align: right;
}
table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
text-align: justify;
}
table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
white-space: nowrap;
}
:root {
--dt-row-hover-alpha: 0.035;
--dt-row-stripe-alpha: 0.023;
--dt-column-ordering-alpha: 0.019;
--dt-row-selected-stripe-alpha: 0.923;
--dt-row-selected-column-ordering-alpha: 0.919;
}
/*
* Table styles
*/
table.dataTable {
width: 100%;
margin: 0 auto;
border-spacing: 0;
/*
* Header and footer styles
*/
/*
* Body styles
*/
}
table.dataTable thead th,
table.dataTable tfoot th {
font-weight: bold;
}
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
table.dataTable > thead > tr > th:active,
table.dataTable > thead > tr > td:active {
outline: none;
}
table.dataTable > tfoot > tr > th,
table.dataTable > tfoot > tr > td {
border-top: 1px solid rgba(0, 0, 0, 0.3);
padding: 10px 10px 6px 10px;
}
table.dataTable > tbody > tr {
background-color: transparent;
}
table.dataTable > tbody > tr:first-child > * {
border-top: none;
}
table.dataTable > tbody > tr:last-child > * {
border-bottom: none;
}
table.dataTable > tbody > tr.selected > * {
box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.9);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);
color: rgb(255, 255, 255);
color: rgb(var(--dt-row-selected-text));
}
table.dataTable > tbody > tr.selected a {
color: rgb(9, 10, 11);
color: rgb(var(--dt-row-selected-link));
}
table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td {
padding: 8px 10px;
}
table.dataTable.row-border > tbody > tr > *, table.dataTable.display > tbody > tr > * {
border-top: 1px solid rgba(0, 0, 0, 0.15);
}
table.dataTable.row-border > tbody > tr:first-child > *, table.dataTable.display > tbody > tr:first-child > * {
border-top: none;
}
table.dataTable.row-border > tbody > tr.selected + tr.selected > td, table.dataTable.display > tbody > tr.selected + tr.selected > td {
border-top-color: rgba(13, 110, 253, 0.65);
border-top-color: rgba(var(--dt-row-selected), 0.65);
}
table.dataTable.cell-border > tbody > tr > * {
border-top: 1px solid rgba(0, 0, 0, 0.15);
border-right: 1px solid rgba(0, 0, 0, 0.15);
}
table.dataTable.cell-border > tbody > tr > *:first-child {
border-left: 1px solid rgba(0, 0, 0, 0.15);
}
table.dataTable.cell-border > tbody > tr:first-child > * {
border-top: 1px solid rgba(0, 0, 0, 0.3);
}
table.dataTable.stripe > tbody > tr:nth-child(odd) > *, table.dataTable.display > tbody > tr:nth-child(odd) > * {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.023);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), var(--dt-row-stripe-alpha));
}
table.dataTable.stripe > tbody > tr:nth-child(odd).selected > *, table.dataTable.display > tbody > tr:nth-child(odd).selected > * {
box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.923);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), var(--dt-row-selected-stripe-alpha));
}
table.dataTable.hover > tbody > tr:hover > *, table.dataTable.display > tbody > tr:hover > * {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), var(--dt-row-hover-alpha));
}
table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > * {
box-shadow: inset 0 0 0 9999px #0d6efd !important;
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important;
}
table.dataTable.order-column > tbody tr > .sorting_1,
table.dataTable.order-column > tbody tr > .sorting_2,
table.dataTable.order-column > tbody tr > .sorting_3, table.dataTable.display > tbody tr > .sorting_1,
table.dataTable.display > tbody tr > .sorting_2,
table.dataTable.display > tbody tr > .sorting_3 {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.019);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), var(--dt-column-ordering-alpha));
}
table.dataTable.order-column > tbody tr.selected > .sorting_1,
table.dataTable.order-column > tbody tr.selected > .sorting_2,
table.dataTable.order-column > tbody tr.selected > .sorting_3, table.dataTable.display > tbody tr.selected > .sorting_1,
table.dataTable.display > tbody tr.selected > .sorting_2,
table.dataTable.display > tbody tr.selected > .sorting_3 {
box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.919);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), var(--dt-row-selected-column-ordering-alpha));
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_1, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_1 {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.054);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha)));
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_2, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_2 {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.047);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.007));
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_3, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_3 {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.039);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.015));
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_1, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_1 {
box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.954);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha)));
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_2, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_2 {
box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.947);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.007));
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_3, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_3 {
box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.939);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.015));
}
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.082);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha)));
}
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.074);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.007));
}
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.062);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.015));
}
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.982);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha)));
}
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.974);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.007));
}
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.962);
box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.015));
}
table.dataTable.compact thead th,
table.dataTable.compact thead td,
table.dataTable.compact tfoot th,
table.dataTable.compact tfoot td,
table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
padding: 4px;
}
div.dt-container div.dt-layout-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0.75em 0;
}
div.dt-container div.dt-layout-row div.dt-layout-cell {
display: flex;
justify-content: space-between;
align-items: center;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
justify-content: flex-start;
margin-right: auto;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
justify-content: flex-end;
margin-left: auto;
}
div.dt-container div.dt-layout-row div.dt-layout-cell:empty {
display: none;
}
@media screen and (max-width: 767px) {
div.dt-container div.dt-layout-row:not(.dt-layout-table) {
display: block;
}
div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell {
display: block;
text-align: center;
}
div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell > * {
margin: 0.5em 0;
}
div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-start {
margin-right: 0;
}
div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-end {
margin-left: 0;
}
}
div.dt-container div.dt-layout-start > *:not(:last-child) {
margin-right: 1em;
}
div.dt-container div.dt-layout-end > *:not(:first-child) {
margin-left: 1em;
}
div.dt-container div.dt-layout-full {
width: 100%;
}
div.dt-container div.dt-layout-full > *:only-child {
margin-left: auto;
margin-right: auto;
}
div.dt-container div.dt-layout-table > div {
display: block !important;
}
@media screen and (max-width: 767px) {
div.dt-container div.dt-layout-start > *:not(:last-child) {
margin-right: 0;
}
div.dt-container div.dt-layout-end > *:not(:first-child) {
margin-left: 0;
}
}
/*
* Control feature layout
*/
div.dt-container {
position: relative;
clear: both;
}
div.dt-container .dt-search input {
border: 1px solid #aaa;
border-radius: 3px;
padding: 5px;
background-color: transparent;
color: inherit;
margin-left: 3px;
}
div.dt-container .dt-input {
border: 1px solid #aaa;
border-radius: 3px;
padding: 5px;
background-color: transparent;
color: inherit;
}
div.dt-container select.dt-input {
padding: 4px;
}
div.dt-container .dt-paging .dt-paging-button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
color: inherit !important;
border: 1px solid transparent;
border-radius: 2px;
background: transparent;
}
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
color: inherit !important;
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.05);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(230, 230, 230, 0.05)), color-stop(100%, rgba(0, 0, 0, 0.05))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); /* IE10+ */
background: -o-linear-gradient(top, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); /* W3C */
}
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
cursor: default;
color: rgba(0, 0, 0, 0.5) !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none;
}
div.dt-container .dt-paging .dt-paging-button:hover {
color: white !important;
border: 1px solid #111;
background-color: #111;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #585858 0%, #111 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #585858 0%, #111 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, #585858 0%, #111 100%); /* IE10+ */
background: -o-linear-gradient(top, #585858 0%, #111 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #585858 0%, #111 100%); /* W3C */
}
div.dt-container .dt-paging .dt-paging-button:active {
outline: none;
background-color: #0c0c0c;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); /* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); /* IE10+ */
background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%); /* W3C */
box-shadow: inset 0 0 3px #111;
}
div.dt-container .dt-paging .ellipsis {
padding: 0 1em;
}
div.dt-container .dt-length,
div.dt-container .dt-search,
div.dt-container .dt-info,
div.dt-container .dt-processing,
div.dt-container .dt-paging {
color: inherit;
}
div.dt-container .dataTables_scroll {
clear: both;
}
div.dt-container .dataTables_scroll div.dt-scroll-body {
-webkit-overflow-scrolling: touch;
}
div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > th, div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > td, div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > th, div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > td {
vertical-align: middle;
}
div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > th > div.dataTables_sizing,
div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > td > div.dataTables_sizing, div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > th > div.dataTables_sizing,
div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > td > div.dataTables_sizing {
height: 0;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
}
div.dt-container.dt-empty-footer tbody > tr:last-child > * {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
div.dt-container.dt-empty-footer .dt-scroll-body {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
div.dt-container.dt-empty-footer .dt-scroll-body tbody > tr:last-child > * {
border-bottom: none;
}
html.dark {
--dt-row-hover: 255, 255, 255;
--dt-row-stripe: 255, 255, 255;
--dt-column-ordering: 255, 255, 255;
}
html.dark table.dataTable > thead > tr > th,
html.dark table.dataTable > thead > tr > td {
border-bottom: 1px solid rgb(89, 91, 94);
}
html.dark table.dataTable > thead > tr > th:active,
html.dark table.dataTable > thead > tr > td:active {
outline: none;
}
html.dark table.dataTable > tfoot > tr > th,
html.dark table.dataTable > tfoot > tr > td {
border-top: 1px solid rgb(89, 91, 94);
}
html.dark table.dataTable.row-border > tbody > tr > *, html.dark table.dataTable.display > tbody > tr > * {
border-top: 1px solid rgb(64, 67, 70);
}
html.dark table.dataTable.row-border > tbody > tr:first-child > *, html.dark table.dataTable.display > tbody > tr:first-child > * {
border-top: none;
}
html.dark table.dataTable.row-border > tbody > tr.selected + tr.selected > td, html.dark table.dataTable.display > tbody > tr.selected + tr.selected > td {
border-top-color: rgba(13, 110, 253, 0.65);
border-top-color: rgba(var(--dt-row-selected), 0.65);
}
html.dark table.dataTable.cell-border > tbody > tr > th,
html.dark table.dataTable.cell-border > tbody > tr > td {
border-top: 1px solid rgb(64, 67, 70);
border-right: 1px solid rgb(64, 67, 70);
}
html.dark table.dataTable.cell-border > tbody > tr > th:first-child,
html.dark table.dataTable.cell-border > tbody > tr > td:first-child {
border-left: 1px solid rgb(64, 67, 70);
}
html.dark .dt-container.dt-empty-footer table.dataTable {
border-bottom: 1px solid rgb(89, 91, 94);
}
html.dark .dt-container .dt-search input,
html.dark .dt-container .dt-length select {
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: var(--dt-html-background);
}
html.dark .dt-container .dt-paging .dt-paging-button.current, html.dark .dt-container .dt-paging .dt-paging-button.current:hover {
border: 1px solid rgb(89, 91, 94);
background: rgba(255, 255, 255, 0.15);
}
html.dark .dt-container .dt-paging .dt-paging-button.disabled, html.dark .dt-container .dt-paging .dt-paging-button.disabled:hover, html.dark .dt-container .dt-paging .dt-paging-button.disabled:active {
color: #666 !important;
}
html.dark .dt-container .dt-paging .dt-paging-button:hover {
border: 1px solid rgb(53, 53, 53);
background: rgb(53, 53, 53);
}
html.dark .dt-container .dt-paging .dt-paging-button:active {
background: #3a3a3a;
}
/*
* Overrides for RTL support
*/
*[dir=rtl] table.dataTable thead th,
*[dir=rtl] table.dataTable thead td,
*[dir=rtl] table.dataTable tfoot th,
*[dir=rtl] table.dataTable tfoot td {
text-align: right;
}
*[dir=rtl] table.dataTable th.dt-type-numeric, *[dir=rtl] table.dataTable th.dt-type-date,
*[dir=rtl] table.dataTable td.dt-type-numeric,
*[dir=rtl] table.dataTable td.dt-type-date {
text-align: left;
}
*[dir=rtl] div.dt-container div.dt-layout-cell.dt-start {
text-align: right;
}
*[dir=rtl] div.dt-container div.dt-layout-cell.dt-end {
text-align: left;
}
*[dir=rtl] div.dt-container div.dt-search input {
margin: 0 3px 0 0;
}

14047
scripts/dtaTables.js Normal file

File diff suppressed because it is too large Load Diff

10716
scripts/jquery.js vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,64 @@
<?php
/*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simple to show how
* server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as
* for learning.
*
* See https://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - https://datatables.net/license_mit
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$table = 'general';
// Table's primary key
$primaryKey = 'id';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
array('db' => 'Instruction', 'dt' => 0),
array('db' => 'Input', 'dt' => 1),
array('db' => 'Output', 'dt' => 2),
array(
'db' => 'Created At',
'dt' => 3,
'formatter' => function ($d, $row) {
return date('jS M y', strtotime($d));
}
)
);
// SQL server connection information
$sql_details = array(
'user' => 'root',
'pass' => 'XmRTSMQ9',
'db' => 'php_crud',
'host' => 'localhost'
// ,'charset' => 'utf8' // Depending on your PHP and MySQL config, you may need this
);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP
* server-side, there is no need to edit below this line.
*/
require('ssp.class.php');
echo json_encode(
SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns)
);

557
scripts/ssp.class.php Normal file
View File

@ -0,0 +1,557 @@
<?php
/*
* Helper functions for building a DataTables server-side processing SQL query
*
* The static functions in this class are just helper functions to help build
* the SQL used in the DataTables demo server-side processing scripts. These
* functions obviously do not represent all that can be done with server-side
* processing, they are intentionally simple to show how it works. More complex
* server-side processing operations will likely require a custom script.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
// Please Remove below 4 lines as this is use in Datatatables test environment for your local or live environment please remove it or else it will not work
$file = $_SERVER['DOCUMENT_ROOT'] . '/datatables/pdo.php';
if (is_file($file)) {
include($file);
}
class SSP
{
/**
* Create the data output array for the DataTables rows
*
* @param array $columns Column information array
* @param array $data Data from the SQL get
* @return array Formatted data in a row based format
*/
static function data_output($columns, $data)
{
$out = array();
for ($i = 0, $ien = count($data); $i < $ien; $i++) {
$row = array();
for ($j = 0, $jen = count($columns); $j < $jen; $j++) {
$column = $columns[$j];
// Is there a formatter?
if (isset($column['formatter'])) {
if (empty($column['db'])) {
$row[$column['dt']] = $column['formatter']($data[$i]);
} else {
$row[$column['dt']] = $column['formatter']($data[$i][$column['db']], $data[$i]);
}
} else {
if (!empty($column['db'])) {
$row[$column['dt']] = $data[$i][$columns[$j]['db']];
} else {
$row[$column['dt']] = "";
}
}
}
$out[] = $row;
}
return $out;
}
/**
* Database connection
*
* Obtain an PHP PDO connection from a connection details array
*
* @param array $conn SQL connection details. The array should have
* the following properties
* * host - host name
* * db - database name
* * user - user name
* * pass - user password
* @return resource PDO connection
*/
static function db($conn)
{
if (is_array($conn)) {
return self::sql_connect($conn);
}
return $conn;
}
/**
* Paging
*
* Construct the LIMIT clause for server-side processing SQL query
*
* @param array $request Data sent to server by DataTables
* @param array $columns Column information array
* @return string SQL limit clause
*/
static function limit($request, $columns)
{
$limit = '';
if (isset($request['start']) && $request['length'] != -1) {
$limit = "LIMIT " . intval($request['start']) . ", " . intval($request['length']);
}
return $limit;
}
/**
* Ordering
*
* Construct the ORDER BY clause for server-side processing SQL query
*
* @param array $request Data sent to server by DataTables
* @param array $columns Column information array
* @return string SQL order by clause
*/
static function order($request, $columns)
{
$order = '';
if (isset($request['order']) && count($request['order'])) {
$orderBy = array();
$dtColumns = self::pluck($columns, 'dt');
for ($i = 0, $ien = count($request['order']); $i < $ien; $i++) {
// Convert the column index into the column data property
$columnIdx = intval($request['order'][$i]['column']);
$requestColumn = $request['columns'][$columnIdx];
$columnIdx = array_search($requestColumn['data'], $dtColumns);
$column = $columns[$columnIdx];
if ($requestColumn['orderable'] == 'true') {
$dir = $request['order'][$i]['dir'] === 'asc' ?
'ASC' :
'DESC';
$orderBy[] = '`' . $column['db'] . '` ' . $dir;
}
}
if (count($orderBy)) {
$order = 'ORDER BY ' . implode(', ', $orderBy);
}
}
return $order;
}
/**
* Searching / Filtering
*
* Construct the WHERE clause for server-side processing SQL query.
*
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here performance on large
* databases would be very poor
*
* @param array $request Data sent to server by DataTables
* @param array $columns Column information array
* @param array $bindings Array of values for PDO bindings, used in the
* sql_exec() function
* @return string SQL where clause
*/
static function filter($request, $columns, &$bindings)
{
$globalSearch = array();
$columnSearch = array();
$dtColumns = self::pluck($columns, 'dt');
if (isset($request['search']) && $request['search']['value'] != '') {
$str = $request['search']['value'];
for ($i = 0, $ien = count($request['columns']); $i < $ien; $i++) {
$requestColumn = $request['columns'][$i];
$columnIdx = array_search($requestColumn['data'], $dtColumns);
$column = $columns[$columnIdx];
if ($requestColumn['searchable'] == 'true') {
if (!empty($column['db'])) {
$binding = self::bind($bindings, '%' . $str . '%', PDO::PARAM_STR);
$globalSearch[] = "`" . $column['db'] . "` LIKE " . $binding;
}
}
}
}
// Individual column filtering
if (isset($request['columns'])) {
for ($i = 0, $ien = count($request['columns']); $i < $ien; $i++) {
$requestColumn = $request['columns'][$i];
$columnIdx = array_search($requestColumn['data'], $dtColumns);
$column = $columns[$columnIdx];
$str = $requestColumn['search']['value'];
if (
$requestColumn['searchable'] == 'true' &&
$str != ''
) {
if (!empty($column['db'])) {
$binding = self::bind($bindings, '%' . $str . '%', PDO::PARAM_STR);
$columnSearch[] = "`" . $column['db'] . "` LIKE " . $binding;
}
}
}
}
// Combine the filters into a single string
$where = '';
if (count($globalSearch)) {
$where = '(' . implode(' OR ', $globalSearch) . ')';
}
if (count($columnSearch)) {
$where = $where === '' ?
implode(' AND ', $columnSearch) :
$where . ' AND ' . implode(' AND ', $columnSearch);
}
if ($where !== '') {
$where = 'WHERE ' . $where;
}
return $where;
}
/**
* Perform the SQL queries needed for an server-side processing requested,
* utilising the helper functions of this class, limit(), order() and
* filter() among others. The returned array is ready to be encoded as JSON
* in response to an SSP request, or can be modified if needed before
* sending back to the client.
*
* @param array $request Data sent to server by DataTables
* @param array|PDO $conn PDO connection resource or connection parameters array
* @param string $table SQL table to query
* @param string $primaryKey Primary key of the table
* @param array $columns Column information array
* @return array Server-side processing response array
*/
static function simple($request, $conn, $table, $primaryKey, $columns)
{
$bindings = array();
$db = self::db($conn);
// Build the SQL query string from the request
$limit = self::limit($request, $columns);
$order = self::order($request, $columns);
$where = self::filter($request, $columns, $bindings);
// Main query to actually get the data
$data = self::sql_exec(
$db,
$bindings,
"SELECT `" . implode("`, `", self::pluck($columns, 'db')) . "`
FROM `$table`
$where
$order
$limit"
);
// Data set length after filtering
$resFilterLength = self::sql_exec(
$db,
$bindings,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table`
$where"
);
$recordsFiltered = $resFilterLength[0][0];
// Total data set length
$resTotalLength = self::sql_exec(
$db,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table`"
);
$recordsTotal = $resTotalLength[0][0];
/*
* Output
*/
return array(
"draw" => isset($request['draw']) ?
intval($request['draw']) :
0,
"recordsTotal" => intval($recordsTotal),
"recordsFiltered" => intval($recordsFiltered),
"data" => self::data_output($columns, $data)
);
}
/**
* The difference between this method and the `simple` one, is that you can
* apply additional `where` conditions to the SQL queries. These can be in
* one of two forms:
*
* * 'Result condition' - This is applied to the result set, but not the
* overall paging information query - i.e. it will not effect the number
* of records that a user sees they can have access to. This should be
* used when you want apply a filtering condition that the user has sent.
* * 'All condition' - This is applied to all queries that are made and
* reduces the number of records that the user can access. This should be
* used in conditions where you don't want the user to ever have access to
* particular records (for example, restricting by a login id).
*
* @param array $request Data sent to server by DataTables
* @param array|PDO $conn PDO connection resource or connection parameters array
* @param string $table SQL table to query
* @param string $primaryKey Primary key of the table
* @param array $columns Column information array
* @param string $whereResult WHERE condition to apply to the result set
* @param string $whereAll WHERE condition to apply to all queries
* @return array Server-side processing response array
*/
static function complex($request, $conn, $table, $primaryKey, $columns, $whereResult = null, $whereAll = null)
{
$bindings = array();
$db = self::db($conn);
$localWhereResult = array();
$localWhereAll = array();
$whereAllSql = '';
// Build the SQL query string from the request
$limit = self::limit($request, $columns);
$order = self::order($request, $columns);
$where = self::filter($request, $columns, $bindings);
$whereResult = self::_flatten($whereResult);
$whereAll = self::_flatten($whereAll);
if ($whereResult) {
$where = $where ?
$where . ' AND ' . $whereResult :
'WHERE ' . $whereResult;
}
if ($whereAll) {
$where = $where ?
$where . ' AND ' . $whereAll :
'WHERE ' . $whereAll;
$whereAllSql = 'WHERE ' . $whereAll;
}
// Main query to actually get the data
$data = self::sql_exec(
$db,
$bindings,
"SELECT `" . implode("`, `", self::pluck($columns, 'db')) . "`
FROM `$table`
$where
$order
$limit"
);
// Data set length after filtering
$resFilterLength = self::sql_exec(
$db,
$bindings,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table`
$where"
);
$recordsFiltered = $resFilterLength[0][0];
// Total data set length
$resTotalLength = self::sql_exec(
$db,
$bindings,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table` " .
$whereAllSql
);
$recordsTotal = $resTotalLength[0][0];
/*
* Output
*/
return array(
"draw" => isset($request['draw']) ?
intval($request['draw']) :
0,
"recordsTotal" => intval($recordsTotal),
"recordsFiltered" => intval($recordsFiltered),
"data" => self::data_output($columns, $data)
);
}
/**
* Connect to the database
*
* @param array $sql_details SQL server connection details array, with the
* properties:
* * host - host name
* * db - database name
* * user - user name
* * pass - user password
* @return resource Database connection handle
*/
static function sql_connect($sql_details)
{
try {
$db = @new PDO(
"mysql:host={$sql_details['host']};dbname={$sql_details['db']}",
$sql_details['user'],
$sql_details['pass'],
array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION)
);
} catch (PDOException $e) {
self::fatal(
"An error occurred while connecting to the database. " .
"The error reported by the server was: " . $e->getMessage()
);
}
return $db;
}
/**
* Execute an SQL query on the database
*
* @param resource $db Database handler
* @param array $bindings Array of PDO binding values from bind() to be
* used for safely escaping strings. Note that this can be given as the
* SQL query string if no bindings are required.
* @param string $sql SQL query to execute.
* @return array Result from the query (all rows)
*/
static function sql_exec($db, $bindings, $sql = null)
{
// Argument shifting
if ($sql === null) {
$sql = $bindings;
}
$stmt = $db->prepare($sql);
//echo $sql;
// Bind parameters
if (is_array($bindings)) {
for ($i = 0, $ien = count($bindings); $i < $ien; $i++) {
$binding = $bindings[$i];
$stmt->bindValue($binding['key'], $binding['val'], $binding['type']);
}
}
// Execute
try {
$stmt->execute();
} catch (PDOException $e) {
self::fatal("An SQL error occurred: " . $e->getMessage());
}
// Return all
return $stmt->fetchAll(PDO::FETCH_BOTH);
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Internal methods
*/
/**
* Throw a fatal error.
*
* This writes out an error message in a JSON string which DataTables will
* see and show to the user in the browser.
*
* @param string $msg Message to send to the client
*/
static function fatal($msg)
{
echo json_encode(array(
"error" => $msg
));
exit(0);
}
/**
* Create a PDO binding key which can be used for escaping variables safely
* when executing a query with sql_exec()
*
* @param array &$a Array of bindings
* @param * $val Value to bind
* @param int $type PDO field type
* @return string Bound key to be used in the SQL where this parameter
* would be used.
*/
static function bind(&$a, $val, $type)
{
$key = ':binding_' . count($a);
$a[] = array(
'key' => $key,
'val' => $val,
'type' => $type
);
return $key;
}
/**
* Pull a particular property from each assoc. array in a numeric array,
* returning and array of the property values from each item.
*
* @param array $a Array to get data from
* @param string $prop Property to read
* @return array Array of property values
*/
static function pluck($a, $prop)
{
$out = array();
for ($i = 0, $len = count($a); $i < $len; $i++) {
if (empty($a[$i][$prop])) {
continue;
}
//removing the $out array index confuses the filter method in doing proper binding,
//adding it ensures that the array data are mapped correctly
$out[$i] = $a[$i][$prop];
}
return $out;
}
/**
* Return a string from an array or a string
*
* @param array|string $a Array to join
* @param string $join Glue for the concatenation
* @return string Joined string
*/
static function _flatten($a, $join = ' AND ')
{
if (! $a) {
return '';
} else if ($a && is_array($a)) {
return implode($join, $a);
}
return $a;
}
}

83
server_side/index.php Normal file
View File

@ -0,0 +1,83 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="generator" content="Hugo 0.72.0">
<title>server-side-datatable</title>
<!-- datatable css -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
</head>
<body style="background-color:#fdfdfd;">
<br>
<h1 align="center" style="color:color(srgb 0.52 0.59 0.7);font-weight:bold;">Datatables server side processing with PHP and MYSQL </h1>
<br>
<div class="container">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>instruction</th>
<th>input</th>
<th>output</th>
<th>Created At</th>
<th>Actions</th>
</tr>
</thead>
</table>
</div>
<!-- datatable js -->
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"searching": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "server_side.php",
"type": "GET",
"data": {
"table": "<?php echo htmlspecialchars($_GET['table']); ?>" // Pasar el nombre de la tabla
}
},
/*"columns": [{
"data": "instruction"
},
{
"data": "input"
},
{
"data": "output"
},
{
"data": "created_ad"
},
{
"data": "id",
"render": function(data, type, row) {
return `
<a href="edit.php?table=<?php echo htmlspecialchars($_GET['table']); ?>&id=${data}" class="btn btn-secondary m-2">Editar</a>
<a href="delete.php?table=<?php echo htmlspecialchars($_GET['table']); ?>&id=${data}" class="btn btn-danger" onclick="return confirm('¿Estás seguro de que deseas eliminar este registro?');">Eliminar</a>
`;
}
}
]*/
});
});
</script>
</body>
</html>

View File

@ -0,0 +1,69 @@
<?php
/*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simple to show how
* server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as
* for learning.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$table = $_GET['table'];
// Table's primary key
$primaryKey = 'id';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
array('db' => 'instruction', 'dt' => 0),
array('db' => 'input', 'dt' => 1),
array('db' => 'output', 'dt' => 2),
array('db' => 'created_ad', 'dt' => 3),
array('db' => 'id', 'dt' => 4)
/** if use date format */
// array(
// 'db' => 'date',
// 'dt' => 3,
// 'formatter' => function( $d, $row ) {
// return '$'.number_format($d);
// }
// )
);
// SQL server connection information
$sql_details = array(
'user' => 'root',
'pass' => 'XmRTSMQ9',
'db' => 'php_crud',
'host' => 'localhost'
);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP
* server-side, there is no need to edit below this line.
*/
require('ssp.class.php');
echo json_encode(
SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns)
);
?>

554
server_side/ssp.class.php Normal file
View File

@ -0,0 +1,554 @@
<?php
/*
* Helper functions for building a DataTables server-side processing SQL query
*
* The static functions in this class are just helper functions to help build
* the SQL used in the DataTables demo server-side processing scripts. These
* functions obviously do not represent all that can be done with server-side
* processing, they are intentionally simple to show how it works. More complex
* server-side processing operations will likely require a custom script.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
// Please Remove below 4 lines as this is use in Datatatables test environment for your local or live environment please remove it or else it will not work
$file = $_SERVER['DOCUMENT_ROOT'].'/datatables/pdo.php';
if ( is_file( $file ) ) {
include( $file );
}
class SSP {
/**
* Create the data output array for the DataTables rows
*
* @param array $columns Column information array
* @param array $data Data from the SQL get
* @return array Formatted data in a row based format
*/
static function data_output ( $columns, $data )
{
$out = array();
for ( $i=0, $ien=count($data) ; $i<$ien ; $i++ ) {
$row = array();
for ( $j=0, $jen=count($columns) ; $j<$jen ; $j++ ) {
$column = $columns[$j];
// Is there a formatter?
if ( isset( $column['formatter'] ) ) {
if(empty($column['db'])){
$row[ $column['dt'] ] = $column['formatter']( $data[$i] );
}
else{
$row[ $column['dt'] ] = $column['formatter']( $data[$i][ $column['db'] ], $data[$i] );
}
}
else {
if(!empty($column['db'])){
$row[ $column['dt'] ] = $data[$i][ $columns[$j]['db'] ];
}
else{
$row[ $column['dt'] ] = "";
}
}
}
$out[] = $row;
}
return $out;
}
/**
* Database connection
*
* Obtain an PHP PDO connection from a connection details array
*
* @param array $conn SQL connection details. The array should have
* the following properties
* * host - host name
* * db - database name
* * user - user name
* * pass - user password
* @return resource PDO connection
*/
static function db ( $conn )
{
if ( is_array( $conn ) ) {
return self::sql_connect( $conn );
}
return $conn;
}
/**
* Paging
*
* Construct the LIMIT clause for server-side processing SQL query
*
* @param array $request Data sent to server by DataTables
* @param array $columns Column information array
* @return string SQL limit clause
*/
static function limit ( $request, $columns )
{
$limit = '';
if ( isset($request['start']) && $request['length'] != -1 ) {
$limit = "LIMIT ".intval($request['start']).", ".intval($request['length']);
}
return $limit;
}
/**
* Ordering
*
* Construct the ORDER BY clause for server-side processing SQL query
*
* @param array $request Data sent to server by DataTables
* @param array $columns Column information array
* @return string SQL order by clause
*/
static function order ( $request, $columns )
{
$order = '';
if ( isset($request['order']) && count($request['order']) ) {
$orderBy = array();
$dtColumns = self::pluck( $columns, 'dt' );
for ( $i=0, $ien=count($request['order']) ; $i<$ien ; $i++ ) {
// Convert the column index into the column data property
$columnIdx = intval($request['order'][$i]['column']);
$requestColumn = $request['columns'][$columnIdx];
$columnIdx = array_search( $requestColumn['data'], $dtColumns );
$column = $columns[ $columnIdx ];
if ( $requestColumn['orderable'] == 'true' ) {
$dir = $request['order'][$i]['dir'] === 'asc' ?
'ASC' :
'DESC';
$orderBy[] = '`'.$column['db'].'` '.$dir;
}
}
if ( count( $orderBy ) ) {
$order = 'ORDER BY '.implode(', ', $orderBy);
}
}
return $order;
}
/**
* Searching / Filtering
*
* Construct the WHERE clause for server-side processing SQL query.
*
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here performance on large
* databases would be very poor
*
* @param array $request Data sent to server by DataTables
* @param array $columns Column information array
* @param array $bindings Array of values for PDO bindings, used in the
* sql_exec() function
* @return string SQL where clause
*/
static function filter ( $request, $columns, &$bindings )
{
$globalSearch = array();
$columnSearch = array();
$dtColumns = self::pluck( $columns, 'dt' );
if ( isset($request['search']) && $request['search']['value'] != '' ) {
$str = $request['search']['value'];
for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i++ ) {
$requestColumn = $request['columns'][$i];
$columnIdx = array_search( $requestColumn['data'], $dtColumns );
$column = $columns[ $columnIdx ];
if ( $requestColumn['searchable'] == 'true' ) {
if(!empty($column['db'])){
$binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
$globalSearch[] = "`".$column['db']."` LIKE ".$binding;
}
}
}
}
// Individual column filtering
if ( isset( $request['columns'] ) ) {
for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i++ ) {
$requestColumn = $request['columns'][$i];
$columnIdx = array_search( $requestColumn['data'], $dtColumns );
$column = $columns[ $columnIdx ];
$str = $requestColumn['search']['value'];
if ( $requestColumn['searchable'] == 'true' &&
$str != '' ) {
if(!empty($column['db'])){
$binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
$columnSearch[] = "`".$column['db']."` LIKE ".$binding;
}
}
}
}
// Combine the filters into a single string
$where = '';
if ( count( $globalSearch ) ) {
$where = '('.implode(' OR ', $globalSearch).')';
}
if ( count( $columnSearch ) ) {
$where = $where === '' ?
implode(' AND ', $columnSearch) :
$where .' AND '. implode(' AND ', $columnSearch);
}
if ( $where !== '' ) {
$where = 'WHERE '.$where;
}
return $where;
}
/**
* Perform the SQL queries needed for an server-side processing requested,
* utilising the helper functions of this class, limit(), order() and
* filter() among others. The returned array is ready to be encoded as JSON
* in response to an SSP request, or can be modified if needed before
* sending back to the client.
*
* @param array $request Data sent to server by DataTables
* @param array|PDO $conn PDO connection resource or connection parameters array
* @param string $table SQL table to query
* @param string $primaryKey Primary key of the table
* @param array $columns Column information array
* @return array Server-side processing response array
*/
static function simple ( $request, $conn, $table, $primaryKey, $columns )
{
$bindings = array();
$db = self::db( $conn );
// Build the SQL query string from the request
$limit = self::limit( $request, $columns );
$order = self::order( $request, $columns );
$where = self::filter( $request, $columns, $bindings );
// Main query to actually get the data
$data = self::sql_exec( $db, $bindings,
"SELECT `".implode("`, `", self::pluck($columns, 'db'))."`
FROM `$table`
$where
$order
$limit"
);
// Data set length after filtering
$resFilterLength = self::sql_exec( $db, $bindings,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table`
$where"
);
$recordsFiltered = $resFilterLength[0][0];
// Total data set length
$resTotalLength = self::sql_exec( $db,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table`"
);
$recordsTotal = $resTotalLength[0][0];
/*
* Output
*/
return array(
"draw" => isset ( $request['draw'] ) ?
intval( $request['draw'] ) :
0,
"recordsTotal" => intval( $recordsTotal ),
"recordsFiltered" => intval( $recordsFiltered ),
"data" => self::data_output( $columns, $data )
);
}
/**
* The difference between this method and the `simple` one, is that you can
* apply additional `where` conditions to the SQL queries. These can be in
* one of two forms:
*
* * 'Result condition' - This is applied to the result set, but not the
* overall paging information query - i.e. it will not effect the number
* of records that a user sees they can have access to. This should be
* used when you want apply a filtering condition that the user has sent.
* * 'All condition' - This is applied to all queries that are made and
* reduces the number of records that the user can access. This should be
* used in conditions where you don't want the user to ever have access to
* particular records (for example, restricting by a login id).
*
* @param array $request Data sent to server by DataTables
* @param array|PDO $conn PDO connection resource or connection parameters array
* @param string $table SQL table to query
* @param string $primaryKey Primary key of the table
* @param array $columns Column information array
* @param string $whereResult WHERE condition to apply to the result set
* @param string $whereAll WHERE condition to apply to all queries
* @return array Server-side processing response array
*/
static function complex ( $request, $conn, $table, $primaryKey, $columns, $whereResult=null, $whereAll=null )
{
$bindings = array();
$db = self::db( $conn );
$localWhereResult = array();
$localWhereAll = array();
$whereAllSql = '';
// Build the SQL query string from the request
$limit = self::limit( $request, $columns );
$order = self::order( $request, $columns );
$where = self::filter( $request, $columns, $bindings );
$whereResult = self::_flatten( $whereResult );
$whereAll = self::_flatten( $whereAll );
if ( $whereResult ) {
$where = $where ?
$where .' AND '.$whereResult :
'WHERE '.$whereResult;
}
if ( $whereAll ) {
$where = $where ?
$where .' AND '.$whereAll :
'WHERE '.$whereAll;
$whereAllSql = 'WHERE '.$whereAll;
}
// Main query to actually get the data
$data = self::sql_exec( $db, $bindings,
"SELECT `".implode("`, `", self::pluck($columns, 'db'))."`
FROM `$table`
$where
$order
$limit"
);
// Data set length after filtering
$resFilterLength = self::sql_exec( $db, $bindings,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table`
$where"
);
$recordsFiltered = $resFilterLength[0][0];
// Total data set length
$resTotalLength = self::sql_exec( $db, $bindings,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table` ".
$whereAllSql
);
$recordsTotal = $resTotalLength[0][0];
/*
* Output
*/
return array(
"draw" => isset ( $request['draw'] ) ?
intval( $request['draw'] ) :
0,
"recordsTotal" => intval( $recordsTotal ),
"recordsFiltered" => intval( $recordsFiltered ),
"data" => self::data_output( $columns, $data )
);
}
/**
* Connect to the database
*
* @param array $sql_details SQL server connection details array, with the
* properties:
* * host - host name
* * db - database name
* * user - user name
* * pass - user password
* @return resource Database connection handle
*/
static function sql_connect ( $sql_details )
{
try {
$db = @new PDO(
"mysql:host={$sql_details['host']};dbname={$sql_details['db']}",
$sql_details['user'],
$sql_details['pass'],
array( PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION )
);
}
catch (PDOException $e) {
self::fatal(
"An error occurred while connecting to the database. ".
"The error reported by the server was: ".$e->getMessage()
);
}
return $db;
}
/**
* Execute an SQL query on the database
*
* @param resource $db Database handler
* @param array $bindings Array of PDO binding values from bind() to be
* used for safely escaping strings. Note that this can be given as the
* SQL query string if no bindings are required.
* @param string $sql SQL query to execute.
* @return array Result from the query (all rows)
*/
static function sql_exec ( $db, $bindings, $sql=null )
{
// Argument shifting
if ( $sql === null ) {
$sql = $bindings;
}
$stmt = $db->prepare( $sql );
//echo $sql;
// Bind parameters
if ( is_array( $bindings ) ) {
for ( $i=0, $ien=count($bindings) ; $i<$ien ; $i++ ) {
$binding = $bindings[$i];
$stmt->bindValue( $binding['key'], $binding['val'], $binding['type'] );
}
}
// Execute
try {
$stmt->execute();
}
catch (PDOException $e) {
self::fatal( "An SQL error occurred: ".$e->getMessage() );
}
// Return all
return $stmt->fetchAll( PDO::FETCH_BOTH );
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Internal methods
*/
/**
* Throw a fatal error.
*
* This writes out an error message in a JSON string which DataTables will
* see and show to the user in the browser.
*
* @param string $msg Message to send to the client
*/
static function fatal ( $msg )
{
echo json_encode( array(
"error" => $msg
) );
exit(0);
}
/**
* Create a PDO binding key which can be used for escaping variables safely
* when executing a query with sql_exec()
*
* @param array &$a Array of bindings
* @param * $val Value to bind
* @param int $type PDO field type
* @return string Bound key to be used in the SQL where this parameter
* would be used.
*/
static function bind ( &$a, $val, $type )
{
$key = ':binding_'.count( $a );
$a[] = array(
'key' => $key,
'val' => $val,
'type' => $type
);
return $key;
}
/**
* Pull a particular property from each assoc. array in a numeric array,
* returning and array of the property values from each item.
*
* @param array $a Array to get data from
* @param string $prop Property to read
* @return array Array of property values
*/
static function pluck ( $a, $prop )
{
$out = array();
for ( $i=0, $len=count($a) ; $i<$len ; $i++ ) {
if(empty($a[$i][$prop])){
continue;
}
//removing the $out array index confuses the filter method in doing proper binding,
//adding it ensures that the array data are mapped correctly
$out[$i] = $a[$i][$prop];
}
return $out;
}
/**
* Return a string from an array or a string
*
* @param array|string $a Array to join
* @param string $join Glue for the concatenation
* @return string Joined string
*/
static function _flatten ( $a, $join = ' AND ' )
{
if ( ! $a ) {
return '';
}
else if ( $a && is_array($a) ) {
return implode( $join, $a );
}
return $a;
}
}

35
test_connection.php Executable file
View File

@ -0,0 +1,35 @@
<?php
// Habilitar mostrar errores
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$conn = mysqli_connect(
'localhost', // Host
'root', // Usuario
'XmRTSMQ9', // Contraseña
'php_crud', // Base de datos
3306 // Puerto (opcional, default 3306)
);
// Verificar conexión
if (!$conn) {
die("<h2>Error de conexión:</h2> " . mysqli_connect_error());
} else {
echo "<h2>¡Conexión exitosa!</h2>";
echo "<h3>Información del servidor:</h3>";
echo "Versión MySQL: " . mysqli_get_server_info($conn);
}
// Probar consulta simple
$query = "SELECT 1+1 AS result";
$result = mysqli_query($conn, $query);
if ($result) {
$row = mysqli_fetch_assoc($result);
echo "<h3>Prueba de consulta:</h3> 1 + 1 = " . $row['result'];
} else {
echo "<h3>Error en consulta:</h3> " . mysqli_error($conn);
}
mysqli_close($conn);
?>