visualforceでのページ送りを作ってみた

結果画面の次へ前へボタン

よくある次のページへとか前へや一番最初、一番最後とかあると思いますが、
実際に作ってみました。

完成イメージ

検索画面を押すと。。

左上に前へ次へボタンが出てきて

前へいけない時は押せないみたいな表示になるって感じですね。

ソース

sample.vfp

<apex:pageBlock title="商品一覧" >
 <apex:outputtext value="全件 : {!resultList.size} 件 " />
   <apex:commandButton value="前へ" action="{!previous}" disabled="{!firstRecord == 0}"/>
   <apex:commandButton value="次へ" action="{!next}" disabled="{!firstRecord + 10 > resultList.size}"/>
   <apex:commandButton value="再検索" action="{!research}"/>
     <table class="branch-table">
        <thead>
           <tr>
             <th>編集</th><th>商品ID</th><th>商品名</th><th>商品ファミリ</th><th>商品コード</th>
           </tr>
        </thead>
        <tbody>
           <apex:repeat value="{!resultList}" var="result" first="{!firstRecord}" rows="10">
             <tr>
               <td class="tabledata"><apex:outputLink value="https://salesforce.com/{!result.Id}/e?" target="_blank">編集</apex:outputLink></td>
               <td class="tabledata"><apex:outputText value="{!result.Id}"/></td>
               <td class="tabledata"><apex:outputText value="{!result.Name}"/></td>
               <td class="tabledata"><apex:outputText value="{!result.Family}"/></td>
               <td class="tabledata"><apex:outputText value="{!result.Productcode}"/></td>
             </tr>
           </apex:repeat>
        </tbody>
      </table>
</apex:pageBlock>

左上のボタン部分はこのような感じで実装しました。
それぞれが次へ前へのメソッドを呼び出すって感じです。

次にApex

sample.apex

public class SamplePageForStudyController {
  public Integer firstRecord {get;set;}
  public static Integer ROWSRECORD = 10;

  public sample(){
      this.firstRecord = 0;
  }
  public void previous(){
      this.firstRecord -= ROWSRECORD;
  }
  public void next(){
      this.firstRecord += ROWSRECORD;
  }
}

今回使っている方法はapex:repeatのいいところを活かした実装の形です。
firstにIntegerを入れることでListに入っている値の最初に表示するレコードを決めることができます。

それを利用して、それぞれのメソッドでROWSRECORDをfirstRecordに加算、減算していくという実装です。
またdisabledでfirstRecordが0ということは1ページ目なので前へボタンは使えない。
さらにfirstRecordに10加えた数値が結果のリストサイズよりも大きければ次に表示するモノはないので使えないようにしています。

オマケ

再検索ボタンを押した際には再度検索画面を表示する実装をしているのですがこの際にfirstRecordを0にすることを忘れないようにしておきましょう。

sample.apex

    public void research(){
        this.conditions = new Product2();
        this.doSearchFlag = false;
        this.firstRecord = 0;
    }

じゃないと再検索した際になぜか2ページ目から表示されるようになってしまいます笑

もっと違った実装もありますのでまた小出しにしていきます！