首页 > 解决方案 > 您可以提供哪些详细信息来帮助我了解如何执行 AJAX 以将数据传递到 Datatable 列

问题描述

获取 server.php 上的所有数据后,我想返回 DataTable 中的数据

所以错误出现在开发者工具中的网络选项卡上 {"current_field":null,"field_count":null,"lengths":null,"num_rows":null,"type":null}

这是我的 HTML 代码 ,如果您想查看,请查看表单标签下方的表格。

<form id="patientForm">
    <div class="form-group">                                
        <input type="text" class="form-control" id="username" placeholder="Enter username">                    
    </div>                 
    <div class="form-group">                                
        <input type="password" class="form-control" id="password" placeholder="Enter password">                    
    </div>
    <div class="form-group">                                
        <input type="text" class="form-control" id="birthday" placeholder="Enter birthday">                    
    </div>
    <div class="form-group">                                
        <input type="text" class="form-control" id="age" placeholder="Enter age">                    
    </div>
    <div class="form-group">                                
        <input type="text" class="form-control" id="mobile-number" placeholder="Enter mobile number">                    
    </div>
    <div class="form-group">                                
        <input type="text" class="form-control" id="full-address" placeholder="Enter full address">                    
    </div>
    <div class="form-group">                                
        <input type="text" class="form-control" id="gender" placeholder="Enter gender">                    
    </div>
    <div class="form-group">                                
        <input type="text" class="form-control" id="nickname" placeholder="Enter nickname">                    
    </div>
    <div class="form-group">
        <input type="text" class="form-control" id="occupation" placeholder="Enter occupation">                    
    </div>
</form>

<!-- Table starts -->
<div class="container-fluid">
    <table class="table table-hover table-responsive" id="patientTable">
        <thead class="table-head">
            <tr>
                <th>Action</th>
                <th>ID</th>
                <th>Username</th>
                <th>Password</th>
                <th>Birthday</th>
                <th>Age</th>
                <th>Mobile #</th>
                <th>Address</th>
                <th>Gender</th>
                <th>Nickname</th>
                <th>Occupation</th>
            </tr>
        </thead>

        <tbody class="tbody">
        </tbody>
    </table>
</div>
<!-- Table ends -->

然后这是我的 jQuery AJAX 代码

$(document).ready(function() {
    var user_id, option;
    option = 4;      

    patientTable = $('#patientTable').DataTable({
        "ajax":{            
            "url": "server.php", 
            "method": 'POST', //we use the POST method
            "data":{
                option:option
            }, //we send option 4 to make a SELECT
            "dataSrc": ""
        },
        "columns":[
            {"defaultContent": "<div class='text-center'><div class='btn-group'><button class='btn button btn-sm btnEdit'><i class='fas fa-edit'></i></button><button class='btn btn-danger btn-sm btnDelete'><i class='fas fa-trash-alt'></i></button></div></div>"},
            {"data": "id"},
            {"data": "username"},
            {"data": "password"},
            {"data": "birthday"},
            {"data": "age"},
            {"data": "mobile_number"},
            {"data": "address"},
            {"data": "gender"},
            {"data": "nickname"},
            {"data": "occupation"}
        ]
    });

});

这是我的 server.php 代码

$username = (isset($_POST['username'])) ? $_POST['username'] : '';
$password = (isset($_POST['password'])) ? $_POST['username'] : '';
$birthday = (isset($_POST['birthday'])) ? $_POST['username'] : '';
$age = (isset($_POST['age'])) ? $_POST['username'] : '';
$mobileNumber = (isset($_POST['mobileNumber'])) ? $_POST['username'] : '';
$fullAddress = (isset($_POST['fullAddress'])) ? $_POST['username'] : '';
$gender = (isset($_POST['gender'])) ? $_POST['username'] : '';
$nickname = (isset($_POST['nickname'])) ? $_POST['username'] : '';
$occupation = (isset($_POST['occupation'])) ? $_POST['username'] : '';
$option = (isset($_POST['option'])) ? $_POST['option'] : '';
$user_id = (isset($_POST['user_id'])) ? $_POST['user_id'] : '';

switch($option){
    case 1: //sample case 1
        $query = "SELECT * FROM `patient_table`";
        $result = $connection->query($query);
        $result->fetch_all(MYSQLI_ASSOC);
        break;
    case 2: //sample case 2
        $query = "SELECT * FROM `patient_table`";
        $result = $connection->query($query);
        $result->fetch_all(MYSQLI_ASSOC);
        break;
    case 3: //sample case 3
        $query = "SELECT * FROM `patient_table`";
        $result = $connection->query($query);
        $result->fetch_all(MYSQLI_ASSOC);
        break;
    case 4:
        $query = "SELECT * FROM patient_table";
        $result = $connection->query($query);
        $result->fetch_all(MYSQLI_ASSOC);
        break;
}

print(json_encode($result, JSON_UNESCAPED_UNICODE));//Send the final array format to AJAX
$connection=null;

标签: phpjquerymysqlajaxdatatables

解决方案


推荐阅读