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.

Below are simple steps to create simple template.

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

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:

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

Step 3: Create Simple Json object

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

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>
The following two tabs change content below.
Hi, This is Parvez Alam from India. I am software developer with 4 years’ experience in web development. I have submitted articles on PHP, Mysql, Magento,CSS, HTML, jQuery, web designing and social API. You can subscribe to my blog via RSS/Twitter/Google plus and Facebook. parvez1487(at)gmail(dot)com

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>