{"id":27774,"date":"2021-05-24T13:42:00","date_gmt":"2021-05-24T10:42:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=27774"},"modified":"2021-10-18T04:09:46","modified_gmt":"2021-10-18T01:09:46","slug":"como-usar-datatable-em-php","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pt-pt\/como-usar-datatable-em-php\/","title":{"rendered":"Como usar DataTable em PHP"},"content":{"rendered":"

Voc\u00ea deseja integrar DataTable em seu aplicativo? DataTable adiciona controles de intera\u00e7\u00e3o avan\u00e7ados \u00e0s suas tabelas HTML. Al\u00e9m disso, \u00e9 de c\u00f3digo aberto para que todos possam us\u00e1-lo gratuitamente. \u00c9 \u00fatil quando sua tabela tem centenas de entradas. Usando DataTable, voc\u00ea obter\u00e1 seus recursos integrados, como classifica\u00e7\u00e3o, pesquisa, pagina\u00e7\u00e3o, etc. Neste artigo, mostrarei como usar DataTable em PHP.<\/p>\n

DataTables<\/a> \u00e9 uma escolha popular para listar registros tabulares no aplicativo. Devido \u00e0 sua simplicidade e facilidade de instala\u00e7\u00e3o, os desenvolvedores preferiram us\u00e1-lo.<\/p>\n

Para nosso tutorial, vou criar uma tabela no banco de dados e exibir seus registros na DataTable. O resultado final ser\u00e1 semelhante \u00e0 captura de tela abaixo:<\/p>\n

Come\u00e7ando<\/h3>\n

Para come\u00e7ar, acesse seu phpMyAdmin e crie a tabela usando a consulta abaixo:<\/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
A tabela ‘users’ possui colunas first_name, last_name e age. Adicione entradas fict\u00edcias nesta tabela. O usu\u00e1rio pode usar a biblioteca Faker<\/a> para propagar sua tabela com entradas fict\u00edcias. Usando a biblioteca faker, pode-se adicionar milhares de entradas falsas no banco de dados em poucos instantes.<\/p>\n
Em seguida, crie um config.php<\/code>arquivo e escreva um c\u00f3digo para a conex\u00e3o do banco de dados.<\/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
Certifique-se de substituir os marcadores de posi\u00e7\u00e3o pelos valores reais.<\/p>\n
Como usar DataTable em PHP<\/h3>\n
Para integrar o DataTable, o que vou fazer \u00e9 buscar registros do banco de dados, percorr\u00ea-los e exibi-los em uma tabela. Em seguida, aplique DataTable \u00e0 tabela HTML.<\/p>\n
Crie um index.php<\/code>arquivo e adicione o c\u00f3digo abaixo nele.<\/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
No c\u00f3digo acima, busquei todas as linhas da tabela de ‘usu\u00e1rios’ e atribu\u00ed-as \u00e0 vari\u00e1vel PHP $arr_users<\/code>. Agora, vou percorrer essa vari\u00e1vel e criar a linha da tabela uma por uma.<\/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
Aqui, eu dei um id ‘userTable’ para a tabela. A pr\u00f3xima coisa que preciso fazer \u00e9 incluir os arquivos necess\u00e1rios de DataTable no 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
Finalmente, chame o m\u00e9todo DataTable() no id de tabela fornecido.<\/p>\n
<script>\n$(document).ready(function() {\n\u00a0\u00a0\u00a0\u00a0$('#userTable').DataTable();\n});\n<\/script><\/code><\/pre>\n
Nosso c\u00f3digo final \u00e9 o seguinte;<\/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
Espero que voc\u00ea possa aprender como usar DataTable em PHP. Por favor, compartilhe suas id\u00e9ias na se\u00e7\u00e3o de coment\u00e1rios abaixo.<\/p>\n
Artigos relacionados<\/h4>\n