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="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>


<input type="text" value="2014-04-20T00:00:00" id="betweenDates1"/> - <input type="text" id="betweenDates2" value="2014-04-24T00:00:00"/>  <button id="setTimestampRange">Set timestamp range</button> <button id="resetTimestampFilter">Reset timestamp filter</button>

<br/><br/>

<button id="setBooleanTrue">Filter boolean column to true</button> <button id="resetBoolean">Reset boolean filter</button> 

<br/><br/>

<input type="text" value="hou" id="stringContains"/> <button id="setStringContains">Set string column contains</button> <button id="resetString">Reset string filter</button> 

<br/><br/>

<input type="text" value="40.99" id="numericGreater"/> <button id="setNumericGreater">Set numeric column greater than</button> <button id="resetNumeric">Reset numeric filter</button>

<br/><br/>

<input type="text" value="13:15:43" id="timeBefore"/> <button id="setTimeBefore">Set time column before than</button> <button id="resetTime">Reset time filter</button>

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

JavaScript

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser"
    }
}, function (v) {
    var report = v.report({          
             resource:"/public/viz/report_with_different_column_types",
            container: "#container",
            error: function(err) {
                alert(err);
            }
        });
    
    $("#setTimestampRange").on("click", function() {
        report.updateComponent("column_timestamp", { 
            filter: {
                operator: "between",
                value: [$("#betweenDates1").val(), $("#betweenDates2").val()]
            }
        }).fail(handleError);
    });
    
    $("#resetTimestampFilter").on("click", function() {
        report.updateComponent("column_timestamp", { 
            filter: {}
        }).fail(handleError);
    });
    
    $("#setBooleanTrue").on("click", function() {
        report.updateComponent("column_boolean", { 
            filter: {
                operator: "equal",
                value: true
            }
        }).fail(handleError);
    });
    
    $("#resetBoolean").on("click", function() {
        report.updateComponent("column_boolean", { 
            filter: {}
        }).fail(handleError);
    });
    
    $("#setStringContains").on("click", function() {
        report.updateComponent("column_string", { 
            filter: {
                operator: "contain",
                value: $("#stringContains").val()
            }
        }).fail(handleError);
    });
    
    $("#resetString").on("click", function() {
        report.updateComponent("column_string", { 
            filter: {}
        }).fail(handleError);
    });
    
    $("#setNumericGreater").on("click", function() {
        report.updateComponent("column_double", { 
            filter: {
                operator: "greater",
                value: parseFloat($("#numericGreater").val(), 10)
            }
        }).fail(handleError);
    });
    
    $("#resetNumeric").on("click", function() {
...