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://underscorejs.org/underscore-min.js"></script>
<script src="http://localhost:8080/jrs/client/visualize.js"></script>
<!--<script src="http://visualizejs-preview.eng.jaspersoft.com:8080/jasperserver-pro-branch/client/visualize.js"></script> -->
<button id="sortAsc">Sort 2nd column ASC</button>
<button id="sortDesc">Sort 2nd column DESC</button>
<button id="sortNone">Sort 2nd column NONE</button>

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

JavaScript

visualize({
    auth: {
        name: "superuser",
        password: "superuser"
    }
}, function (v) {
    var column2,
        report = v.report({
            resource: "/public/viz/report_with_different_column_types",
            container: "#container",
            events: {
                reportCompleted: function(status, error) {
                    if (status === "ready") {
                        var columns = _.filter(report.data().components, function(component) {
                            return component.componentType == "tableColumn";
                        });
                        
                        column2 = columns[2];
                    }
                }   
            },
            error: function(err) {
                alert(err);
            }
        });
    
    $("#sortAsc").on("click", function() {
        report.updateComponent(column2.id, { sort: { order: "asc" } }).fail(function(e) { alert(e); } );
    });
    
        $("#sortDesc").on("click", function() {
        report.updateComponent(column2.id, { sort: { order: "desc" } }).fail(function(e) { alert(e); } );
    });
    
    $("#sortNone").on("click", function() {
        report.updateComponent(column2.id, { sort: {} }).fail(function(e) { alert(e); } );
    });
});