Visualize: Embed report

Visualize: Embed report

by juliia13

HTML

<!--Provide visualize.js from your jasperreport server-->
<script src='http://localhost:8080/jasperserver-pro/client/visualize.js'></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<nav>
  <ul class="pager"> <ul class='current'>   </ul>
    <li class="previous disabled"><a  href="#" id='Previous'><span aria-hidden="true">&larr;</span> Previous</a></li>
    <li class="next"><a href="#" id='Next'>Next <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

<!--Provide container to render your visualization-->

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

CSS

#container {
  border: 1px solid black;
}

JavaScript

visualize({
  auth: {
    name: "jasperadmin",
    password: "jasperadmin"
  } //this part for user able login 
}, function(v) {


  var _report = v.report({ //this function for embed report into container
    resource: "/public/Samples/Reports/12g.PromotionDetailsReport", //report path
    error: handleError, //function that will executed if we will have any error 
    success: function(data) { //this function will executed if all ok and returned data
      //console.log(data);
    },
    events: {
      reportCompleted: function(status) {

      /*  $('.pagination').empty()
        
        
        
         $('.pagination').append(' <li><a href="#" id="Previous" aria-label="Previous"><span aria-hidden="true">&laquo;</span>  </a></li> ')
         
         
        
        for (var i = 1; i <= _report.data().totalPages; i++) {
          $('.pagination').append('<li> <a href="#" data-item="' + i + '" >' + i + '</a></li>')

        }
        
        
        
          $('.pagination').append('  <li>   <a id="Next" href="#" aria-label="Next">     <span aria-hidden="true">&raquo;</span>   </a>   </li> ')
          
          

        $("[data-item]").click(function() {

          console.log($(this).data('item'));

          _report
            .pages($(this).data('item'))
            .run()
            .fail(function(err) {
              alert(err);
            });

        });*/
        
      
        
   //  $('.current').append(_report.pages());
        
      
      $("a.Previous").click(function() {
					
          var _page=_report.pages() || 1;
          	
          _report
            .pages(--_page)
            .run()
            .fail(function(err) {
              alert(err);
            });
            $('.current').empty();
           $('.current').append(_report.pages());

        });
        
        
        $("a#Next").click(function() {
				
          var _page =( _report.pages() || 1)+1;
          _report
            .pages(_page)
         ...