In this write-up, I will explain about jQuery templates. You might be facing performance issues when loading more than a 1000 records in your webpage using jQuery.
The solution is jQuery templates.
Let us have some JSON data in your file. The below screen shows the script of JSON data in file.
![]()
You can find the attached code which contains code and JSON data file. Now, we have more than 1000 records in the JSON file.
I will now explain the jQuery Templates concept by fetching the data from the JSON file and displaying it in table by creating templates.
Step1
Create an index.html page. Given below is the code.
- <!DOCTYPE html>
- <html>
-
- <head>
- <title></title>
- <meta charset="utf-8" />
- <script src="jquery-1.10.2.min.js"></script>
- <script src="jquery.tmpl.min.js"></script>
- <script src="OurCustomScript.js"></script>
- </head>
-
- <body>
- <table cellpadding="1" cellspacing="1" border="1">
- <thead>
- <tr>
- <th>ID</th>
- <th>Name</th>
- <th>Contact</th>
- <th>Date of birth</th>
- </tr>
- </thead>
- <tbody id="tbodyData"> </tbody>
- </table>
- </body>
-
- </html>
You can download the template plugin jquery.tmpl.min.js from here.
And in the above html, the JS file OurCustomScript.js is our custom JavaScript code.
Step2
Now, create a JavaScript file with the name OurCustomScript.js and add the below code in it.
- $(document).ready(function() {
- $.get("1000PlusRecords.json", function(responseData) {
-
- $.template('prepareRowsToDisplay', '<tr><td>${id}</td><td>${name}</td><td>${contact}</td><td>${dateOfBirth}</td></tr>');
-
- $.tmpl('prepareRowsToDisplay', responseData).appendTo('#tbodyData');
- });
- });
In the above jQuery code, I have added the comments also to make the code more understandable. Now, run your index.html page, you will see the result as expected, as shown in the screenshot below.