Visualize: Render report with pagination

Test plugins

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://localhost:8080/js-dashboard/client/visualize.js"></script>
<select></select>
<br/><br/>
<button id="fitContainer">Fit container</button>
<button id="fitHeight">Fit height</button>
<button id="fitWidth">Fit width</button>
<button id="changeBoxSizing">Change box-sizing</button>
Container width <input id="width" type="text"/>
Container height <input id="height" type="text"/>
<br/><br/>
<div id="container"></div>

CSS

#container {
    width: 1200px;
    height: 600px;
    border: 2px solid black;
    margin: 5px;
    padding: 10px;
    
    box-sizing: border-box;
}

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var report;
    
    v.resourcesSearch({
        folderUri: "/public",
        recursive: true,
        types: ["reportUnit"],
        success: renderResults,
        error: function (err) {
            alert(err);
        }
    });
    
    $("select").on("change", function() {
         report = v.report({
            resource: $(this).val(),
            container: "#container",
            events: {
                beforeRender: function(html) {
                    try {
                    var $jrPageTable = $(html).find(".jrPage");
                    
                    if ($jrPageTable.length) {
                        var $tbody = $jrPageTable.children().detach();
                        $(html).attr("style", $jrPageTable.attr("style")).attr("class",$jrPageTable.attr("class")).children().remove();
                        $(html).html($tbody);
                    }
                    } catch(ex) {}
                }
            },
            error: function(err) {
                alert(err);
            }
        });
    });

    // utility function
    function renderResults(results) {
        $("select").append(_.map(results, function(reportUnit) {
            return "<option value='" + reportUnit.uri + "'>" + reportUnit.label + "</option>";
        }));

        $("select").val(results[0].uri);        
        $("select").trigger("change");
    }
    
    $("#fitWidth").on("click", function() { report.zoom("fitWidth"); });
    
        $("#fitHeight").on("click", function() { report.zoom("fitHeight"); });
    
        $("#fitContainer").on("click", function() { report.zoom("fitContainer"); });
    
    $("#changeBoxSizing").on("click", function() {
        $("#container").css("box-sizing", $("#container").css("box-sizing") === "border-box" ? "content-box" : "border-box");
    });
    
    $("#width").on("change", function() {...