CODEWITHSUNDEEP
javascriptjqueryajaxhtml-table
user559780
user559780

Reputation: 219

Adding dynamic data to a table

I've the following table in my application. I've a ajax request which will fetch the results to be shown in the table. How add these results to the table without overriding the header every time?

<table id="itemList">
    <td>Name</td>
    <td>Price</td>
    <td>Quantity</td>
    <td>Total</td>
</table>

Then the ajax data is as shown below

var items = [
    { Name: "Apple", Price: "80", Quantity : "3", Total : "240" },
    { Name: "Orance", Price: "50", Quantity : "4", Total : "200" },
    { Name: "Banana", Price: "20", Quantity : "8", Total : "160" },
    { Name: "Cherry", Price: "250", Quantity : "10", Total : "2500" }
];

Now I'm trying something like this but it is not working

var rows = "";
$.each(items, function(){
    rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>";
});

$( "#itemList" ).text('<tr><td>Name</td><td>Price</td><td>Quantity-</td><td>Total</td></tr>' + rows  );

Upvotes: 1

Views: 32464

Answers (4)

Sandwich
Sandwich

Reputation: 2289

The Table structure was wrong, need to use <tbody> and <thead>, here is a working fiddle. 

<table id="itemList">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
</tbody>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You can solve this by making two changes.

You can modify you html as

<table id="itemList">
    <thead>
        <tr>
            <td>Name</td>
            <td>Price</td>
            <td>Quantity</td>
            <td>Total</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

And Script as

var rows = "";
$.each(items, function(){
    rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>";
});

$( rows ).appendTo( "#itemList tbody" );

You can find a working solution here.

But a jquery plugin called templates is built for this purpose.

Using jquery templates it can be solved as given below

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
        <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
    </head>
    <body>
        <script id="itemTemplate" type="text/x-jquery-tmpl">
            <tr>
                <td>${Name}</td>
                <td>${Price}</td>
                <td>${Quantity}</td>
                <td>${Total}</td>
            </tr>
        </script>

        <table id="itemList">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Price</td>
                    <td>Quantity</td>
                    <td>Total</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

        <script type="text/javascript">
            $(document).ready(function(){
                var items = [
                    { Name: "Apple", Price: "80", Quantity : "3", Total : "240" },
                    { Name: "Orance", Price: "50", Quantity : "4", Total : "200" },
                    { Name: "Banana", Price: "20", Quantity : "8", Total : "160" },
                    { Name: "Cherry", Price: "250", Quantity : "10", Total : "2500" }
                ];

                $( "#itemTemplate" ).tmpl( items ).appendTo( "#itemList tbody" );
            });
        </script>
    </body>
</html>

But if you are further interested you go deep into some other plugins like dataTables or jqgrid which are quite good grid data frameworks using jQuery.

Upvotes: 7

jamesmortensen
jamesmortensen

Reputation: 34038

Welcome to 2011! Happy New Year! We live in a wonderful and exciting time! No more does a web developer ever have to worry about the details of manually building a table again... ever.

http://datatables.net/ will solve just about any problem you could possibly conceive. The developers of this plug-in have thought of it all. They've solved this problem so that you don't have to, which allows you to focus on your business goals.

I can't emphasize enough how powerful this JQuery plug-in is. Please take a look at all of the numerous examples on their site. They even have an example of how to dynamically add a row: http://datatables.net/examples/api/add_row.html.

Disclaimer: I had nothing to do with the development of DataTables. I'm just really excited about it because it's made my life so much easier.

Upvotes: 0

user394307
user394307

Reputation:

As you are working with JQuery, check out the JQuery Temaplate. Might look like little convoluted but it would be a better approach, IMO.

Upvotes: 0

Related Questions