To jest krótki samouczek na temat dodawania stronicowania, sortowania i funkcji wyszukiwania w siatce tabeli,
Jeśli nie masz czasu na napisanie kodu do stronicowania, sortowania i funkcji wyszukiwania, możesz użyć wtyczki jquery datatable, aby natychmiast dodać tę funkcję . Możesz również zobaczyć samouczek tworzenia stronicowania w rdzeniu php i Jeśli jesteś programistą cakephp, spójrz, Jak utworzyć stronicowanie i sortowanie w cakephp
Zacznijmy więc samouczek.
Tutaj mam bazę danych kodu std w Indiach i muszę utworzyć siatkę tabel z funkcją sortowania stron i wyszukiwania. Zamierzam więc użyć jquery datatable, aby szybko utworzyć tę funkcję.
Przede wszystkim nawiąż połączenie z bazą danych i napisz zapytanie, aby uzyskać dane z bazy danych.
<?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);
?> |
Następnie utwórz stronę widoku. Tutaj zamierzam użyć wersji bootstrap datatable, więc dodaj wymagane pliki bootstrap i datatable css i js na swojej stronie widoku.
<!-- 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="https://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> |
Następnie utwórz dynamiczną siatkę tabeli za pomocą 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> |
Teraz w końcu dodaj funkcję datatable na swojej stronie, aby działała.
<script>
$(function(){
$('#stdcode').DataTable();
});
</script> |
Gdzie #kod std to identyfikator tabeli.
Teraz twój ostateczny plik index.php będzie...
indeks.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="https://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> |
Jeśli masz rekordy przytulania w swojej bazie danych, nie polecam powyższej funkcji datatable, która była bardzo podstawową funkcją datatable. Musisz użyć funkcji przetwarzania serwera z datatable. Zajrzyj tutaj.
https://www.datatables. net/examples/data_sources/server_side.html
DEMO
| POBIERZ
|
