Adding dynamic data to a table_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-02 05:42 出处：网络

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 head

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>

Adding dynamic data to a table

精彩评论

关注公众号

热门标签

图文推荐

Adding dynamic data to a table

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：