JavaScript Template

Quick reference

Considering the example below:

<script src=""></script>
<link rel="stylesheet" href="" type="text/css" />

<link rel="stylesheet" href="" type="text/css" />
<script type="text/javascript" src=""></script>

<div class='row'>
<div class='column p10'>
    <div id='jsuites-template' style='border:1px solid #ccc; padding: 10px;'></div>

jSuites.template(document.getElementById('jsuites-template'), {
    url: "/plugins/products.json",
    template: {
        item: function(data) {
            return `
                <div class="row">
                    <div class="column f1 p10 center">
                        <div class="column">
                            <img class="users-large mr1" alt="${data.Description}" src="${data.img}">
                        <div class="column">
                    <div class="column f1 p6 center" style="align-self: center;">$${data.Price}</div>
                    <div class="column f1 p10 center" style="align-self: center;">
                        <button class="jbutton dark">Add to cart</button>
    search: true,
    pagination: 5,
    searchPlaceHolder: 'Search a item'


Method Description
template.addItem(data,beginOfDataSet); Adds a new item to the element.
@param boolean beginOfDataSet - defines whether the item should be added at the beginning of the data array.
template.appendData(data,pageNumber); Append data to a specific page.
@param array data - elements to be added.
@param Number pageNumber - page number.
template.refresh(); Updates and re-renders the element.
template.reload(); Reloads the data and changes the pagination to its initial value.
template.removeItem(element); Removes a specific item from the template.
@param DOMElement element - element from the dom tree to be removed.
template.render(pageNumber,forceLoad); Renders data in the element.
@param int pageNumber - initial pagination.
@param boolean forceLoad - for remote data, forces data to be reloaded.
template.renderTemplate(); Renders all visual content in the template.; Searches matching elements
@param string query - search term.
template.setData(data); Sets a new data value and re-renders the element.
@param array data - data to load.
template.updatePagination(); Updates the pagination according to pageNumber.


Method Description
onload Trigger a method when component is loaded.
onload(DOMElement element, Object obj) => void
onchange Trigger a method when pagination is changed.
onchange(DOMElement element, Array data) => void
onsearch Trigger a method when searching.
onsearch(DOMElement element, Object obj, String query) => void
onclick Trigger a method when element is clicked.
on(DOMElement element, Object obj, DOMEvent e) => void

Initialization options

Property Description
url: string Can be loaded from a external file.
data: mixed Data to be rendered.
filter: function Method to apply a filter to the data before it is rendered.
(data: Array) => filteredData: Array
pageNumber: number Current page number.
numberOfPages: number Total number of pages.
template: object { template: { item: function } }
(data: Array) => template string
render: function Method for rendering html content.
(obj: object) => string
noRecordsFound: string Displayed message when data was not found.
containerClass: string Add a class to content container.
search: boolean Shows a searchable input. Default: null.
searchInput: boolean Enables or disables the searchable input. Default: true.
searchPlaceHolder: string Adds a placeholder to the search input.
searchValue: string Changes the value of the search input.
remoteData: boolean Allows remote data search. Default: null.
pagination: number Number of items on each page.