--- title: "Javascript Template with Jsuites v4" description: "The jSuites.template is very light 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." source: https://jsuites.net/docs/v4/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 ----------------------------------- ```html
``` Quick documentation for the template plugin ------------------------------------------- ### 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 settings | 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. |