Visualize: Render report with pagination

Test plugins

by NesterOne

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://172.17.10.42:8080/jasperserver-pro-branch/client/visualize.js"></script>
<select id="selected_resource" name="report" disabled="disabled"></select>
<br>
<button id="previousPage" disabled="disabled">Previous Page</button><button disabled="disabled"id="nextPage">Next Page</button>
<br>
Page range: <input disabled="disabled" type="text" id="pageRange"></input>

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

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var report = v.report({
        runImmediately: false,
        container: "#container"
    });
    
    function runReport() {
        $("#selected_resource, #previousPage, #nextPage, #pageRange").attr("disabled", "disabled");
        report.run()
            .fail(function(err) { alert(err); })
            .always(function() {
                $("#selected_resource, #previousPage, #nextPage, #pageRange").removeAttr("disabled");
                if (report.pages() == "1" || (report.pages().indexOf && report.pages().indexOf("1-") === 0)) {
                    $("#previousPage").attr("disabled", "disabled");
                }
            });
    }
    
    function goToPage(direction) {
        var currentPage = report.pages();

        currentPage || (currentPage = 1);    
        
        if (direction == "next") {
            currentPage++;
        } else {
            currentPage--;
        }
        
        if (currentPage <= 0) {
            return;
        }
        
        report.pages(currentPage);
        runReport();
    }
    
    $("#selected_resource").change(function () {
        report.pages(1).resource($(this).val());
        runReport();
    });
    
    $("#previousPage").click(function() {
        goToPage("previous");
    });
    
    $("#nextPage").click(function() {
        goToPage("next");
    });
    
    $("#pageRange").change(function() {
        report.pages($(this).val());
        runReport();
    });
    
    var search = v.resourcesSearch({
        recursive: true,
        folderUri: "/",
        type: ["reportUnit"],
        success: function(data) {
            var select = $("#selected_resource");
            
            for(var i = 0; i < data.length; i++) {
                select.append("<option value='" + data[i].uri + "'>" + data[i].label + "</option>");
            }
            
           ...