Page range with anchor

Control report pagination with a range of pages and an anchor.

by srikar7

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

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

CSS

#container {
    height: 400px;
    overflow-y: scroll;
    width: 100%;
}

JavaScript

visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {
var $select = $("#sel"),
     report = v.report({
        resource: "/public/Samples/Reports/17._Report_Workbook",
        container: "#container",
        
       success:refreshSel,
        error: function(e) {
            alert(e);
        }
    });
 function refreshSel(datas) {
 console.log(datas);
 console.log(datas.links);
 var ob=datas.links
 var obj = {};
 var newArr = [];
removeDuplicates(ob,"anchor");
 function removeDuplicates(ob, anchor ) {
  
  for ( var i = 0, len = ob.length; i < len; i++ ){
    if(!obj[ob[i][anchor]]) obj[ob[i][anchor]] = ob[i];
  }
  console.log(obj);
  for ( var key in obj ) newArr.push(obj[key]);
  return newArr;
}
 var rep= newArr.reduce(function(memo,link){

 return memo+"<option>"+link.anchor+"</option>";

 },"");
 console.log("re:",newArr);
 console.log("rep:",rep);
 console.log(report.pages);
 $select.html(rep);
 }
 $select.on("change",function(){
report.pages({ anchor: $(this).val() })
            .run()
            .fail(function(e) { alert(e); });
 })
});