Jquery spring mvc项目中的分页问题

我有一个SpringMVC项目，在该项目中，我还使用了显示标记分页和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() {
    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>

---

我们在我的项目中也做了类似的事情——在同一页面上使用多个封装在选项卡式div容器中的displaytag表

诀窍在于：

捕获JavaScript中分页链接的单击事件 通过AJAX/XHR请求获取下一页来处理单击事件，并停止原始事件 重构原始页面，以便将每个displaytag表定义为一个独立的HTML片段，即它自己的JSP/页面，该页面始终通过AJAX/XHR获取，也就是在加载父/包装页面时 通过将HTML片段响应体注入父/包装器页面的DOM来处理AJAX/XHR回调 对于1，您可能希望为包装包含分页链接的整个分页横幅的元素指定一个名称

然后，对于2，检查以确保已单击表示分页链接的锚定标记，以及锚定标记的href中的URL，因为displaytag正在这些URL上构建/管理参数。还要确保通过执行以下操作来防止单击事件在链中冒泡。如果不停止事件，浏览器会将单击作为正常链接处理，并将窗口位置重置为分页URL，这是您在OP中描述的，而不是您想要的

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

对于4，JavaScript回调/成功处理程序函数应该获取响应主体（HTML），并将其注入其父容器（代表选项卡的div）中。为此，只需设置container元素的innerHTML属性

请注意，通常，这种方法必须应用于需要包含多个带有活动分页或列排序链接的displaytag表的任何页面

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