JavaScript Template

The jSuites.template is a lightweight JavaScript plugin which allows users to upload data remotely or locally to a template, search and page automatically, you should only be concerned with creating the template.

Shopping template rendering example

Shopping example source code

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

<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: "/v4/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'

Quick documentation for the template plugin


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
onloadTrigger a method when component is loaded.
onload(DOMElement element, Object obj) => void
onchangeTrigger a method when pagination is changed.
onchange(DOMElement element, Array data) => void
onsearchTrigger a method when searching.
onsearch(DOMElement element, Object obj, String query) => void
onclickTrigger a method when element is clicked.
on(DOMElement element, Object obj, DOMEvent e) => void

Initialization settings

Property Description
url: stringCan be loaded from a external file.
data: mixedData to be rendered.
filter: functionMethod to apply a filter to the data before it is rendered.
(data: Array) => filteredData: Array
pageNumber: numberCurrent page number.
numberOfPages: numberTotal number of pages.
template: object{ template: { item: function } }
(data: Array) => template string
render: functionMethod for rendering html content.
(obj: object) => string
noRecordsFound: stringDisplayed message when data was not found.
containerClass: stringAdd a class to content container.
search: booleanShows a searchable input. Default: null.
searchInput: booleanEnables or disables the searchable input. Default: true.
searchPlaceHolder: stringAdds a placeholder to the search input.
searchValue: stringChanges the value of the search input.
remoteData: booleanAllows remote data search. Default: null.
pagination: numberNumber of items on each page.