{"id":24720,"date":"2021-05-24T13:25:00","date_gmt":"2021-05-24T10:25:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24720"},"modified":"2021-10-17T20:42:20","modified_gmt":"2021-10-17T17:42:20","slug":"kuinka-kayttaa-datatable-ohjelmaa-php-ssa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-kayttaa-datatable-ohjelmaa-php-ssa\/","title":{"rendered":"Kuinka k\u00e4ytt\u00e4\u00e4 DataTable-ohjelmaa PHP: ss\u00e4"},"content":{"rendered":"

Haluatko integroida DataTable-sovelluksen? DataTable lis\u00e4\u00e4 edistykselliset vuorovaikutuss\u00e4\u00e4timet HTML-taulukoihisi. Lis\u00e4ksi se on avoimen l\u00e4hdekoodin, joten jokainen voi k\u00e4ytt\u00e4\u00e4 sit\u00e4 ilmaiseksi. Se on hy\u00f6dyllinen, kun taulukossa on satoja merkint\u00f6j\u00e4. DataTable-sovelluksen avulla saat heid\u00e4n sis\u00e4\u00e4nrakennetut ominaisuutensa, kuten lajittelun, haun, sivutuksen jne. T\u00e4ss\u00e4 artikkelissa n\u00e4yt\u00e4n kuinka DataTable-sovellusta k\u00e4ytet\u00e4\u00e4n PHP: ss\u00e4.<\/p>\n

DataTables<\/a> on suosittu valinta taulukkotietueiden luettelointiin sovelluksessa. Yksinkertaisuuden ja helpon asennuksen vuoksi kehitt\u00e4j\u00e4t halusivat k\u00e4ytt\u00e4\u00e4 sit\u00e4.<\/p>\n

Luo opetusohjelmaamme varten taulukko tietokantaan ja n\u00e4yt\u00e4n sen tietueet DataTable-taulukossa. Lopullinen tulos n\u00e4ytt\u00e4\u00e4 seuraavalta kuvakaappaukselta:<\/p>\n

P\u00e4\u00e4st\u00e4 alkuun<\/h3>\n

P\u00e4\u00e4set alkuun siirtym\u00e4ll\u00e4 phpMyAdminiin ja luomalla taulukon k\u00e4ytt\u00e4m\u00e4ll\u00e4 alla olevaa kysely\u00e4:<\/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
K\u00e4ytt\u00e4j\u00e4t-taulukossa on sarakkeet etunimi, sukunimi ja ik\u00e4. Lis\u00e4\u00e4 n\u00e4enn\u00e4ismerkinn\u00e4t t\u00e4h\u00e4n taulukkoon. K\u00e4ytt\u00e4j\u00e4 voi k\u00e4ytt\u00e4\u00e4 Faker-kirjastoa<\/a> p\u00f6yd\u00e4n istuttamiseen nukkeilla<\/a>. Fakkerikirjastoa k\u00e4ytt\u00e4m\u00e4ll\u00e4 voidaan lis\u00e4t\u00e4 tuhansia v\u00e4\u00e4rennettyj\u00e4 merkint\u00f6j\u00e4 tietokantaan hetkess\u00e4.<\/p>\n
Luo seuraavaksi config.php<\/code>tiedosto ja kirjoita koodi tietokantayhteytt\u00e4 varten.<\/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
Muista korvata paikkamerkit todellisilla arvoilla.<\/p>\n
Kuinka k\u00e4ytt\u00e4\u00e4 DataTable-ohjelmaa PHP: ss\u00e4<\/h3>\n
DataTable-toiminnon integroimiseksi aion tehd\u00e4 tietueita hakemalla tietueet tietokannasta, siirtym\u00e4ll\u00e4 sen l\u00e4pi ja n\u00e4ytt\u00e4m\u00e4ll\u00e4 sen taulukossa. Ja aseta sitten DataTable HTML-taulukkoon.<\/p>\n
Luo index.php<\/code>tiedosto ja lis\u00e4\u00e4 siihen alla oleva koodi.<\/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
Yll\u00e4 olevassa koodissa hain kaikki rivit k\u00e4ytt\u00e4jien taulukosta ja osoitin ne PHP-muuttujaan $arr_users<\/code>. K\u00e4yn nyt l\u00e4pi t\u00e4m\u00e4n muuttujan ja luon taulukkorivin yksitellen.<\/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
T\u00e4ss\u00e4 annoin taulukolle id ’userTable’. Seuraava asia, jonka minun on teht\u00e4v\u00e4, on sis\u00e4llytt\u00e4\u00e4 vaaditut DataTable-tiedostot HTML-tiedostoon.<\/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
Kutsu lopuksi menetelm\u00e4 DataTable() annetulla taulukon tunnuksella.<\/p>\n
<script>\n$(document).ready(function() {\n\u00a0\u00a0\u00a0\u00a0$('#userTable').DataTable();\n});\n<\/script><\/code><\/pre>\n
Lopullinen koodimme on seuraava;<\/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
Toivon, ett\u00e4 saatat oppia k\u00e4ytt\u00e4m\u00e4\u00e4n DataTable-ohjelmaa PHP: ss\u00e4. Jaa ajatuksesi alla olevassa kommenttiosassa.<\/p>\n
Aiheeseen liittyv\u00e4t artikkelit<\/h4>\n