salesforce資料列表分頁實戰-(標準分頁)
阿新 • • 發佈:2018-12-30
學習完這篇部落格,你能夠使用Force.com標準的分頁功能來實現資料列表的分頁,你會學習如下知識點:
1、VF standard list controller,它的功能比standard (record) controller功能更加豐富;
2、理解ajax如何在頁面中執行,以及執行的範圍,通過id關聯;
3、瞭解與頁面相關的資料的含義,比如:PageNumber、ResultSize、PageSize、itemValue;
4、你會明白如何處理當位於第一頁時,如何禁用上一頁按鈕的功能等問題
以下是code部分,有非常詳細的註釋,幫助你瞭解內部實現機制:
<apex:page standardController="Contact" recordSetVar="contacts"> <apex:form> <apex:pageBlock title="Contact List" id="contacts_list"> Filter: <apex:selectList value="{! filterId}" size="1"> <apex:selectOptions value="{! listViewOptions}" /> <apex:actionSupport event="onchange" reRender="contacts_list" /> <!-- reRender屬性傳入pageBlock tag的id --> </apex:selectList> <apex:pageBlockTable value="{! contacts}" var="ct"> <apex:column value="{! ct.FirstName}" /> <apex:column value="{! ct.LastName}" /> <apex:column value="{! ct.Email}" /> <apex:column value="{! ct.Account.Name}" /> </apex:pageBlockTable> <!-- Pagination --> <table style="width: 100%"> <tr> <td> <!-- Page X of Y --> <!-- PageNumber:當前頁面所在位置,ResultSize:記錄總條數,PageSize:每頁記錄條數 --> Page: <apex:outputText value="{! PageNumber} of {! CEILING(ResultSize / PageSize)}" /> </td> <td align="center"> <!-- Previous Page --> <!-- active --> <apex:commandLink action="{! Previous}" value="« Previous" rendered="{! HasPrevious}" /> <!-- 如果沒有上一頁就用文字顯示,不使用帶action的連結 --> <apex:outputText style="color:#ccc;" value="« Previous" rendered="{! NOT(HasPrevious)}" /> <!-- Next Page --> <!-- active --> <apex:commandLink action="{! Next}" value="Next »" rendered="{! HasNext}" /> <!-- 如果沒有下一頁就用文字顯示,不使用帶action的連結 --> <apex:outputText style="color: #ccc;" value="Next »" rendered="{! NOT(HasNext)}" /> </td> <td align="right"> <!-- Records per page --> Records per page: <apex:selectList value="{! PageSize}" size="1"> <!-- itemValue指每頁顯示多少條記錄 --> <apex:selectOption itemValue="5" itemLabel="5" /> <apex:selectOption itemValue="20" itemLabel="20" /> <apex:actionSupport event="onchange" reRender="contacts_list" /> </apex:selectList> </td> </tr> </table> </apex:pageBlock> </apex:form> </apex:page>
效果預覽: