Help us understand the problem. What is going on with this article?

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

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

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

完成イメージ

スクリーンショット 2019-09-17 20.32.05.png

検索画面を押すと。。

スクリーンショット 2019-09-17 20.32.27.png

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

スクリーンショット 2019-09-17 20.32.51.png

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

ソース

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ページ目から表示されるようになってしまいます笑

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away