How to put data from database table to a html table using ajax and php

Question

I want to do is put my database table data to html table in my index page using ajax and php.

My problem is the data is not showing. Does anyone know whats the problem with my code?

html:

<table id="myTable2">
        <thead>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Action</th>
        </thead>
        <tbody>
        </tbody>
</table>

script:

<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: 'process.php',
type: 'post',
data: {tag: 'getData'},
dataType: 'json',
success: function(data){
        if(data.success){
            $.each(data, function(index, record){
                if($.is_numeric(index)){
                    var row = $("<tr />");
                    $("<td />").text(record.name).appendTo(row);
                    $("<td />").text(record.age).appendTo(row);
                    $("<td />").text(record.gender).appendTo(row);
                    $("<td />").text(record.action).appendTo(row);
                    row.appendTo('myTable2');
                }
            })
            }
        }
    });
$('#myTable2').dataTable({
        "bjQueryUI": true,
        "sPaginationType": "full_numbers"
});
});
</script>

process.php

<?php
error_reporting(-1);
ini_set('display_errors', 'On');

if(isset($_POST['tag'])){
try{

$host = "localhost";
$user = "root";
$pass = "";
$db = "test";

$dbc = new PDO("mysql:host=" . $host . ";dbname=" . $db, $user, $pass);
$dbc->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = "SELECT name, age, gender, action FROM viewtables";
$result = $dbc->prepare($sql);

if(!$result->execute()) return false;
if($result->rowCount() > 0) {
    $json = array();
    while ($row = $result->fetch()){
        $json[] = array(
            'name' => $row['name'],
            'age' => $row['age'],
            'gender' => $row['gender'],
            'action' => $row['action']
        );
    }
    $json['success'] = true;
    echo json_encode($json);
}
} catch (PDOException $e) {
    echo "Error: " .$e->getMessage();
}
}   
?>

if you are using dataTables plugin .. why not use it to render your tables? — Ramy Nasr
– Ramy Nasr, Commented Jul 30, 2014 at 21:25

Paul Roub · Accepted Answer · 2014-07-30 21:41:41Z

2

At the very least, this:

    row.appendTo('myTable2');

needs to be:

    row.appendTo('#myTable2');

since you're looking for id=myTable2, not a <myTable2> tag.

Though, as noted in Theodore's comment, you really want:

$('#myTable2 tbody').append(row);

edited Jul 30, 2014 at 21:41

answered Jul 30, 2014 at 21:26

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Theodore Enderby Over a year ago

I believe in this case its $('#myTable2').find('tbody').append(row)

Theodore Enderby Over a year ago

+1 becuase I didn't know you could use selectors for children like that!

Theodore Enderby · Accepted Answer · 2014-07-30 21:42:28Z

1

As stated by Paul, your selector is wrong

hash is for id $('#myTable')
period ( . ) is for class $('.redTable')
no prefix for element (a, li, table) $('table')
More advanced with attribute selectors $(['href="importantLink.html"'])

Check and make sure PHP is returing a good object for your script. Make sure that your finding your DOM elements with the right selectors.

$('#myTable2').find('tbody').append(row); is what you are looking for

answered Jul 30, 2014 at 21:42

Theodore Enderby

6421 gold badge6 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to put data from database table to a html table using ajax and php

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related