0

I have a web part that displays a filtered list of links based on the logged on users profile properties. Its working well, but I cannot work out the best way of adding pagination. The list is never going to be very long, so I would expect most users to see 10 - 15 links, so I am trying to implement each 'page' to 5 items.

I have a JQuery version that uses very simple pagination using the following logic

Global vars

pageSize = 5; pageIndex = items.length/pageSize; firstItem = 0; lastItem = 5;

Next button:

firstItem = firstItem + pageSize; lastItem = lastItem + pageSize;

Previous button:

firstItem = firstItem - pageSize; lastItem = lastItem - pageSize;

I'm not sure how to implement this in the spfx version! So far, all I have managed to do is to wire up the next and previous buttons to event listeners. I can't work out how to do the rest - any one have ideas as to the simplest way to implement this?

Here is my code

import * as React from 'react';
import * as ReactDom from 'react-dom';
import styles from './LinksWp.module.scss';
import { ILinksWpProps } from './ILinksWpProps';
import { escape } from '@microsoft/sp-lodash-subset';
import pnp, { List, RenderListDataOptions } from "sp-pnp-js";
import { setup, Web, NodeFetchClient  } from "sp-pnp-js";
import { ClassListItems, ClassListItemLabels } from './ClassListItem';
import { ISPListItem, ISPLabel } from './IListItems';
import { sp }  from '@pnp/sp';
import { SPFetchClient } from "@pnp/nodejs";
import {
  BaseComponent,
  DefaultButton,
  DetailsList,
  IColumn,
  IDetailsHeaderProps,
  IDetailsList,
  IGroup,
  IRenderFunction,
  IToggleStyles,
  mergeStyles,
  Toggle
} from 'office-ui-fabric-react';

const fontSize = {
  fontSize: '30px',
  };

let myIconClass = '';

let totalItems;
let num=0;
let pageSize;
let pagePrev = 0;
let pageNext = 5;
const mySpan = {
    paddingLeft: '20px',
    verticalAlign: 'top'
    };

