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 overr开发者_如何学运维iding 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 );
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.
As you are working with JQuery, check out the JQuery Temaplate. Might look like little convoluted but it would be a better approach, IMO.
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.
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>
加载中,请稍侯......
精彩评论