Fatal编程技术网
  • php/
  • Php 显示MySQL表并将其转换为DataTables，而无需刷新页面

Php 显示MySQL表并将其转换为DataTables，而无需刷新页面

php mysql datatables

Php 显示MySQL表并将其转换为DataTables，而无需刷新页面,php,mysql,datatables,Php,Mysql,Datatables,我试图加载一个MySQL表并将其存储到一个HTML表中，然后将其转换为Datatables。但是，我在用PHP获取的表上遇到了一些问题 我已经读了这两页（，），但它没有显示如何在表上指出 这是我的代码： HTML <!DOCTYPE html> <!-- Connexion page. It is the first page og the web app --> <html> <head> <meta ch

我试图加载一个MySQL表并将其存储到一个HTML表中，然后将其转换为Datatables。但是，我在用PHP获取的表上遇到了一些问题

我已经读了这两页（，），但它没有显示如何在表上指出

这是我的代码：

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>
在这里，我手动设置thead with DataTables columns.data选项，因为我似乎无法指向整个表

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


身份证件
项目
点菜1
点菜2
点菜3
点菜4
点菜5
身份证件
项目
点菜1
点菜2
点菜3
点菜4
点菜5
从上面的代码中，我得到以下网页： 我无法筛选表，无法对列排序，根本无法与数据表交互。将html表转换为DataTables时，它的工作原理是
table#memeListTable
为空

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

以下是使用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
});

$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);
刷新表格：

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

$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);
在load\u table.php中：

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

$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和数据库中创建动态表的容易程度

这里有一个链接，我写了一篇关于如何使用daterange和其他工具的文章：

我自己找到了一个解决方案。问题是等待表中填充内容，然后应用DataTable函数。我是这样做的：

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

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