jQuery ajax fill html table

Question

If I have a table:

<table>
    <thead>
        <tr>Col1</tr>
        <tr>Col2</tr>
        <tr>Col3</tr>
    </thead>
    <tbody>
    </tbody>
</table>

What is the fastest, most efficient way to fill the tbody with tr elements containing my data from a database using a Jquery Ajax. (unless you have a better way)

Return html code from the webservice OR dynamically create the html code in Javascript?

Also I have to support the user "drilling down; i.e. either clicking a > or double clicking the row to open a pane to show some more information. (including another table and some detail information returned by a separate webservice)

All ideas welcome!

I suggest using the jquery template plugin for inserting the data into the table. — bigblind
– bigblind, Commented May 18, 2011 at 13:44

Matt Ball · Accepted Answer · 2011-05-18 13:39:20Z

3

Unless you need to create literally thousands of rows, performance is just not a concern here. Where you generate the markup is really a design decision. You can generate the markup:

Server-side, in your templating language of choice (ASP.NET, PHP, JSP, Django templates...) or
Client-side, using JavaScript templates ($.tmpl, Mustache...)

Client side will (theoretically) decrease the load on your server, but this too is likely not a relevant issue. Whichever flavor you choose, you should use that consistently throughout your app unless there is a truly compelling reason to do otherwise.

edited May 18, 2011 at 13:39

answered May 18, 2011 at 13:31

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Matt Ball Over a year ago

How do you draw that conclusion? The ajax call could return HTML data.

SquidScareMe Over a year ago

@Matt Ball - I'm operating on the assumption that putting the markup in the webservice is not the best approach. You're right, my statement was misleading. I should have clarified.

Xhalent Over a year ago

@SquidScareMe: The server doesn't whether it's an ajax call or not. Is all HTTP to it, baby.

Matt Ball Over a year ago

@kralco: it's not a big deal so long as you minimize the number of DOM manipulations. You can build up one big HTML string and insert it once rather than insert every row individually - much better performance.

pixelbobby Over a year ago

I agree that a web services emitting HTML mark-up is just flat out wrong because it doesn't support good separation of concerns. I would rather have a web service that returns JSON, that way it can be manipulated easily to fit any evolving design requirements over time. You can always implement a client-side mechanism that loads the data progressively.

|

Krupesh Kotecha · Accepted Answer · 2015-10-29 07:46:55Z

2

I work on a large-scale enterprise portal that uses jQuery and AJAX. I've implemented jQuery Templates and the jQuery TableSorter plug-in to facilitate this. Here's some example code:

Javascript (Data Provider): Data.Lists.js

myorg.data.list.GetListItems ({
    webURL: "http://our.awesome.portal.com/Lists",
    listName: "Projects List",
    caml: caml,
    CAMLRowLimit: 6,
    callback: function(data) {
        var list = {};
        //code here that formats some data before binding
        list.items = data;
        var templateHtml = $('.ptMyProjects').html()
        .replace("<!--", "").replace("-->","");
        var html = $.tmpl(templateHtml, list);
        $('.ptMyProjects').html(html);
        //make sortable table
        $('.ptMyProjects .tablesorter').tablesorter({
            sortList: [[0,0]],
            headers: {3: {sorter: false}},
            widgets: ['zebra']
        });
        //class last row
        $('.ptMyProjects .tablesorter thead th').last().addClass('last');
        //add hover effect
        $('.ptMyProjects .tablesorter tbody tr, .tablesorter thead .header').hover(function(){
            $(this).addClass('hover');
        }, function(){
            $(this).removeClass('hover');
        });
        //add tooltips
        $('.ptMyProjects .vg_icon').tipsy({gravity: 's'});
    }
});

HTML (the template)

<div class="ptMyProjects ptTemplate">
    <!--
    <table class="tablesorter" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr class="gradient_gray">
                <th>Title</th>
                <th>Status</th>
                <th style="border-right: none;">Progress</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {{if items.length > 0}}
            {{each items}}
                <tr class='item' recordid="${ows_ID}">
                    <td ><a class='{{if ows_Critical_x0020_Project == "1"}}critical{{/if}}' href="${DisplayURL}">${ows_Title}</a> </td>
                    <td class="status">
                        <a href="#" class="pstatus">${ows_ProjStatus}</a>
                        <div style='display: none;'>
                            {{if ows_ProjComments}}
                                <div style="padding-bottom: 10px;">${ows_ProjComments}</div>
                            {{/if}}
                            <div style="font-weight: bold;">Lasted Edited By ${Editor}</div>
                            <div style="font-style: italic;">${when}</div>
                        </div>
                    </td>
                    <td>
                    <div class="ui-widget-default">
                        <div class="progressbar" value="${ows_PercentComplete}" style="height:100%;"></div>
                    </div>
                    </td>
                    <td class="actions">
                        {{if ows_ProjStatus != "Completed"}}<a href="#" class="vg_icon tick" title="Mark Completed"></a>{{/if}}
                        <a href="${EditURL}" class="vg_icon pencil" title="Edit"></a>
                        <a href="#" class="vg_icon comment" title="Comments"></a>
                    </td>
                </tr>
            {{/each}}
        {{else}}
            <tr><td colspan="4">You have no projects.</td></tr>
        {{/if}}
        </tbody>
    </table>
-->
</div>

edited Oct 29, 2015 at 7:46

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

answered May 18, 2011 at 13:43

pixelbobby

4,4305 gold badges33 silver badges50 bronze badges

15 Comments

kralco626 Over a year ago

I get what the Jquery/javascript code is doing in the callback function. However, what is that Data.Lists.js and GetListItems stuff?

kralco626 Over a year ago

As an aside, with table sorter there is no way to get excel like filtering, is there? Also expanding the table so I can show detail information would also be difficult I think? Adding another row for detail information would mess up the sorting...

pixelbobby Over a year ago

I created a wrapper class that consolidates our $.ajax calls. This is good because we can update the data layer in one location. For example, jQuery overhauled the entire $.ajax namespace in the latest version, and instead of changing all the ajax throughout the site, we just updated the data class files :) our data classes are structured like so: data.js, data.lists.js, data.users, data.groups.js, data.cache.js, etc...

pixelbobby Over a year ago

You could write excel-like-filtering custom (as I've done before) or implement a plug-in. Adding another row may conflict with sorting but I would handle it differently. For example, on one of our tables, when a user clicks on an action we just make another ajax request and show more information in a tooltip or pop-up modal div.

kralco626 Over a year ago

ah yes, i see. We did a similar thing, just on a smaller scale, I have a function that takes in the basic stuff like the service name, parameters, success and fail callbacks... So I would only have to change something once in that function. Not as good as what you did however... :-p

|

SquidScareMe · Accepted Answer · 2011-05-18 13:31:45Z

2

Returning HTML from the webservice tightly couples your code. The better of the two ways is to create the HTML in Javascript.

answered May 18, 2011 at 13:31

SquidScareMe

3,2362 gold badges28 silver badges37 bronze badges

1 Comment

kralco626 Over a year ago

I don't like it, but if it's faster i'll do it... I'm just afraid JavaScript might be too slow.

Community · Accepted Answer · 2017-05-23 12:23:37Z

2

You can use jQuery .ajax() call to return the data in a JSON object and use the .tmpl() templating plugin to render the html.

You can view the templating documentation here : http://api.jquery.com/tmpl/

Update: I posted an example as an answer to another question

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered May 18, 2011 at 13:33

ShaneBlake

11.1k2 gold badges29 silver badges43 bronze badges

Comments

Sydwell · Accepted Answer · 2011-10-28 07:23:09Z

This solution works extremely well for me.

I simply retrieve a two dimension JSONed array from an AJAX PHP call.
(Using the php function json_encode())

Then simply iterate over the array to construct insertable table rows. as shown here.

$.post("./pdo_select.php", {post_query : view_q }, function(data) {
            var textToInsert = '';
            $.each(data, function(row, rowdata) {
               textToInsert += '<tr>';
               $.each(rowdata, function (ele, eledata){
                  textToInsert  += '<td>' + eledata + '</td>';
               });
               textToInsert += '</tr>';
            });
            $("#questions_table").append(textToInsert);

}, 'json');

Note the additional 'json' parameter.

The whole table can be quiet easily manipulated with standard jQuery, from adding a header row, turning one or more rows or tables into input fields.

I guess you don't have to use PDO routines to obtain the details from the database if you don't want to.

Below is a image of a table constructed using the technique listed above enter image description here

Collectives™ on Stack Overflow

jQuery ajax fill html table

5 Answers 5

9 Comments

15 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

15 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related