Visualize: Render report with pagination

Test plugins

by Yuriy Bablyukh

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://build-master.jaspersoft.com:7480/jrs-pro-feature-jive-refactoring/client/visualize.js?_opt=false"></script>


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

<br/><br/>


<input type="text" value="2014-04-20T00:00:00" id="betweenDates3"/> - <input type="text" id="betweenDates4" value="2014-12-24T00:00:00"/>  <button id="setDateRange">Set date range</button> <button id="resetDateRange">Reset date 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="10.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: "superuser",
        password: "superuser"
    }
}, function (v) {
    var report = v.report({          
             resource:"/public/Visualize/Adhoc/Ad_Hoc_View_All_columns_Report",
            container: "#container",
            error: function(err) {
                alert(err);
            }
        });
    
    $("#setTimestampRange").on("click", function() {
        report.updateComponent("_detail_level__column_timestamp", { 
            filter: {
                operator: "between",
                value: [$("#betweenDates1").val(), $("#betweenDates2").val()]
            }
        }).fail(handleError);
    });
    
    $("#resetTimestampFilter").on("click", function() {
        report.updateComponent("_detail_level__column_timestamp", { 
            filter: {}
        }).fail(handleError);
    });


    $("#setDateRange").on("click", function() {
        report.updateComponent("_detail_level__column_date", { 
            filter: {
                operator: "between",
                value: [$("#betweenDates3").val(), $("#betweenDates4").val()]
            }
        }).fail(handleError);
    });
    
    $("#resetDateRange").on("click", function() {
        report.updateComponent("_detail_level__column_date", { 
            filter: {}
        }).fail(handleError);
    });
    
    
    $("#setBooleanTrue").on("click", function() {
        report.updateComponent("_detail_level__column_boolean", { 
            filter: {
                operator: "equal",
                value: true
            }
        }).fail(handleError);
    });
    
    $("#resetBoolean").on("click", function() {
        report.updateComponent("_detail_level__column_boolean", { 
            filter: {}
        }).fail(handleError);
    });
    
    $("#setStringContains").on("click", function() {
        report.updateComponent("_detail_level__column_string", { 
            filter: {
                operator: "contain",
                value:...