Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • Hi,

    I have a page with a table-like container, but I want to add pagination for the time we have more than can fit on the page; I've looked at a few solutions (such as https://www.michaelbromley.co.uk/blog/paginate-almost-anything-in-angularjs/), but before I add this solution I was curious if there is a default pagination option for Mango?

    Thanks

    Richard


  • As Mango uses Angular material then the easiest would be https://material.angularjs.org/latest/api/directive/mdTabs


  • Yup everything you see on the link Thomas posted is available to you. The demos are very helpfull aswell


  • Thanks for that!!

    Cheers

    Richard


  • Ok, I went down a different route in the end; using the JSON list, I've calculated the highest page by using the length + 4.9 (to take it to the next integer) and going through the number filter to produce a range of 1 to n:

    <span style="width:120px; display: inline-block;">
        <md-select ng-model="pageStart">
            <md-option ng-repeat="n in range(1,((4.9 + sites.sites.length) / pageSize | number:0)*1)" ng-value="{{( n * pageSize ) - pageSize }}">Page {{n}}</md-option>
        </md-select>
    </span>    		
    

    The ng-value then binds the page number to the selected drop down option, which is later used in an ng-repeat as the starting point for the main loop:

    <div class="table" ng-repeat="site in sites.sites | limitTo: pageSize : pageStart">
    

    This then displays the correct number of items per page.

    Hope that helps someone in the future needing to do a similar thing. Link to my Stack overflow question/answer:

    https://stackoverflow.com/questions/56249064/issues-displaying-multiple-data-points-on-tabs-in-angularjs

    Cheers

    Richard


  • A new requirement was added for the pagination; basically it needs to be callable by a query string added to the end of the URL called; so for example it wants to be http://mango_display_page?page=1 to show page 1; I've already got my JSON store sending through the start page as zero (called Settings.PageStart), which is assigned by <ma-json-store xid="PageConfigXID" value="Settings"></ma-json-store> - can I overwrite this value?

    I can grab the value and place it into a JavaScript function like this:

    var QS = function () {
      var query_string = {};
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
        var pair = vars*.split("=");
        if (typeof query_string[pair[0]] === "undefined") {
          query_string[pair[0]] = pair[1];
        } else if (typeof query_string[pair[0]] === "string") {
          var arr = [ query_string[pair[0]], pair[1] ];
          query_string[pair[0]] = arr;
        } else {
          query_string[pair[0]].push(pair[1]);
        }
      } 
        return query_string;
    } ();
    
    alert("x");
    //alert("x= " + Settings);
    //alert(QS.site);
    alert(QS.page);
    </script>
    

    How would I assign that to the AngularJS variable?

    Thanks

    Richard


  • Hi Richard

    I believe, you do not need your query string function as there is already a component for this. You will need to register you page with the URL of ?page

     <ma-state-params on-change="PageStart = $stateParams.page; stateParams = $stateParams" update- 
     params="updateParams"></ma-state-params>
    

    Here is a help document that explains how to use it with a watchlist:
    https://help.infiniteautomation.com/linking-to-dynamic-pages


  • @craigweb said in Pagination for a page:

    Hi Richard

    I believe, you do not need your query string function as there is already a component for this. You will need to register you page with the URL of ?page

     <ma-state-params on-change="PageStart = $stateParams.page; stateParams = $stateParams" update- 
     params="updateParams"></ma-state-params>
    

    Here is a help document that explains how to use it with a watchlist:
    https://help.infiniteautomation.com/linking-to-dynamic-pages

    Thanks for that, the PageStart variable is read in as what it should be, but seems to be overwritten when I'm reading in the Settings parameters (no matter where I put it on the page), so even when this is at the bottom of the page:

    <ma-state-params on-change="Settings.PageStart = $stateParams.page; stateParams = $stateParams" update-params="updateParams"></ma-state-params>
    

    And this is at the top:

    <ma-json-store xid="PageConfigXID" value="Settings"></ma-json-store><!-- page configuration data -->
    

    The value goes from 2 to 0 with this URL: http://mango2:8080/ui/richard-overview-angular?page=2

    Any idea how to make the value stick ... ?

    Cheers

    Richard


  • @richard-mortimer said in Pagination for a page:

    @craigweb said in Pagination for a page:

    Hi Richard

    I believe, you do not need your query string function as there is already a component for this. You will need to register you page with the URL of ?page

     <ma-state-params on-change="PageStart = $stateParams.page; stateParams = $stateParams" update- 
     params="updateParams"></ma-state-params>
    

    Here is a help document that explains how to use it with a watchlist:
    https://help.infiniteautomation.com/linking-to-dynamic-pages

    Thanks for that, the PageStart variable is read in as what it should be, but seems to be overwritten when I'm reading in the Settings parameters (no matter where I put it on the page), so even when this is at the bottom of the page:

    <ma-state-params on-change="Settings.PageStart = $stateParams.page; stateParams = $stateParams" update-params="updateParams"></ma-state-params>
    

    And this is at the top:

    <ma-json-store xid="PageConfigXID" value="Settings"></ma-json-store><!-- page configuration data -->
    

    The value goes from 2 to 0 with this URL: http://mango2:8080/ui/richard-overview-angular?page=2

    Any idea how to make the value stick ... ?

    Scratch that - I've used two repeats - if the PageStart value doesn't exists - it displays the page as normal, but if it does exist, it does sends it to the second repeat and uses that value for the calculation of where to start the page. Kinda goes against the DRY prinicipal, but works effectively ....

    So, in the first instance:

    <div ng-if="!PageStart" class="table" ng-repeat="site in sites.sites | limitTo: Settings.PageSize : Settings.PageStart">
    

    And in the second:

    <div ng-if="PageStart" class="table" ng-repeat="site in sites.sites | limitTo: Settings.PageSize : (( PageStart - 1 ) * Settings.PageSize)">
    

    Cheers

    Richard