You have to make custom pagination with help of Apex. You can use Lightning data table for displaying records with pagination.
// Apex Class
public with sharing class DataTableWithPagenation {
@AuraEnabled
public static AccountPagerWrapper fetchAccount(Decimal pageNumber ,Integer recordToDisply) {
Integer pageSize = recordToDisply;
Integer offset = ((Integer)pageNumber - 1) * pageSize;
AccountPagerWrapper obj = new AccountPagerWrapper();
obj.pageSize = pageSize;
obj.page = (Integer) pageNumber;
obj.total = [SELECT count() FROM account];
obj.accounts = [SELECT Id, Name,Phone FROM Account ORDER BY Name LIMIT :recordToDisply OFFSET :offset];
return obj;
}
public class AccountPagerWrapper {
@AuraEnabled public Integer pageSize {get;set;}
@AuraEnabled public Integer page {get;set;}
@AuraEnabled public Integer total {get;set;}
@AuraEnabled public List accounts {get;set;}
}
}
Lightning :
// Component
<aura:attribute name="Accounts" type="Account[]"/>
<aura:attribute name="page" type="integer" description="using for store page Number"/>
<aura:attribute name="pages" type="integer" description="using for store All Pages page Number"/>
<aura:attribute name="total" type="integer" description="total records count store "/>
<aura:attribute name="mycolumns" type="List"/>
<div class="slds-m-around_small">
<div class="slds-page-header" role="banner">
<p class="slds-page-header__title slds-truncate">{!v.total} Accounts • page {!v.page} / {!v.pages}</p>
<ui:inputSelect aura:id="recordSize" label="Display Record Per Page: " change="{!c.onSelectChange}">
<ui:inputSelectOption text="10" label="10" value="true"/>
<ui:inputSelectOption text="15" label="15"/>
<ui:inputSelectOption text="20" label="20"/>
</ui:inputSelect>
</div>
<p class="slds-p-horizontal_small slds-box">
<lightning:datatable data="{!v.Accounts}" columns="{! v.mycolumns }" keyField="id" />
</p>
<div class="slds-align_absolute-center">
<lightning:button disabled="{!v.page == 1}" variant="brand" label="Previous Page" onclick="{! c.navigate }" />
<lightning:button disabled="{!v.page == v.pages}" aura:id="previousPage" variant="brand" label="Next Page" onclick="{! c.navigate }" />
</div>
</div>
//Js Controller
({
doInit: function(component, event, helper) {
// this function call on the component load first time
// get the page Number if it's not define, take 1 as default
var page = component.get("v.page") || 1;
// get the select option (drop-down) values.
var recordToDisply = component.find("recordSize").get("v.value");
component.set('v.mycolumns', [
{label: 'Account Name', fieldName: 'Name', type: 'Name',sortable:'true'},
{label: 'Phone', fieldName: 'Phone', type: 'Phone',sortable:'true'},
{label: 'Email ID', fieldName: 'Email_ID__c', type: 'Email',sortable:'true'}
]);
// call the helper function
helper.getAccounts(component, page, recordToDisply);
},
navigate: function(component, event, helper) {
// this function call on click on the previous page button
var page = component.get("v.page") || 1;
// get the previous button label
var direction = event.getSource().get("v.label");
// get the select option (drop-down) values.
var recordToDisply = component.find("recordSize").get("v.value");
// set the current page,(using ternary operator.)
page = direction === "Previous Page" ? (page - 1) : (page + 1);
// call the helper function
helper.getAccounts(component, page, recordToDisply);
},
onSelectChange: function(component, event, helper) {
// this function call on the select opetion change,
var page = 1
var recordToDisply = component.find("recordSize").get("v.value");
helper.getAccounts(component, page, recordToDisply);
},
})
//js Helper
({
getAccounts: function(component, page, recordToDisply) {
// create a server side action.
var action = component.get("c.fetchAccount");
// set the parameters to method
action.setParams({
"pageNumber": page,
"recordToDisply": recordToDisply
});
// set a call back
action.setCallback(this, function(a) {
// store the response return value (wrapper class insatance)
var result = a.getReturnValue();
console.log('result ---->' + JSON.stringify(result));
// set the component attributes value with wrapper class properties.
component.set("v.Accounts", result.accounts);
component.set("v.page", result.page);
component.set("v.total", result.total);
component.set("v.pages", Math.ceil(result.total / recordToDisply));
});
// enqueue the action
$A.enqueueAction(action);
}
})
Your question :
What is the maximum number of records will get from a lightning server call?
As we get limited record with page count and record count. It should not create any problem in record fetching.
what is best way to achieve this functionality?
You can try above approach.
what is the best way in Visualforce Remoting, Lightning Implementation?
You can use both.