Star

jSuites Template

jSuites.template can create a pagination of your data with the pagination attribute as the example below:


Basic pagination example

jSuites Template pagination source code

<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>
var template = jSuites.template(document.getElementById('jsuites-template'), {
    url: "/v4/plugins/movies.json",
    pagination: 3,
    template: {
        item: function(data) {
            return `
                <div>
                    <div class="row">
                        <div class="column f1 p6 center" style="margin: 10px 0px;">
                            <div class="column">
                                <img class="users-large mr1" alt="${data.overview}" src="${data.poster}">
                            </div>
                            <div class="column">
                                ${data.title}
                            </div>
                        </div>
                        <div class="column f2 p10 center">
                            <span style="display:inline-block; margin: 30px 0px;">${data.genres}</span>
                        </div>
                    </div>
                </div>
            `
        }
    }
});
</script>
</html>

Searching

to add a search to your template, you can simply add the attribute search. Search receives a boolean value, when set to true, your template will have an automatic search. See the example below:


jSuites Template search source code

<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>
var template = jSuites.template(document.getElementById('jsuites-template'), {
    url: "/v4/plugins/movies.json",
    search: true,
    searchPlaceHolder: "Type something",
    pagination: 3,
    template: {
        item: function(data) {
            return `
                <div>
                    <div class="row">
                        <div class="column f1 p6 center" style="margin: 10px 0px;">
                            <div class="column">
                                <img class="users-large mr1" alt="${data.overview}" src="${data.poster}">
                            </div>
                            <div class="column">
                                ${data.title}
                            </div>
                        </div>
                        <div class="column f2 p10 center">
                            <span style="display:inline-block; margin: 30px 0px;">${data.genres}</span>
                        </div>
                    </div>
            </div>
            `
        }
    }
});
</script>
</html>