Este es un tutorial rápido sobre cómo agregar funciones de paginación, clasificación y búsqueda en la cuadrícula de su tabla.
Si no tiene tiempo para escribir código para la función de paginación, clasificación y búsqueda, puede usar el complemento jquery datatable para agregar estas funciones al instante. . También puede ver un tutorial para crear paginación en core php y si es desarrollador de cakephp, eche un vistazo, Cómo crear paginación y clasificación en cakephp
Así que comencemos el tutorial.
Aquí tengo una base de datos de códigos estándar de la India y necesito crear una cuadrícula de tabla con clasificación de paginación y función de búsqueda. Así que voy a usar jquery datatable para hacer que estas funciones sean rápidas.
En primer lugar, realice la conexión a la base de datos y escriba la consulta para obtener los datos de la base de datos.
<?php
$hostname = "localhost";
$username = "root";
$password = "root";
$dbname = "test";
$con = mysqli_connect($hostname, $username, $password, $dbname);
$query = "SELECT * FROM stdcodes";
$result = mysqli_query($con, $query);
?> |
Después de eso, cree la página de vista. Aquí voy a usar la versión de tabla de datos de arranque, así que agregue los archivos css y js de arranque y tabla de datos requeridos en su página de visualización.
<!-- CSS Library --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"> <!-- JS Library --> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script> |
Después de eso, cree una cuadrícula de tabla dinámica usando php
<table id="stdcode" class="table table-striped table-bordered dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
<thead>
<tr >
<th>S.No</th><th>Stdcode</th> <th>City</th><th>Circle</th>
</tr>
</thead>
<tbody>
<?php $sn=1; foreach($result as $resultSet) { ?>
<tr>
<th><?= $sn ?></th><th><?= $resultSet['stdcode'] ?></th> <th><?= $resultSet['city'] ?></th><th><?= $resultSet['circle'] ?></th>
</tr>
<?php $sn++; } ?>
</tbody>
</table> |
Ahora, finalmente, agregue la función de tabla de datos en su página para que funcione.
<script>
$(function(){
$('#stdcode').DataTable();
});
</script> |
Donde #stdcode es la identificación de la tabla.
Ahora su archivo index.php final será...
index.php
<?php
$hostname = "localhost";
$username = "root";
$password = "root";
$dbname = "test";
$con = mysqli_connect($hostname, $username, $password, $dbname);
$query = "SELECT * FROM stdcodes";
$result = mysqli_query($con, $query);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jquery datatable demo</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
</head>
<body>
<div style="margin:0 auto; text-align:center; width:80%">
<h3>Jquery DataTable demo(PHP, MYSQL)</h3>
<table id="stdcode" class="table table-striped table-bordered dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
<thead>
<tr >
<th>S.No</th><th>Stdcode</th> <th>City</th><th>Circle</th>
</tr>
</thead>
<tbody>
<?php $sn=1; foreach($result as $resultSet) { ?>
<tr>
<th><?= $sn ?></th><th><?= $resultSet['stdcode'] ?></th> <th><?= $resultSet['city'] ?></th><th><?= $resultSet['circle'] ?></th>
</tr>
<?php $sn++; } ?>
</tbody>
</table>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script>
$(function(){
$('#stdcode').DataTable();
});
</script>
</body>
</html> |
Si tiene registros de abrazos en su base de datos, entonces no recomendaré la función de tabla de datos anterior que era una función muy básica de la tabla de datos. Debe usar la función de procesamiento del servidor de la tabla de datos. Eche un vistazo.
https://www.datatables. net/examples/data_sources/server_side.html
DEMOSTRACIÓN
| DESCARGAR
|
