Initial commit
This commit is contained in:
commit
8f899c6c89
42
add_dataset.php
Normal file
42
add_dataset.php
Normal 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
29
create_table.php
Normal 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
17
db.php
Executable 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
31
delete_dataset.php
Executable 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
25
delete_table.php
Normal 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
66
edit.php
Executable 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
45
fetchData.php
Normal 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
118
gestor_dataset.php
Normal 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
7
includes/footer.php
Executable 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
31
includes/header.php
Executable 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
60
index.php
Executable 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
30
save_dataset.php
Executable 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
817
scripts/dtaTables.css
Normal 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
14047
scripts/dtaTables.js
Normal file
File diff suppressed because it is too large
Load Diff
10716
scripts/jquery.js
vendored
Normal file
10716
scripts/jquery.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
64
scripts/server_processing.php
Normal file
64
scripts/server_processing.php
Normal 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
557
scripts/ssp.class.php
Normal 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
83
server_side/index.php
Normal 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>
|
||||
69
server_side/server_side.php
Normal file
69
server_side/server_side.php
Normal 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
554
server_side/ssp.class.php
Normal 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
35
test_connection.php
Executable 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);
|
||||
?>
|
||||
Loading…
x
Reference in New Issue
Block a user