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

  }

);
});
}
}
'''

0

You may try using pnp spfx control called Pagination. Click here to know how to implement.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.