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

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

ramon00ramon00 Posts: 4Questions: 1Answers: 0
edited March 2023 in Free community support

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

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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • ramon00ramon00 Posts: 4Questions: 1Answers: 0

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

    Thank you very much in advance.

  • ramon00ramon00 Posts: 4Questions: 1Answers: 0
    edited March 2023

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • ramon00ramon00 Posts: 4Questions: 1Answers: 0

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

Sign In or Register to comment.