Fill in the HTML table of the AJAX response

advertisements

I have some data in MySQL database. I want to show that data in html table based on the parameter selected by the user. Following is the input section (HTML)

<form class="form-inline">
    <div class="input-group">
        <div>Enter Person Name</div>
        <input class="form-control" id="tags">
    </div>
    <div class="btn-group">
        <button type="submit" id="btnSubmit">Search</button>
    </div>
</form>

This is the table where I want to populate the data coming from AJAX response.

<div class="dataTable_wrapper">
    <table class='table table-striped table-bordered table-hover' id='records_table'>
        <tr class='odd gradeX'>
            <th>Name</th>
            <th>Group</th>
            <th>Work</th>
            <th>Grade1</th>
            <th>Grade2</th>
            <th>Grade3</th>
            <th>TeacherName</th>
            <th>RollNo</th>
        </tr>
    </table>
</div>

Now on clicking the 'Search' button, I want to send the name to PHP file, and get the information form database.

for which I have done this:

$(document).ready(function () {
    $("#btnSubmit").click(function (e) {
        e.preventDefault();
        var selText = $('#tags').val();

        if (selText === '') {
            alert("Please select a name!");
        } else {
            $.ajax({
                type: 'GET',
                url: 'getData.php',
                jsonpCallback: 'jsonCallback',
                dataType: 'jsonp',
                jsonp: false,
                data: {
                    q: selText
                },
                success: function (response) {
                    alert(response);
                    var trHTML = '';

                    $.each(response, function (i, item) {
                        $.each(item, function (_, o) {
                            trHTML += '<tr><td>' + o.Name +
                                '</td><td>' + o.Group +
                                '</td><td>' + o.Work +
                                '</td><td>' + o.Grade1 +
                                '</td><td>' + o.Grade2 +
                                '</td><td>' + o.Grade3 +
                                '</td><td>' + o.TeacherName +
                                '</td><td>' + o.RollNo. +
                                '</td></tr>';
                        });
                    });
                    $('#records_table').append(trHTML);
                },
                error: function (e) {
                    $("#txtHint").html(e.responseText);
                }
            });
        }
    });
});

The PHP code is

<?php
$servername = "localhost"; $username = "root"; $password = "21343"; $dbname = "do_demob";
$selectedName = $_GET['q'];
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
$sql = "SELECT *** Don't have rights to reveal";
$result = mysqli_query($conn, $sql);
$rows = array();
if($result) {
    while($row = mysqli_fetch_assoc($result)) {
    $rows[] = $row;
    }
}else {
    echo 'MySQL Error: ' . mysqli_error();
}
$json = json_encode($rows);
echo $json;
mysqli_close($conn);
?>

The AJAX response is

[{"Name":"Sagar Mujumbdar","Group":"","TeacherName":"John     Cena","RollNo":"SX51998","Work":"Sales","Grade1":"Good","Grade2":"5","Grade3":"1"}]

the Status Code is:200 OK. I also checked in Developer Tools' Network section, the data is coming completely and in correct format. The key names are also correct. But unfortunately the data is not being displayed in the table. Is the reason that because JSON object contain null values it is not displaying? If not, then what else can be the reason?


  1. You have a syntax error right after RollNo:

    '</td><td>' + o.RollNo. +
    
    

    Remove the ..

  2. In your iteration, you go one element to deep, o.* will be undefined, because o already is "Sagar Mujumbdar", "", etc. One .each is enough:

    $.each(response, function (i, o) {
        trHTML += '<tr><td>' + o.Name +
                  '</td><td>' + o.Group +
                  '</td><td>' + o.Work +
                  '</td><td>' + o.Grade1 +
                  '</td><td>' + o.Grade2 +
                  '</td><td>' + o.Grade3 +
                  '</td><td>' + o.TeacherName +
                  '</td><td>' + o.RollNo. +
                  '</td></tr>';
    });
    
    

I also created a fiddle with your AJAX response.