show MySQL table 不刷新页面转成DataTables

Question

我正在尝试加载 MySQL table 并将其存储到 HTML table 中，然后将其转换为数据 table。但是，我在使用 PHP.

获取的 table 上遇到了一些麻烦

我已经看过这两页了(page 1, page 2)，但是没有说明如何点上table。

所以这是我的代码：

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 存储到 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，因为我似乎无法指向完整的 table。

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

从上面的代码我得到以下网页：我无法过滤 table，无法对列进行排序，根本无法与数据表交互。将 html table 转换为 DataTables 时，table#memeListTable 为空。

希望大家帮帮我。提前致谢。

Answer 1

以下是使用 php 创建动态 table 和使用数据 tables 创建动态 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>

Table 脚本:

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"}
     ]
});

刷新table:

$('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

中创建动态 table

这里是 link 我写了一篇关于如何使用 daterange 和其他人做的文章：https://sarifulislam.com/add-date-range-system-in-datatables/

Answer 2

我自己找到了解决办法。事情是等待 table 填充内容，然后应用 DataTable 函数。我是这样做的：

JavaScript

var table;

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) {
            $("#memListTable").html(html);
            table = $('#memListTable').DataTable();
        }
    });
};

$(document).ready(function() {
    refresh_table();
} );

show MySQL table 不刷新页面转成DataTables

Show MySQL table and convert it into DataTables without refreshing the page

php

mysql

datatables