Question

我正在开发一个网络搜索引擎，它全部都是在C / Java编程中设置的，现在剩下的就是网站了，我在这个领域相当新手。所以，我有结果页面，结果显示在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，那么显示的页面将是“5 6 7 8 9 10 11 12 13 14”，而不是“1 2 3 4 5 6 7 8 9 10“。

我不知道该怎么办是当用户点击页面链接（一个数字）时，将这个数字发送给我的bean，这样我就可以计算页面窗口，然后只刷新结果所在的div显示（和滚筒，显然足够），所选页面必须是不可选择的。

另外，我想在网址上显示该网页，例如www.searchengine.com/?pg=<page#>。

- 基于Luiggi Mendoza的回答......

    <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>

Answer 1

我已经对此进行了快速测试（抱歉没有以谷歌方式实施滚轮，也许你会这样做;））。我在代码中使用普通的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>

Managed 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);
    }
}

单击向bean发送参数的链接后刷新页面的各个部分

1 个答案: