issues with pagination in a spring mvc project

StackOverflow https://stackoverflow.com/questions/18783311

Question

I have a Spring M V C project in which i have made use of the display tag pagination and the J-Query tabs as well. All is good but when i try paginating that is moving from page 1 to page 2 in any tab then the page is refreshed and the tab 1 is active again. {if i paginate in the 2nd tab yet i am redirected to the first}

i am posting my code for reference ... please help as soon as possible...

Controller

@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;
 }

Service

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

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

View Page

      <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>
Was it helpful?

Solution

We do something similar on my project - using multiple displaytag tables on the same page that are wrapped in tabbed div containers.

The trick is to:

  1. Capture the click events of the pagination links in JavaScript
  2. Handle the click events by fetching the next page via AJAX/XHR request (and stop the original event)
  3. Refactor your original page so that each displaytag table is defined as an independent HTML fragment (i.e. its own JSP/page) that is always fetched via AJAX/XHR (i.e. also on load of parent/wrapper page)
  4. Handle the AJAX/XHR callback by injecting the HTML fragment (response body) into the DOM of the parent/wrapper page

For #1 you will probably want to register a click event listener for the element that wraps the whole paging banner (containing pagination links).

Then, for #2, inspect the event target to make sure an anchor tag (representing a pagination link) was clicked and fire an AJAX GET request for the URL in the href of the anchor tag (since displaytag is building/managing the params on those URLs). Also make sure to prevent the click event from bubbling up the chain by doing something like event.stopPropagation(). If you don't stop the event, the browser will handle the click as a normal link and reset the window's location to the pagination URL, which is what you describe in the OP and is not what you want.

For #3, move the content of your tab divs into their own JSPs and setup a separate URL/endpoint for each that will (a) fetch the data used by that displaytag table and (b) forward the request to the new JSP for writing the HTML response.

For #4, your JavaScript callback/success handler (function) should take the response body (which is HTML) and inject it into its parent container (the div representing the tab). To do this, just set the innerHTML property of the container element.

Note that, in general, this approach must be applied to any page that needs to contain more than one displaytag table with active pagination or column sorting links.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top