Star

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>