php - Populate HTML table from AJAX response -

i have data in mysql database. want show data in html table based on parameter selected user. following 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 table want populate data coming 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 'search' button, want send name php file, , information form database.

for have done this:

$(document).ready(function () {     $("#btnsubmit").click(function (e) {         e.preventdefault();         var seltext = $('#tags').val();          if (seltext === '') {             alert("please select 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

<?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 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. checked in developer tools' network section, data coming , in correct format. key names correct. unfortunately data not being displayed in table. reason because json object contain null values not displaying? if not, else can reason?

1. you have syntax error right after rollno:

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

   remove ..

2. in iteration, go 1 element deep, o.* undefined, because o "sagar mujumbdar", "", etc. 1 .each 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 created fiddle ajax response.