Visualize: Render report with pagination

Test plugins

by Pavel Savushchyk

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script type='text/javascript' src="http://localhost:8080/trunk/client/visualize.js?_opt=false"></script>

<input id="search-query" type="input" />
<button id="search-button">Search</button>

<select id="repo-param">
  <option selected="selected" value="Canada">Canada</option>
  <option value="Mexico">Mexico</option>
  <option value="USA">USA</option>
</select>
<span id="log"></span>
<div id="container"></div>

JavaScript

visualize({
  auth: {
    name: "superuser",
    password: "superuser"
  }
}, function(v) {

  var report = v.report({
    resource: "/public/Samples/Reports/04._Product_Results_by_Store_Type_Report",
    params: {
      "sales__store__store_contact__store_country_1": ["Canada"]
    },
    container: "#container",
    error: showError,
    events: {
      changeTotalPages: function(totalPages) {
        console.log(totalPages);
        $("#log").text(totalPages);
      }
    }
  });

  $('#repo-param').on('change', function() {
    report
      .params({
        "sales__store__store_contact__store_country_1": [$(this).val()]
      })
      .run(function(data) {
        console.log(data);
      });
  });


  function showError(err) {
    alert(err);
  }

  $("#search-button").click(function() {
    report
      .search($("#search-query").val())
      .done(function(results) {
        !results.length && console.log("The search did not return any results!");
        console.log(results);
      })
      .fail(showError);
  });
});