この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

ページネーションを Visualforce 記事リストに追加する

[Visualforce Article Search (Visualforce 記事検索)] タブに、ページ間を移動するための [次へ] および [前へ] リンクを追加します。

  1. [Visualforce Article Search (Visualforce 記事検索)] タブの下部にあるフッターで、[ArticleList] をクリックして Visualforce 開発モードのページエディタを表示します。
  2. Visualforce 開発モードのページエディタで既存のマークアップをすべて削除し、「Visualforce 記事リストページネーションのコードサンプル」に表示されているマークアップに置き換えます。
  3. [保存] (Visualforce の保存アイコン) をクリックします。

    新しい Visualforce コードは、Apex クラスおよびメソッドを参照しているため、後でエラーメッセージが表示されて、想定されるクラスまたはメソッドを宣言するように求められます。これらの項目を 1 つずつ宣言する代わりに、適切なコントローラを作成します。

  4. [設定] から、[開発] | [Apex クラス] をクリックします。
  5. [新規] をクリックします。
  6. Visualforce ページネーションコントローラのコードサンプルの内容をコピーして貼り付けます。
  7. [保存] をクリックします。
  8. ステップ 1 ~ 3 を繰り返します。

Visualforce 記事リストページネーションのコードサンプル

このコードサンプルは、最初に保存した Visualforce ページに基づいていますが、ページネーションを有効にする機能強化が含まれています。太字の行については、コードサンプルの後に説明があります。
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page sidebar="false" title="Article List" controller="vfListPaginationController">
18 <style>
19  td{
20  vertical-align : top;   
21  text-align: left;
22  }
23 </style>
24 <apex:form >
25  <apex:pageBlock title="Article List" > 
26   <apex:panelGroup id="theSearchResults" >
27   <apex:panelGrid width="100%">
28    <table width="99%">
29     <tr>
30      <th width="33%">Title</th>
31      <th width="33%">Article Type</th>
32      <th width="33%">Summary</th>
33     </tr>
34    </table>
35    <knowledge:articleList articleVar="article" pageNumber="{!currentPageNumber}" hasMoreVar="false" pageSize="10">
36    <table  width="99%">
37     <tr>
38      <td width="33%">
39      <apex:outputLink target="_blank" value="{!URLFOR($Action.KnowledgeArticle.View, article.id,['popup' = 'true'])}">{!article.title}</apex:outputLink>
40      </td>
41      <td width="33%"><apex:outputText >{!article.articleTypeLabel}</apex:outputText></td>
42      <td width="33%"><apex:outputText >{!article.abstract}</apex:outputText></td>
43     </tr>
44    </table>
45    </knowledge:articleList>
46     </apex:panelGrid> 
47     <apex:panelGrid columns="2">
48   <apex:commandLink action="{!previous}" value="Previous" style="{!IF(prevRequired = true,'display:block','display:none')}" reRender="theSearchResults"/> 
49   <apex:commandLink action="{!next}" value="Next"  style="{!IF(nextRequired = true,'display:block','display:none')}" reRender="theSearchResults"/>  
50    </apex:panelGrid>
51   </apex:panelGroup>
52  </apex:pageBlock>
53 </apex:form>
54</apex:page>

コード controller="vfListPaginationController" は、Visualforce ページで使用されるコントローラを参照し、pageNumber="{!currentPageNumber}" は、記事リストのページネーションを設定します。currentPageNumber 変数は、ユーザが [次へ] または [前へ] リンクをクリックするたびに更新されます。

次のコードフラグメントでは、コントローラ内の previous メソッドをコールします。rerender 属性は、ページ全体ではなく記事リストのみを更新します。

1<apex:commandLink action="{!previous}" value="Previous" style="{!IF(prevRequired = true,'display:block','display:none')}" reRender="theSearchResults"/>

Visualforce ページネーションコントローラのコードサンプル

太字の行については、コードサンプルの後に説明があります。

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17public with sharing class vfListPaginationController {
18
19 //Page Size
20 private Static Final Integer PAGE_NUMBER = 10;
21 
22 public vfListPaginationController() {
23 String qryString = 'SELECT Id, title, UrlName, LastPublishedDate,LastModifiedById FROM KnowledgeArticleVersion WHERE (PublishStatus = \'online\' and Language = \'en_US\')';
24  List<KnowledgeArticleVersion> articleList= Database.query(qryString);
25  maxSize = articleList.size() ;
26 }
27 
28 //Keeps track of current page & max size of article list
29 Integer currentPage = 1;
30 Integer maxSize = 1;
31 
32 // Returns whether we need to see previous button or not
33 public boolean getPrevRequired() {
34  return currentPage > 1;
35 }
36
37 // Returns whether we need to see next button or not
38 public boolean getNextRequired() {
39  return currentPage * PAGE_NUMBER < maxSize;
40 }
41 
42 //Returns current page number 
43 public Decimal getCurrentPageNumber() {
44  return this.currentPage;
45 }
46
47 //action for next click
48 public PageReference next() {
49  if(maxSize > this.currentPage * PAGE_NUMBER) {
50   this.currentPage = this.currentPage + 1;
51  }
52  return null;
53 }    
54 
55 //action for previous click
56 public PageReference previous() {        
57  if(this.currentPage > 1)
58   this.currentPage = this.currentPage - 1;
59  return null;
60 }
61
62
63}

次のコードフラグメントは、記事情報を取得してリストに表示する SOQL 句です。WHERE 句では、公開記事のみが記事リストに表示されるように指定しています。

1SELECT Id, title, UrlName, LastPublishedDate,LastModifiedById FROM KnowledgeArticleVersion WHERE (PublishStatus = \'online\' and Language = \'en_US\')

これまでの作業を確認する

作業内容を保存すると、[Visualforce Article Search (Visualforce 記事検索)] ページが更新されて、[次へ] リンクがリストの下部に表示されます。[次へ] をクリックすると、ページに [前へ] リンクが表示されます。

ページネーションのある記事リスト