jSuites Template
Methods
The example below shows how to interact programmatically with the core functionalities from jSuites template.
jSuites Template example source code
<html> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/template/template.min.css" type="text/css" /> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@jsuites/template/template.min.js"></script> <div class='row'> <div class='column p10'> <div id='jsuites-template' style='border:1px solid #ccc; padding: 10px;'></div> </div> </div> <script> var template = jSuites.template(document.getElementById('jsuites-template'), { url: "/plugins/animals.json", template: { item: function(data,obj) { return ` <div data-index="${data.id}"> <div class="row"> <div class="column f1 p6 center"> <div class="column"> <img class="users-large mr1" alt="${data.description}" src="${data.image}"> </div> <div class="column"> ${data.name} </div> </div> <div class="column f1 p10 center"> <button onclick="this.duplicate(e)" class="jbutton dark" style="margin: 10px 0px;">Duplicate</button> </div> <div class="column f1 p10 center"> <button onclick="this.removeItem(e)" class="jbutton dark" style="margin: 10px 0px; background: red;">Remove</button> </div> </div> </div> ` }, removeItem: function(e) { var element = e.target.parentNode.parentNode.parentNode; template.removeItem(element); }, duplicate: function(e) { var element = e.target.parentNode.parentNode.parentNode; var item = template.options.data.find(function(item) { return item.id == element.getAttribute('data-index'); }); template.addItem(item,false); } }, search: true, pagination: 4, searchPlaceHolder: 'Look for an animal' }); </script> </html>