Hur man använder DataTable i PHP

Senaste uppdateringen okt 17, 2021

Innehåll

Vill du integrera DataTable i din applikation? DataTable lägger till avancerade interaktionskontroller i dina HTML-tabeller. Dessutom är den öppen källkod så att alla kan använda den gratis. Det är användbart när din tabell har hundratals poster. Med hjälp av DataTable får du deras inbyggda funktioner som sortering, sökning, paginering etc. I den här artikeln visar jag dig hur du använder DataTable i PHP.

DataTables är ett populärt val för att lista tabellposter i applikationen. På grund av sin enkelhet och enkla installation föredrog utvecklare att använda den.

För vår handledning skapar jag en tabell i databasen och visar dess poster i datatabellen. Den slutliga utdata kommer att se ut som nedan skärmdump:

Komma igång

För att komma igång, gå över till din phpMyAdmin och skapa tabellen med hjälp av nedanstående fråga:

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;

Tabellen ‘användare’ har kolumner förnamn, efternamn och ålder. Lägg till dummy-poster i denna tabell. Användaren kan använda Faker-biblioteket för att utsäta din tabell med dummy-poster. Med hjälp av faker-biblioteket kan man lägga till tusentals falska poster i databasen inom några ögonblick.

Skapa sedan en config.phpfil och skriv en kod för databasanslutning.

config.php

<?php
$conn = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
 
if ($conn->connect_errno) {
    echo "Error: ". $conn->connect_error;
}

Se till att ersätta platshållarna med de faktiska värdena.

Hur man använder DataTable i PHP

Att integrera DataTable vad jag ska göra är att hämta poster från databasen, slinga igenom den och visa den i en tabell. Och använd sedan DataTable i HTML-tabellen.

Skapa en index.phpfil och lägg till koden nedan i den.

<?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);
}
?>

I ovanstående kod hämtade jag alla rader från tabellen ‘användare’ och tilldelade dem till PHP-variabeln $arr_users. Nu kommer jag att gå igenom denna variabel och skapa tabellraden en efter en.

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

Här gav jag ett id ‘userTable’ till tabellen. Nästa sak jag behöver göra är att inkludera de nödvändiga filerna i DataTable i HTML-koden.

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

Slutligen, anropa metoden DataTable() på det angivna tabell-id: t.

<script>
$(document).ready(function() {
    $('#userTable').DataTable();
});
</script>

Vår slutkod är som följer;

<?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>

Jag hoppas att du kan lära dig att använda DataTable i PHP. Dela dina tankar i kommentarsektionen nedan.

relaterade artiklar

Inspelningskälla: artisansweb.net