export default class LinksWp extends React.Component<ILinksWpProps, any> {
  domElement: any;


public constructor(props:ILinksWpProps,any)
{
super(props);

this.state={
items:[],
i: []};

}
  public render(): React.ReactElement<ILinksWpProps> {


    return (

      <div><span role="heading" aria-level="2" className={styles.myLargeFontClass}>{this.props.description}</span><p></p>
      <div><ul className={styles.myUl}>{
         this.state.items.sort( (a, b) =>{ 
          return a.Desc == b.URL.Desc ? 0 : a.Desc < b.Desc ? -1 : 1;
        })

        .map((item:ISPListItem)=>{
          pageSize=4;
          item.arrayID = num++;

if(item.LinkType.includes("External")){myIconClass = "ms-Icon ms-Icon--Globe"};
if(item.LinkType.includes("SharePoint")){myIconClass = "ms-Icon ms-Icon--SharepointLogoInverse"};
if(item.LinkType.includes("Excel")){myIconClass = "ms-Icon ms-Icon--ExcelLogoInverse16"};
if(item.LinkType.includes("Word")){myIconClass = "ms-Icon ms-Icon--WordLogoInverse16"};
if(item.LinkType.includes("PowerPoint")){myIconClass = "ms-Icon ms-Icon--PowerPointLogo"};
if(item.LinkType.includes("PDF")){myIconClass = "ms-Icon ms-Icon--PDF"};
if(item.arrayID>=0 || item.arrayID <=totalItems-pageSize){
          return(        
          <li><a href={item.URL}><i className={myIconClass} style={fontSize} aria-hidden='true'></i><span style={mySpan}>{item.Desc}{item.arrayID}</span></a></li>           

          );
          }


})}

</ul><button id='MyBtnNext' className={styles.button}>Next..</button>
<button id='MyBtnPrev' className={styles.button}>Next..</button></div>
</div>
      );
      }

public componentDidMount(){

  this._getListItems();

}

private next():any {

  //alert(totalItems);

}

private prev():any {

  //alert(totalItems);

}

public _getListItems():void

{

  let clickEvent= document.getElementById('MyBtNext')
  clickEvent.addEventListener("click", (e: Event) => this.next());

   let clickEvent= document.getElementById('MyBtPrev')
  clickEvent.addEventListener("click", (e: Event) => this.prev());



const myprops = [];


const profile = sp.profiles.myProperties.get()

.then(userprops => {
  userprops = userprops.UserProfileProperties;

  userprops.forEach(myprop => {

    if (myprop.Key == "Office") {
      myprops.push(myprop.Value);

    }

    if (myprop.Key == "Geography") {

      myprops.push(myprop.Value);

    }

    if (myprop.Key == "Country") {

      myprops.push(myprop.Value);

    }

    if (myprop.Key == "FunctionRegion") {

      myprops.push(myprop.Value);
    }

  });


  console.log(myprops);

  let locationVal = myprops[0];
  let functionVal = myprops[1];
  let countryVal = myprops[2];
  let geogVal = myprops[3];

  let camlview: any;



camlview =  "<View><Query><Where><Or><Contains><FieldRef Name='_Location1' /><Value Type='TaxonomyFieldTypeMulti'>" + locationVal + "</Value></Contains>";
camlview += "<Or><Contains><FieldRef Name='_Geography' /><Value Type='TaxonomyFieldTypeMulti'>" + geogVal + "</Value></Contains>";
camlview += "<Or><Contains><FieldRef Name='_Region1' /><Value Type='TaxonomyFieldTypeMulti'>" + functionVal + "</Value></Contains>";
camlview += "<Or><Contains><FieldRef Name='_Function1' /><Value Type='TaxonomyFieldTypeMulti'>" + functionVal + "</Value></Contains>";
camlview += "<Contains><FieldRef Name='_Function1' /><Value Type='TaxonomyFieldTypeMulti'>Global</Value></Contains></Or></Or></Or></Or></Where></Query>";
camlview += "<ViewFields><FieldRef Name='Title' /><FieldRef Name='ComplianceAssetId' /><FieldRef Name='Comments' /><FieldRef Name='_Function1' /><FieldRef Name='_Region1' /><FieldRef Name='_Geography' /><FieldRef Name='_Location1' /><FieldRef Name='ID' /><FieldRef Name='ContentType' /><FieldRef Name='Modified' /><FieldRef Name='Created' /><FieldRef Name='Author' /><FieldRef Name='Editor' /><FieldRef Name='_UIVersionString' /><FieldRef Name='Attachments' /><FieldRef Name='Edit' /><FieldRef Name='LinkTitleNoMenu' /><FieldRef Name='LinkTitle' /><FieldRef Name='DocIcon' /><FieldRef Name='ItemChildCount' /><FieldRef Name='FolderChildCount' /><FieldRef Name='_ComplianceFlags' /><FieldRef Name='_ComplianceTag' /><FieldRef Name='_ComplianceTagWrittenTime' /><FieldRef Name='_ComplianceTagUserId' /><FieldRef Name='_IsRecord' /><FieldRef Name='AppAuthor' /><FieldRef Name='AppEditor' /><FieldRef Name='URL' /><FieldRef Name='URLwMenu' /><FieldRef Name='URLNoMenu' /><FieldRef Name='LinkType' /></ViewFields>";
camlview += "<QueryOptions /><RowLimit>1000</RowLimit></View>";


  sp.web.lists.getByTitle(this.props.description).renderListDataAsStream({
  RenderOptions: RenderListDataOptions.ListData,
  ViewXml : camlview
  //Paging: 'Paged=TRUE&p_ID=' + pageID
}).then
((response: any)=>{
     console.log(response)

     let listItemCollection = response.Row.map(

      item=>new ClassListItems(item)

      );
     this.setState({items: listItemCollection});

     totalItems = this.state.items.length

  }

);
});
}
}
'''

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.