spring mvc项目中的分页问题

Question

我有一个 Spring M V C 项目，在该项目中我也使用了显示标签分页和 J-Query 选项卡。一切都很好，但是当我尝试在任何选项卡中从第 1 页移动到第 2 页的分页时，页面被刷新并且选项卡 1 再次处于活动状态。 {如果我在第二个选项卡中分页但我被重定向到第一个}

我正在发布我的代码以供参考... 请尽快提供帮助...

控制器

@RequestMapping(value="/listquestions", method = RequestMethod.GET)
public ModelAndView getQuestions() {
    Map<String, Object> model = new HashMap<String, Object>();
         List<Question> Answered=questionService.getAnswerQuestion();
         model.put("Answer", Answered);

         List<Question> unAnswer=questionService.getUnAnswerQuestion();
         model.put("unAnswer", unAnswer);   
    return new ModelAndView("jsp/AdminIndex", model);
}

D A O

 @Override
public List<Question> getUnAnswerQuestion() {
     session= sessionFactory.getCurrentSession();
     Query query= session.createSQLQuery("select * from Question where ques_id not in (select ques_id from Answer) order by date desc");
     @SuppressWarnings("unchecked")
    List<Question> list=query.list(); 
     return list;
 }

 @Override
    public List<Question> getAnswerQuestion() {
     session= sessionFactory.getCurrentSession();
     Query query= session.createSQLQuery("select * from Question where ques_id in (select ques_id from Answer) order by date desc");
     @SuppressWarnings("unchecked")
    List<Question> list=query.list(); 
     return list;
 }

服务

 @Override
public List<Question> getUnAnswerQuestion() {
    return questionDao.getUnAnswerQuestion();
}

@Override
public List<Question> getAnswerQuestion() {
    return questionDao.getAnswerQuestion();
}

查看页面

      <div id="tabs" style="width: 650px">
        <ul>
            <li><a href="#tabs-1">Unanswered</a></li>
            <li><a href="#tabs-2">Answered</a></li>
        </ul>

<!-- Answered -->
        <div id="tabs-2">

             <display:table name="${Answer}" pagesize="10" sort="list" id="tmp3" requestURI="listquestions.html">

                 <display:column style="vertical-align:top;  padding-top: 7px; text-align: center; width: 75px; color:black;" sortable="true" headerClass="sortable" title="Username">
                    <a href="/gtlqa/getadmuserdet.html?uname=${tmp3[8]}"> <img src="/gtlqa/resources/images/userpic.gif" /></a><br>
                        ${tmp3[8]}
                </display:column>

                <display:column sortable="true" headerClass="sortable" style="padding-left: 10px; padding-top: 7px; width: 465px;"  title="Question Title"> 
                    <a href="/gtlqa/getQuestionDet.html?quId=${tmp3[0]}"> <h3 style="color: #00c6ff"> ${tmp3[1]}</h3> </a>
                </display:column>

            </display:table> 
        </div>

<!-- Unanswered -->
        <div id="tabs-1">

             <display:table name="${unAnswer}" pagesize="10" sort="list" id="tmp2" requestURI="listquestions.html">

                 <display:column style="vertical-align:top;  padding-top: 7px; text-align: center; width: 75px; color:black;" sortable="true" headerClass="sortable" title="Username">
                    <a href="/gtlqa/getadmuserdet.html?uname=${tmp2[8]}"> <img src="/gtlqa/resources/images/userpic.gif" /></a><br>
                        ${tmp2[8]}
                </display:column>

                <display:column sortable="true" headerClass="sortable" style="padding-left: 10px; padding-top: 7px; width: 465px;"  title="Question Title"> 
                    <a href="/gtlqa/getQuestionDet.html?quId=${tmp2[0]}"> <h3 style="color: #00c6ff">  ${tmp2[1]}</h3> </a>
                </display:column>

            </display:table> 
        </div>
   </div>

Answer 1

我们在我的项目中做了类似的事情——在同一页面上使用多个显示标签表，这些表被包装在标签式 div 容器中。

诀窍是：

1. 在 JavaScript 中捕获分页链接的点击事件
2. 处理点击事件，通过 AJAX/XHR 请求获取下一页（并停止原始事件）
3. 重构您的原始页面，以便将每个 displaytag 表定义为一个独立的 HTML 片段（即它自己的 JSP/页面），总是通过 AJAX/XHR 获取（即也在父/包装页面的负载）
4. 处理 AJAX/XHR 回调，将 HTML 片段（响应主体）注入到父/包装页面的 DOM 中

对于#1，您可能希望register a click event listener 用于包装整个分页横幅（包含分页链接）的元素。

然后，对于 #2，检查 event target 以确保单击了锚标记（表示分页链接）并确保锚标记的 href 中的 URL 为 fire an AJAX GET request（因为 displaytag 正在构建/管理这些 URL 上的参数）。还要确保通过执行event.stopPropagation() 之类的操作来防止单击事件在链上冒泡。如果您不停止事件，浏览器会将点击作为普通链接处理，并将窗口的位置重置为分页 URL，这是您在 OP 中描述的而不是您想要的。

对于 #3，将选项卡 div 的内容移动到它们自己的 JSP 中，并为每个设置一个单独的 URL/端点，(a) 获取该 displaytag 表使用的数据并 (b) 将请求转发到新的 JSP 以编写 HTML 响应。

对于 #4，您的 JavaScript 回调/成功处理程序（函数）应获取响应正文（即 HTML）并将其注入其父容器（表示选项卡的 div）。为此，只需设置容器元素的innerHTML 属性即可。

请注意，一般而言，此方法必须应用于任何页面，该页面需要包含多个具有活动分页或列排序的显示标签表 链接。