EasyTemplate
Freemarker style, For JavaScript,
EasyUI
Series
<#macro userlist data> <table> <caption>${data.caption}</caption> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Followers</th> </tr> </thead> <tbody> <#if (data.list.length > 15)> <#list data.list as list> <tr <#if (list_index % 2)>class="gray"</#if>> <td>${list_index + 1}</td> <td class="bold">${list.username}</td> <td><a href="mailto:${list.email}">${list.email}</td> <td>${list.phone}</td> <td> ${list.followers} Follower${list.followers!==1?'s':''} </td> </tr> </#list> <#elseif (data.list.length >= 5)> <tr><td colspan="5">${data.list.length}</td></tr> <#else> <tr><td colspan="5">N/A</td></tr> </#if> </tbody> </table> </#macro>
//make 1,000 results for test tmpList = ",{username:'Arlen',email:'arlen@x.com',phone:'13123456789',followers:0},{username:'Bala',email:'bala@y.hk',phone:'13212345678',followers:1},{username:'Charlie',email:'charlie@c.gov',phone:'133456789123',followers:2},{username:'Davie',email:'davie@d.cc',phone:'134456789',followers:4},{username:'Eric',email:'eric@e.com',phone:'135674589',followers:5}"; sList = "[" + new Array(201).join(tmpList).substr(1) + "]"; oList = eval(sList); //The data where used in the template data = { caption:'Caption:User List', list:oList };
Render The Table
Detail for easyTemplate