2

我正在开发一个网络搜索引擎，它都是在 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（和滚轮，很明显），并且所选页面必须是不可选择的。

另外，我想在 url 上显示页面，像这样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>
4

1 回答 1

2

我已经对此进行了快速测试（很抱歉没有以谷歌方式实现滚轮，也许你会；））。我在代码中使用纯 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 回答