JavaScript Template
Quick reference
Considering the example below:
<html> <script src="https://jsuites.net/v4/jsuites.js"></script> <script src="https://jsuites.net/v4/jsuites.layout.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.layout.css" type="text/css" /> <div class='row'> <div class='column p10'> <div id='jsuites-template' style='border:1px solid #ccc; padding: 10px;'></div> </div> </div> <script> jSuites.template(document.getElementById('jsuites-template'), { url: "/v4/plugins/products.json", template: { item: function(data) { return ` <div> <div class="row"> <div class="column f1 p10 center"> <div class="column"> <img class="users-large mr1" alt="${data.Description}" src="${data.img}"> </div> <div class="column"> ${data.Title} </div> </div> <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> </div> </div> </div> ` } }, search: true, pagination: 5, searchPlaceHolder: 'Search a item' }); </script> </html>
Methods
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. |
template.search(query); | 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. |
Events
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. |