1

我有一个 Spring MVC 项目，其中我也使用了显示标签分页和 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);
}

道

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

1 回答 1

0

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

诀窍是：

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

对于#1，您可能希望为包装整个分页横幅（包含分页链接）的元素注册一个单击事件侦听器。

然后，对于＃2，检查事件目标以确保单击了锚标记（表示分页链接）并为锚标记的 href 中的 URL触发 AJAX GET 请求（因为 displaytag 正在构建/管理参数这些网址）。还要确保通过执行类似event.stopPropagation(). 如果您不停止该事件，浏览器会将单击作为普通链接处理，并将窗口的位置重置为分页 URL，这是您在 OP 中描述的内容，而不是您想要的内容。

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

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

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

于 2013-09-13T13:22:13.063 回答