Jtemplate Tutorial ...

jTemplate is a JQuery template engine that works with AJAX and JSON data.You can use it in the following steps:

1- Download the JQuery JavaScript file and reference it in your web page:

   1. <scrip src="scripts/jQuery-jtemplates.min.js" type="text/javascript"></script>

<scrip src="scripts/jQuery-jtemplates.min.js" type="text/javascript"></script>

2- define your template:

   1. <script type="text/html" id="TemplateResultsTable"> 
   2. {#template MAIN} 
   3. <table  cellpadding="10" cellspacing="0"> 
   4.   <tr> 
   5.     <th>Artist</th> 
   6.     <th>Company</th> 
   7.     <th>Title</th> 
   8.     <th>Price</th> 
   9.   </tr> 
  10.   {#foreach $T.d as CD} 
  11.     {#include ROW root=$T.CD} 
  12.   {#/for} 
  13. </table> 
  14. {#/template MAIN} 
  15. {#template ROW} 
  16. <tr class="{#cycle values=[,evenRow]}"> 
  17.   <td>{$T.Artist}</td> 
  18.   <td>{$T.Company}</td> 
  19.   <td>{$T.Title}</td> 
  20.   <td>{$T.Price}</td> 
  21. </tr> 
  22. {#/template ROW} 
  23. </script>
 
3- call your web service in your script:

   1. $(document).ready(function() { 
   2.           $.ajax({ 
   3.               type: "POST", 
   4.               url: "CDCatalog.asmx/GetCDCatalog", 
   5.               data: "{}", 
   6.               contentType: "application/json; charset=utf-8", 
   7.               dataType: "json", 
   8.               success: function(msg) { 
   9. //instantiate a template with data
  10.                   ApplyTemplate(msg);  
  11.               } 
  12.           }); 
  13.       }); 
  14. function ApplyTemplate(msg) { 
  15.       $(‘#Container’).setTemplate($("#TemplateResultsTable").html()); 
  16.       $(‘#Container’).processTemplate(msg); 
  17. }

 Original Source: