{"id":24735,"date":"2021-05-24T13:39:00","date_gmt":"2021-05-24T10:39:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24735"},"modified":"2021-10-18T02:14:05","modified_gmt":"2021-10-17T23:14:05","slug":"comment-utiliser-datatable-en-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/comment-utiliser-datatable-en-php\/","title":{"rendered":"Comment utiliser DataTable en PHP"},"content":{"rendered":"

Vous souhaitez int\u00e9grer DataTable dans votre application? DataTable ajoute des contr\u00f4les d’interaction avanc\u00e9s \u00e0 vos tableaux HTML. De plus, il est open-source, donc tout le monde peut l’utiliser gratuitement. C’est utile lorsque votre table contient des centaines d’entr\u00e9es. En utilisant DataTable, vous obtiendrez leurs fonctionnalit\u00e9s int\u00e9gr\u00e9es telles que le tri, la recherche, la pagination, etc. Dans cet article, je vous montre comment utiliser DataTable en PHP.<\/p>\n

DataTables<\/a> est un choix populaire pour r\u00e9pertorier les enregistrements tabulaires dans l’application. En raison de sa simplicit\u00e9 et de sa facilit\u00e9 d’installation, les d\u00e9veloppeurs ont pr\u00e9f\u00e9r\u00e9 l’utiliser.<\/p>\n

Pour notre tutoriel, je vais cr\u00e9er une table dans la base de donn\u00e9es et afficher ses enregistrements dans la DataTable. La sortie finale ressemblera \u00e0 la capture d’\u00e9cran ci-dessous\u00a0:<\/p>\n

Commencer<\/h3>\n

Pour commencer, rendez-vous sur votre phpMyAdmin et cr\u00e9ez le tableau \u00e0 l’aide de la requ\u00eate ci-dessous\u00a0:<\/p>\n

CREATE TABLE `users` (\u00a0`id` int(11) NOT NULL AUTO_INCREMENT,\n\u00a0`first_name` varchar(255) NOT NULL,\n\u00a0`last_name` varchar(255) NOT NULL,\n\u00a0`age` int(11) NOT NULL,\n\u00a0PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=latin1;<\/code><\/pre>\n
La table ‘users’ contient les colonnes first_name, last_name et age. Ajoutez des entr\u00e9es fictives dans ce tableau. L’utilisateur peut utiliser la biblioth\u00e8que Faker<\/a> pour ensemencer votre table avec des entr\u00e9es factices. En utilisant la biblioth\u00e8que de faux, on peut ajouter des milliers de fausses entr\u00e9es dans la base de donn\u00e9es en quelques instants.<\/p>\n
Ensuite, cr\u00e9ez un config.php<\/code>fichier et \u00e9crivez un code pour la connexion \u00e0 la base de donn\u00e9es.<\/p>\n
config.php<\/strong><\/p>\n
<?php\n$conn = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);\n\u00a0\nif ($conn->connect_errno) {\n\u00a0\u00a0\u00a0\u00a0echo \"Error: \". $conn->connect_error;\n}<\/code><\/pre>\n
Assurez-vous de remplacer les espaces r\u00e9serv\u00e9s par les valeurs r\u00e9elles.<\/p>\n
Comment utiliser DataTable en PHP<\/h3>\n
Pour int\u00e9grer DataTable, je vais r\u00e9cup\u00e9rer les enregistrements de la base de donn\u00e9es, les parcourir et les afficher dans une table. Et puis appliquez DataTable au tableau HTML.<\/p>\n
Cr\u00e9ez un index.php<\/code>fichier et ajoutez-y le code ci-dessous.<\/p>\n
<?php\nrequire_once('config.php');\n\u00a0\n$sql = \"SELECT id, first_name, last_name, age FROM users\";\n$result = $conn->query($sql);\n$arr_users = [];\nif ($result->num_rows > 0) {\n\u00a0\u00a0\u00a0\u00a0$arr_users = $result->fetch_all(MYSQLI_ASSOC);\n}\n?><\/code><\/pre>\n
Dans le code ci-dessus, j’ai r\u00e9cup\u00e9r\u00e9 toutes les lignes de la table ‘users’ et les ai affect\u00e9es \u00e0 la variable PHP $arr_users<\/code>. Maintenant, je vais parcourir cette variable et cr\u00e9er la ligne du tableau une par une.<\/p>\n
<table id=\"userTable\">\n\u00a0\u00a0\u00a0\u00a0<thead>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>First Name<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Last Name<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Age<\/th>\n\u00a0\u00a0\u00a0\u00a0<\/thead>\n\u00a0\u00a0\u00a0\u00a0<tbody>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php if(!empty($arr_users)) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach($arr_users as $user) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['first_name']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['last_name']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['age']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0<\/tbody>\n<\/table><\/code><\/pre>\n
Ici, j’ai donn\u00e9 un identifiant ‘userTable’ \u00e0 la table. La prochaine chose que je dois faire est d’inclure les fichiers requis de DataTable dans le code HTML.<\/p>\n
<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.datatables.net\/1.10.21\/css\/jquery.dataTables.min.css\"\/>\n<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"\/\/cdn.datatables.net\/1.10.21\/js\/jquery.dataTables.min.js\"><\/script><\/code><\/pre>\n
Enfin, appelez la m\u00e9thode DataTable() sur l’identifiant de table donn\u00e9.<\/p>\n
<script>\n$(document).ready(function() {\n\u00a0\u00a0\u00a0\u00a0$('#userTable').DataTable();\n});\n<\/script><\/code><\/pre>\n
Notre code final est le suivant ;<\/p>\n
<?php\nrequire_once('config.php');\n\u00a0\n$sql = \"SELECT id, first_name, last_name, age FROM users\";\n$result = $conn->query($sql);\n$arr_users = [];\nif ($result->num_rows > 0) {\n\u00a0\u00a0\u00a0\u00a0$arr_users = $result->fetch_all(MYSQLI_ASSOC);\n}\n?>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\u00a0\u00a0\u00a0\u00a0<meta charset=\"UTF-8\">\n\u00a0\u00a0\u00a0\u00a0<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\u00a0\u00a0\u00a0\u00a0<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n\u00a0\u00a0\u00a0\u00a0<title>Datatable<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.datatables.net\/1.10.21\/css\/jquery.dataTables.min.css\"\/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<table id=\"userTable\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<thead>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>First Name<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Last Name<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<th>Age<\/th>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/thead>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tbody>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php if(!empty($arr_users)) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php foreach($arr_users as $user) { ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['first_name']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['last_name']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><?php echo $user['age']; ?><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<?php } ?>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tbody>\n\u00a0\u00a0\u00a0\u00a0<\/table>\n\u00a0\u00a0\u00a0\u00a0<script src=\"\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script type=\"text\/javascript\" src=\"\/\/cdn.datatables.net\/1.10.21\/js\/jquery.dataTables.min.js\"><\/script>\n\u00a0\u00a0\u00a0\u00a0<script>\n\u00a0\u00a0\u00a0\u00a0$(document).ready(function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#userTable').DataTable();\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0<\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
J’esp\u00e8re que vous pourrez apprendre \u00e0 utiliser DataTable en PHP. S’il vous pla\u00eet partager vos pens\u00e9es dans la section commentaire ci-dessous.<\/p>\n
Articles Li\u00e9s<\/h4>\n