Displaying Json data in page block table but problem is it's more than 500 records so i want some pagination.
Like after clicking next button it should display rest of records


/////////////////////////////////////////////////Visualforce Page\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
<apex:tab label="DemoMail Sent" name="name3" id="tab3">        
<apex:repeat value="{!performcallout}" var="wraps">
<apex:pageBlockTable value="{!wraps.GroupData}" var="wrap" width="100%">
<apex:column headerValue="Subject" value="{!wrap.Subject}"/>
<apex:column headerValue="Video Title" value="{!wrap.SessionTitle}"/>
<apex:column headerValue="Sent Date" value="{!wrap.SentDate}"/>
<apex:column headerValue="Recipients" value="{!wrap.NoOfContacts}"/>
<apex:column headerValue="Opens" value="{!wrap.OpenTimes}"/>
<apex:column headerValue="Viewed" value="{!wrap.ViewedTimes}"/>
</apex:pageBlockTable>
</apex:repeat>
    </apex:tab>

//////////////////////////////////////////////Controller\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

public class demomailsent{
  public List<demomailsentwrap> ConsoleWrapperList{get;set;}
  
       public List<demomailsentwrap> getperformcallout(){
      ConsoleWrapperList = new List<demomailsentwrap>();
       HttpRequest req = new HttpRequest(); 
       HttpResponse res = new HttpResponse();
        Http http = new Http(); 
        req.setEndpoint('http://webapi.demomail.net/test/DemomailSent.js'); 
        req.setMethod('GET');
        //req.setHeader('Authorization', 'OAuth '+UserInfo.getSessionId());
        res = http.send(req);
         //System.assert(false,res.getBody()+'******');
       
         if(res.getstatusCode() == 200 && res.getbody() != null)
          { 
        String replaceIllegal= res.getbody().replaceAll('\n','').replaceAll('\r','');
        ConsoleWrapperList=(List<demomailsentwrap>)System.JSON.deserialize(replaceIllegal,List<demomailsentwrap>.class);
        //ConsoleWrapperList1 = ConsoleWrapperList.replaceall('\r\n','');
          //System.debug('Response Checking Engine: '+ res.getBody());
          }
            return consolewrapperlist; 
             
          }
//////////////////////////////////////////////  Wrapper Class\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


public class demomailsentwrap {

public String TotalViewCount{get;set;}   

public String TotalRecords{get;set;}    
public String TotalDisplayRecords{get;set;} 
public String ErrorCode{get;set;}   
public List<GroupData> GroupData{get;set;}  
public class GroupData 
{        
public String ID{get;set;}  
public String Subject{get;set;}            
public String SessionTitle{get;set;}          
public String SentDate{get;set;}          
public String NoOfContacts{get;set;}          
public String OpenTimes{get;set;}          
public String ViewedTimes{get;set;}          
  
}     
}