CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
user3882672
user3882672

Reputation: 135

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

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

Upvotes: 0

Views: 2357

Answers (2)

Theodore Enderby
Theodore Enderby

Reputation: 642

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

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36438

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

Upvotes: 2

Related Questions