JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>

<button id="hidePagination">hide pagination controls</button>
<button id="showPagination">show pagination controls</button>

<div id="container"></div>

CSS

html, body, #container {
    height: 100%;
    width: 100%;
    margin: 0;
}

JavaScript

visualize({
    auth: {
        name: "jasperadmin",
        password: "jasperadmin",
        organization: "organization_1"
    }
}, function (v) {
    var dashboard = v.dashboard({
        resource: "/public/Dashboard_with_paginated_reports",
        container: "#container",
        error: function (e) {
            alert(e);
        }
    });

    $("#hidePagination").on("click", function () {
        changePagination(false);
    });

    $("#showPagination").on("click", function () {
        changePagination(true);
    });
    
    function changePagination(pagination) {
        var updates = dashboard.data().components.reduce(function(memo, component) {
            if (component.pagination !== null) {
                memo.push({ id: component.id, pagination: pagination });
            }
            return memo;
        }, []);

        dashboard.updateComponent(updates)
            .fail(function (e) { alert(e); })
            .done(function (data) { console.log(data); });
    }
});