how to display database with javascript in the form of a table?

Question

I have problems with my application that is when it will display the data from the database in the form of a data table that happen to two sideways instead of down

main.js

$(document).ready(function(){
var sql = ign.sql();
var driver = sql.driver("sqlite","peserta.sqlite");
var qry = sql.query("select * from data");

if(driver){
    //$(".json").html(JSON.stringify(qry));
    var query = qry;
    var html = "";

    $("p").html("Status Database Connection : "+query.status);
    if(query.status){

         $.each(query.content,function(data){
            html += "<td>"+this.no+"</td>";
            html += "<td>"+this.nama+"</td>";
            html += "<td>"+this.alamat+"</td>";
        });
    }

    $(".data").html(html);
}

});

this HTML

<!doctype html>

<p></p>
<!--
<h2>JSON Data</h2>
<div class="json"></div><hr> -->
<table>
<tr>
<td>No</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr class="data">
</tr>
</table>

wait this has nothing to do with your question but what linux distro is that? — washcloth, Commented Nov 15, 2014 at 13:00

thorsten müller · Accepted Answer · 2014-11-15 13:02:29Z

0

You must use the tags (table row) around your rows. Something like this should work:

$.each(query.content,function(data){
        html += "<tr>";
        html += "<td>"+this.no+"</td>";
        html += "<td>"+this.nama+"</td>";
        html += "<td>"+this.alamat+"</td>";
        html += "</tr>";
    });

answered Nov 15, 2014 at 13:02

thorsten müller

5,6591 gold badge24 silver badges30 bronze badges

thanks for the answer , but that's not what I mean , should the name of the column underneath the line no , row underneath the name of the column nama and so on .
– Haviedz Miftah
Commented Nov 15, 2014 at 13:15
@HaviedzMiftah, ah ok, I understand. That's a bit more complicated, since html doesn't directly allow for "horizontal tables". But you could do it by using this structure, though then you have to use several loops, one for numbers, one for name and one for alamat to generate each row.
– thorsten müller
Commented Nov 15, 2014 at 14:16
but I do not understand the existing code between the script tags
– Haviedz Miftah
Commented Nov 17, 2014 at 4:59

Add a comment |

Akshar · Accepted Answer · 2015-07-24 15:02:24Z

0

In your html, replace

<tr class="data">

with

<tbody class="data">

and in your jQuery, do what @thorsten has suggested.

Also, you might have to replace the <td> tags in your static html to <th>, to make them headings and force browsers to render it as .

answered Jul 24, 2015 at 15:02

Akshar

9579 silver badges8 bronze badges

Add a comment |

Collectives™ on Stack Overflow

how to display database with javascript in the form of a table?

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related