Hi, I've been trying to fix a problem with the json of datatable for a long time, and it's that it w

ramon00

This is my HTML file:

<div class="container">

    <!-- Data list table -->
    <table id="userDataList" class="display" style="width:100%">
        <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Email</th>
            <th>Gender</th>
            <th>Country</th>
            <th>Created</th>
            <th>Status</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Email</th>
            <th>Gender</th>
            <th>Country</th>
            <th>Created</th>
            <th>Status</th>
        </tr>
        </tfoot>
    </table>

</div>

<!-- Initialise DataTable -->
<script type="text/javascript" src="table.js"></script>

</body>
</html>
## 
## This is my .js file:


$(document).ready(function(){
    $('#userDataList').DataTable({
        "ajax": "index.php",
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "email" },
            { "data": "gender" },
            { "data": "country" },
            { "data": "created" },
            { "data": "status" }
        ]
    });
});

## Then this is my index.php file:

```
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "datatable";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT first_name, last_name, email, gender, country, created, status FROM members";
$result = $conn->query($sql);

$data = array();

if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
}

echo json_encode($data);

$conn->close();

<?php > ``` ?>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Guessing your row data isn't in the data object that Datatables looks for by default. See the Ajax docs for details. I think you will want to use the ajax.dataSrc option like the second example in the docs.

If this doesn't help then please post an example of the XHR response using the browser's network inspector.

Kevin

ramon00

Hello thank you very much, it didn't workout but here is the browser network response

Thank you very much in advance.

ramon00

This is how the .js file looks now:

$(document).ready(function(){
    $('#userDataList').DataTable({
        "ajax": {
            "url": "index.php",
            "dataSrc":"tableData",
            "columns": [
                {"data": "first_name"},
                {"data": "last_name"},
                {"data": "email"},
                {"data": "gender"},
                {"data": "country"},
                {"data": "created"},
                {"data": "status"}
            ]
        }
    });
});

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

First is you need to set the ajax.dataSrc like the second example with an empty string. Second you have the columns inside the ajax option, it needs to be outside the option. Something like this:

$(document).ready(function(){
    $('#userDataList').DataTable({
        "ajax": {
            "url": "index.php",
            "dataSrc":"",
        },
            "columns": [
                {"data": "first_name"},
                {"data": "last_name"},
                {"data": "email"},
                {"data": "gender"},
                {"data": "country"},
                {"data": "created"},
                {"data": "status"}
            ]
    });
});

Kevin

ramon00

Hello! Thanks a lot for the help, the program is now working