2

私はWeb検索エンジンを開発していて、それはすべてC / Javaプログラミングで設定されています。現在、残っているのはWebサイトであり、私はこの分野の初心者です。したがって、結果ページがあり、結果はdiv内に表示され、このdivには次のようなリストのコンテンツが表示されます。

<div id="results">
  <ui:repeat value="searchBean.shownResults" var="node">
    node.website
    node.resume
    node.link
    etc...
  </ui:repeat>
</div>

そして、ページローラーを表示するためのdivがあります。これは、何かをグーグルで検索してページを下にスクロールした場合に表示されるものとほとんど同じです。表示する数字を制御するBeanを作成したので、たとえばユーザーが10をクリックすると、表示されるページは「1 2 3 4 5 6 7 8」ではなく、「5 6 7 8 9 10 11 121314」になります。 910"。

ユーザーがページリンク（数値）をクリックしたときに、この数値をBeanに送信して、ページウィンドウを計算し、結果が表示されるdivのみを更新する方法がわかりません（およびローラー、明らかに十分です）、そして選択されたページは選択できない必要があります。

また、このようにURLにページを表示したいと思いますwww.searchengine.com/?pg=<page#>。

--LuiggiMendozaの回答に基づく...

    <h:form>
        <table>
            <tr>
                <ui:repeat id="foo" value="#{footer.list}" var="no">
                    <td>
                        <h:commandLink value="#{no}" action="#{footer.navigate(no)}">
                            <f:ajax  render="@form foo"/>
                        </h:commandLink>
                    </td>
                </ui:repeat>
            </tr>
        </table>
    </h:form>
4

1 に答える 1

2

私はこれについて簡単なテストを行いました（Googleの方法でローラーを実装していないことをお詫びします、多分あなたはそうするでしょう;））。コードではプレーンJSFを使用しています。

JSFページ：

<div>
    <h:panelGrid id="pnlCurrentData">
        <ui:repeat value="#{pageRollerBean.lstCurrentData}" var="data">
            #{data}
        </ui:repeat>
    </h:panelGrid>
</div>
<h:form id="frmPages">
    <h:panelGrid id="pnlPages">
        <ui:repeat value="#{pageRollerBean.lstPages}" var="i" >
            <div style="display: inline-block; margin-left: 5px; margin-right: 5px">
                <!-- some styling just to see the selected/unselected page -->
                <!-- you can send the page number in the action -->
                <h:commandLink value="#{i}"
                    action="#{pageRollerBean.loadData(i)}"
                    style="#{i eq pageRollerBean.currentPage ? 'color:#FF0000' : 'color:#0000FF'}">
                    <!-- using ajax to update the results and the pages list -->
                    <f:ajax render=":frmPages:pnlPages :pnlCurrentData" />
                </h:commandLink>
            </div>
        </ui:repeat>
    </h:panelGrid>
</h:form>

マネージドBeanコード：

@ManagedBean
@ViewScoped
public class PageRollerBean {

    //Just to have some data to show for the test
    //for your case, this data should come when the user searches data
    private static List<String> lstData;

    static {
        lstData = new ArrayList<String>();
        for(Integer i = 1; i <= 100; i++) {
            lstData.add(i.toString());
        }
    }

    private List<String> lstCurrentData;
    private static final int totalPages = 10;
    private List<Integer> lstPages;
    private int currentPage;

    public PageRollerBean() {
    }

    @PostConstruct
    public void init() {
        lstPages = new ArrayList<Integer>();
        for(Integer i = 1; i <= totalPages; i++) {
            lstPages.add(i);
        }
        loadData(1);
    }

    //getters and setters...

    public void loadData(int page) {
        //this code explains by itself what it does...
        this.currentPage = page;
        lstCurrentData = lstData.subList((page-1)*10, (page-1)*10 + 10);
    }
}
于 2013-02-25T08:31:58.027 に答える