Simple Jquery Template Tutorial

In this tutorial I will described how to create simple template with help of jQuery template plugin. Jquery templating is very exciting and innovation tool of jQuery lovers. jQuery template plugin works only Json object.

Also checkout other tutorials of Jquery Template,

Below are simple steps to create simple template.

Step 1:Add script source in head tag of file.

Select Code
1
2
3
4
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
</head>

Step 2: Create HTML file to display template:

Select Code
1
2
<button id="showBtn">Show Result</button><br/>
<table><tbody id="resultList"></tbody></table>

Step 3: Create Simple Json object

Select Code
1
2
3
4
5
6
7
<script>
  var movies = [
  { Fname: "Parvez", Lname: "alam", Age: "25" },
  { Fname: "Peeyush", Lname: "Sharma", Age: "18" },
  { Fname: "Ved", Lname: "Prakash", Age: "25" }
  ];
  </script>

Step 4: Add Java script code to render template

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
<script>
var markup = "<tr><td colspan='2'>${Fname}</td><td>Released: ${Lname}</td><td>Director: ${Age}</td></tr>"

/* Compile markup string as a named template */
$.template( "movieTemplate", markup );

/* Render the named template */
$( "#showBtn" ).click( function() {
  $( "#resultList" ).empty();
  $.tmpl( "movieTemplate", movies ).appendTo( "#resultList" );
});
</script>