Dynamically updating an html table using JSON using jQuery for a complex object

Question

I am still new to JSON / jQuery.

I need a quick guide on dynamically populating an Html table on a client. My table has fixed columns, but the rows grow dynamically depending on the data received.

Say I have a web method on server ( GetActiveUsers) that returns, say n-users. I am using this sql:

select userId, Title,Surname,FirstName from Users where status=1

Please give me a sample code

Edit

I have a solution for this on this post here thanks guys

Answer 1

jQote jQuery javascript templating engine. : http://aefxx.com/jquery-plugin/jqote.

:

// Example of your json data ... an array of user objects
[{"Title": "Dr.", "Surname": "House", "Firstname": "Geronimo"},
  {"Title": "Mr.", "Surname": "Franklin", "Firstname": "Benjamin"}]

, HTML ( , ):

<script type="text/html" id="template">
    <![CDATA[
        <tr>
            <td class="no"><%= j+1 %></td>
            <td class="title"><%= this.Title %></td>
            <td class="user"><%= this.Firstname + " " + this.Surname %></td>
        </tr>
    ]]>
</script>

, . jQote json .

... your markup ...

<table id="users"></table>

... more markup ...

<script type="text/javascript">
    var jsondata = xxx // get your data somehow

    // Now call jQote on the template providing your json data
    $('#template').jqote(jsondata).appendTo($('#users'));
</script>

(, , jQote , ).

, , .

BTW: - . .