Kas soovite DataTable’i oma rakendusse integreerida? DataTable lisab teie HTML-tabelitele täpsemad koostoime juhtelemendid. Lisaks on see avatud lähtekoodiga, nii et kõik saavad seda tasuta kasutada. See on kasulik, kui teie tabelis on sadu kirjeid. DataTable’i kasutades saate nende sisseehitatud funktsioonid nagu sortimine, otsing, lehekülgede otsimine jne. Selles artiklis näitan teile, kuidas kasutada DataTable-i PHP-s.
DataTables on populaarne valik tabelis olevate kirjete loendisse lisamiseks rakenduses. Arendajad eelistasid selle lihtsuse ja lihtsa paigaldamise tõttu seda kasutada.
Meie õpetuse jaoks koostan andmebaasi tabeli ja kuvan selle kirjed DataTable’is. Lõplik väljund näeb välja nagu allpool olev ekraanipilt:
Alustamine
Alustamiseks minge oma phpMyAdmini ja looge tabel, kasutades järgmist päringut:
CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT,
`first_name` varchar(255) NOT NULL,
`last_name` varchar(255) NOT NULL,
`age` int(11) NOT NULL,
PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;Kasutajate tabelis on veerud eesnimi, perekonnanimi ja vanus. Lisage sellesse tabelisse näivkirjed. Kasutaja saab Fakeri teegi abil oma tabelit mannekeenidega sisestada. Võltsiteegi abil saab mõne hetke jooksul andmebaasi lisada tuhandeid võltskirjeid.
Järgmisena looge config.phpfail ja kirjutage andmebaasi ühendamiseks kood.
config.php
<?php
$conn = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if ($conn->connect_errno) {
echo "Error: ". $conn->connect_error;
}Asendage kohatäited tegelike väärtustega.
Kuidas kasutada DataTable-i PHP-s
DataTable-i integreerimiseks kavatsen andmebaasist kirjeid hankida, selle läbi loopida ja tabelis kuvada. Ja seejärel rakendage DataTable HTML-tabelile.
Looge index.phpfail ja lisage sellesse allolev kood.
<?php
require_once('config.php');
$sql = "SELECT id, first_name, last_name, age FROM users";
$result = $conn->query($sql);
$arr_users = [];
if ($result->num_rows > 0) {
$arr_users = $result->fetch_all(MYSQLI_ASSOC);
}
?>Ülaltoodud koodist hankisin kõik read kasutajate tabelist ja määrasin need PHP muutujale $arr_users. Nüüd vaatan selle muutuja läbi ja koostan ükshaaval tabelirea.
<table id="userTable">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</thead>
<tbody>
<?php if(!empty($arr_users)) { ?>
<?php foreach($arr_users as $user) { ?>
<tr>
<td><?php echo $user['first_name']; ?></td>
<td><?php echo $user['last_name']; ?></td>
<td><?php echo $user['age']; ?></td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>Siin andsin tabelile id ‘userTable’. Järgmine asi, mida ma pean tegema, on HTML-i lisada DataTable’i vajalikud failid.
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>Lõpuks kutsuge antud tabeli ID-l meetod DataTable().
<script>
$(document).ready(function() {
$('#userTable').DataTable();
});
</script>Meie lõplik kood on järgmine;
<?php
require_once('config.php');
$sql = "SELECT id, first_name, last_name, age FROM users";
$result = $conn->query($sql);
$arr_users = [];
if ($result->num_rows > 0) {
$arr_users = $result->fetch_all(MYSQLI_ASSOC);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Datatable</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
</head>
<body>
<table id="userTable">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</thead>
<tbody>
<?php if(!empty($arr_users)) { ?>
<?php foreach($arr_users as $user) { ?>
<tr>
<td><?php echo $user['first_name']; ?></td>
<td><?php echo $user['last_name']; ?></td>
<td><?php echo $user['age']; ?></td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#userTable').DataTable();
});
</script>
</body>
</html>Loodetavasti saate teada, kuidas kasutada DataTable-i PHP-s. Palun jagage oma mõtteid allpool olevas kommentaaride jaotises.