Mysql
 sql >> Baza danych >  >> RDS >> Mysql

Dodaj sortowanie stronicowania i wyszukiwanie za pomocą jquery datatable

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="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>

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="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>

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

Jeśli podoba Ci się ten post, nie zapomnij zasubskrybować mojego publicznego notatnika, aby uzyskać więcej przydatnych rzeczy


  1. Database
  2.   
  3. Mysql
  4.   
  5. Oracle
  6.   
  7. Sqlserver
  8.   
  9. PostgreSQL
  10.   
  11. Access
  12.   
  13. SQLite
  14.   
  15. MariaDB
  1. Dlaczego może istnieć tylko jedna kolumna TIMESTAMP z CURRENT_TIMESTAMP w klauzuli DEFAULT?

  2. Znaki specjalne w PHP / MySQL

  3. Znaki specjalne w nazwie tabeli MySQL

  4. Powtórz ciąg wiele razy w MySQL – REPEAT()

  5. MySQL szybko usuwa duplikaty z dużej bazy danych