时间戳

首页 > 解决方案 > 显示 MySQL 表并将其转换为 DataTables 而不刷新页面

php - 显示 MySQL 表并将其转换为 DataTables 而不刷新页面

问题描述

我正在尝试加载 MySQL 表并将其存储到 HTML 表中，然后将其转换为 Datatables。但是，我在用 PHP 获取的表格上遇到了一些麻烦。

我已经阅读了这两页（第 1页，第 2 页），但它没有显示如何指向桌子。

所以这是我的代码：

HTML

<!DOCTYPE html>
<!-- Connexion page. It is the first page og the web app -->
<html>
    
    <head>
        <meta charset="utf-8" />  
        <title>Temporis V Crafting List</title>
        
        <!-- DataTables CSS library -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/>

        <!-- jQuery library -->
        <script src="js/jquery-3.6.0.min.js"></script>

        <!-- DataTables JS library -->
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
        
        <!-- JS script -->
        <script type="text/javascript" src="js/script.js"></script>
    </head>

    <body>
        <table id="memListTable" class="display" style="width:100%"></table>
    </body>

</html>

这里没什么特别的，我只是将表存储到table#memListTable.

JavaScript

function refresh_table() {
    // AJAX code to execute query and get back to same page with table content without reloading the page.
    $.ajax({
        type: "POST",
        url: "load_table.php",
        cache: false,
        success: function(html) {
            // alert(dataString);
            console.log(html);
            $("#memListTable").html(html);
        }
    });
};

$(document).ready(function() {
    
    refresh_table();
    
    var table = $('#memListTable').DataTable({
        "columns": [
            {"data": "id"},
            {"data": "Item"},
            {"data": "Carte 1"},
            {"data": "Carte 2"},
            {"data": "Carte 3"},
            {"data": "Carte 4"},
            {"data": "Carte 5"}
        ]
    });
} );

在这里，我使用 DataTables columns.data 选项手动设置 thead，因为我似乎无法指向整个表格。

load_table.php

<?php
    $link = mysqli_connect("localhost", "root", "", "temporis") or die("Echec de connexion à la base");

    $requette = "SELECT * FROM crafts";
    $resultat = mysqli_query($link, $requette);
    $rs = mysqli_fetch_array($resultat);
    
     
?>
    
        <thead>
            <tr>
                <th>id</th>
                <th>Item</th>
                <th>Carte 1</th>
                <th>Carte 2</th>
                <th>Carte 3</th>
                <th>Carte 4</th>
                <th>Carte 5</th>
            </tr>
        </thead>
        <tbody>
            
                <?php do { ?>
                    <tr>
                        <td><?php echo $rs['id']; ?></td>
                        <td><?php echo $rs['Item']; ?></td>
                        <td><?php echo $rs['Carte 1']; ?></td>
                        <td><?php echo $rs['Carte 2']; ?></td>
                        <td><?php echo $rs['Carte 3']; ?></td>
                        <td><?php echo $rs['Carte 4']; ?></td>
                        <td><?php echo $rs['Carte 5']; ?></td>
                    </tr>
                <?php }while($rs = mysqli_fetch_array($resultat)); ?>
           
        </tbody>
        <tfoot>
            <tr>
                <th>id</th>
                <th>Item</th>
                <th>Carte 1</th>
                <th>Carte 2</th>
                <th>Carte 3</th>
                <th>Carte 4</th>
                <th>Carte 5</th>
            </tr>
        </tfoot>
    

<?php
    mysqli_close($link);
?>

从上面的代码中，我得到以下网页： 在此处输入图像描述 我无法过滤表格，无法对列进行排序，根本无法与 DataTables 交互。table#memeListTable将 html 表转换为 DataTables 时，它的工作方式为空。

我希望你们能帮助我。提前致谢。

标签： phpmysqldatatables

解决方案

以下是如何使用 php 和 mysql 使用数据表创建动态表：

html:

<!DOCTYPE html>
<!-- Connexion page. It is the first page og the web app -->
<html>
    
    <head>
        <meta charset="utf-8" />  
        <title>Temporis V Crafting List</title>
        
        <!-- DataTables CSS library -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/>

        <!-- jQuery library -->
        <script src="js/jquery-3.6.0.min.js"></script>

        <!-- DataTables JS library -->
        <script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
        
        <!-- JS script -->
        <script type="text/javascript" src="js/script.js"></script>
    </head>

    <body>
        <table id="memListTable" class="display" style="width:100%">
            <thead>
            <tr>
                <th>id</th>
                <th>Item</th>
                <th>Carte 1</th>
                <th>Carte 2</th>
                <th>Carte 3</th>
                <th>Carte 4</th>
                <th>Carte 5</th>
            </tr>
        </thead>
        <tbody></tbody>
       </table>
    </body>

</html>

表脚本：

var memListTable = $('#memListTable').DataTable({
    ajax: {
        url: 'load_table.php',
        data: function() {
            //for sending extra params along with the URL above
            // if needed
            return {sample: "data"};
        },
        dataSrc: function(data) {
            return data || [];
        }
    },
    processing: true, // this will show loading whenever table reloads or any actions heppens with the table
    "columns": [
         {"data": "id"},
         {"data": "Item"},
         {"data": "Carte 1"},
         {"data": "Carte 2"},
         {"data": "Carte 3"},
         {"data": "Carte 4"},
         {"data": "Carte 5"}
     ]
});

刷新表格：

$('button').on('click', function(e) {
    e.preventDefault(); // prevents default action 
    memListTable.ajax.reload(null, false); // this will reload the table everything user submits the form
});

在 load_table.php 中：

$json = [];
var $sql = "SELECT * FROM crafts";
if ($result = $link->query($sql)) {
    foreach ($result AS $key => $row) {
        $json[] = $row;
    }
} else {
    $json['status'] = 'error';
    $json['message'] = 'Unexpected error';
    $json['error'] = $conn->error;
}
header('Content-type: application/json');
echo json_encode($json, JSON_PRETTY_PRINT);

这就是您可以轻松地在 php 和 datables 中创建动态表的方法

这是一个链接，我在其中写了一篇关于如何使用 daterange 和其他方法进行操作的文章：https ://sarifulislam.com/add-date-range-system-in-datatables/

推荐阅读