JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/javascript' src="http://code.jquery.com/jquery-2.1.0.js"></script>

<script src="http://build-master.jaspersoft.com:5980/jrs-pro-trunk/client/visualize.js"></script>

<button id="previousPage" disabled><</button>
<input id="currentPage" value="1" style="width: 30px;"/>
<button id="nextPage">></button>

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


</script>

JavaScript

visualize({
	auth: {
		name: "superuser", 
		password: "superuser",
	}
}, function (v) {
    var currentPage = 1,
        totalPages,
        report = v.report({
            resource: "/public/Samples/Reports/AllAccounts",
            container: "#container",
            events: {
                changePagesState: function(page) {
                    currentPage = page;
                    checkPagesConditions();
                },
                changeTotalPages: function(pages) {
                    totalPages = pages;
                    checkPagesConditions();
                }
            }
        });

    $("#currentPage").on("change", function() {
        var value = parseInt($(this).val(), 10);
        
        if (!isNaN(value) && value >= 1 && value <= totalPages) {
            currentPage = value;

            report
			    .pages(currentPage)
    			.run()
                    .done(checkPagesConditions)
		    		.fail(function(err) { alert(err); });
        }       
	});
	
    $("#previousPage").on("click", function() {
        report
			.pages(--currentPage)
			.run()
                .done(checkPagesConditions)
				.fail(function(err) { alert(err); });
	});

	$("#nextPage").on("click", function() {
        report
			.pages(++currentPage)
			.run()
                .done(checkPagesConditions)
                .fail(function(err) { alert(err); });
	});
    
    function checkPagesConditions() {
        $("#currentPage").val(currentPage);
        $("#previousPage").prop("disabled", currentPage === 1);
        $("#nextPage").prop("disabled", currentPage === totalPages);
    }
});