代码之家  ›  专栏  ›  技术社区  ›  ArpitJ

springmvc项目中的分页问题

  •  1
  • ArpitJ  · 技术社区  · 12 年前

    我有一个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);
    }
    

    日期

     @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>
    
    1 回复  |  直到 12 年前
        1
  •  0
  •   superEb    12 年前

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

    诀窍是:

    1. 捕捉点击事件 JavaScript中的分页链接
    2. 处理点击事件 通过AJAX/XHR请求获取下一页(并停止原始事件)
    3. 重构原始页面 使得每个显示标签表被定义为独立的HTML片段(即其自己的JSP/页面) 总是 通过AJAX/XHR获取(即也在加载父/包装页时)
    4. 处理AJAX/XHR回调 通过将HTML片段(响应主体)注入父/包装页的DOM

    对于#1,你可能会想 register a click event listener 用于包装整个分页标题(包含分页链接)的元素。

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

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

    对于#4,您的JavaScript回调/成功处理程序(函数)应该获取响应主体(HTML),并将其注入其父容器(表示选项卡的div)。要做到这一点,只需设置 innerHTML 容器元素的属性。

    请注意,通常情况下,此方法必须应用于 任何 需要包含多个活动的displaytag表的页面 标页码 列排序 链接。