Visualize: Render report with pagination

Test plugins

by tsareg

HTML

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://localhost:8080/jasperserver-pro/client/visualize.js"></script>
<script src="http://underscorejs.org/underscore-min.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 numeric filter</button>

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

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var columns,
        report = v.report({
            resource:"/public/viz/report_with_different_column_types",
            container: "#container",
            events: {
                reportCompleted: function(status, error) {
                    if (status === "ready") {
                        columns = _.filter(report.data().components, function(component) {
                            return component.componentType == "tableColumn";
                        });
                    }
                }   
            },
            error: function(err) {
                alert(err);
            }
        });
    
    $("#setTimestampRange").on("click", function() {
        var column = _.findWhere(columns, { dataType: "datetime"});
        report.updateComponent(column.id, { 
            filter: {
                operator: "between",
                value: [$("#betweenDates1").val(), $("#betweenDates2").val()]
            }
        }).fail(function(err) { console.log(err); alert(err); });
    });
    
    $("#resetTimestampFilter").on("click", function() {
        var column = _.findWhere(columns, { dataType: "datetime"});
        report.updateComponent(column.id, { 
            filter: {}
        }).fail(function(err) { console.log(err); alert(err); });
    });
    
    $("#setBooleanTrue").on("click", function() {
        var column = _.findWhere(columns, { dataType: "boolean"});
        report.updateComponent(column.id, { 
            filter: {
                operator: "equal",
                value: true
            }
        }).fail(function(err) { console.log(err); alert(err); });
    });
    
    $("#resetBoolean").on("click", function() {
        var column = _.findWhere(columns, { dataType: "boolean"});
        report.updateComponent(column.id, { 
            filter: {}
        }).fail(function(err) { console.log(err); alert(err); });
    });
...