Pagination for a page

richard.mortimer

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

ThomasEinasto

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

CraigWeb

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

richard.mortimer

Thanks for that!!

Cheers

Richard

richard.mortimer

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

richard.mortimer

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

CraigWeb

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

richard.mortimer

@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

@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>
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