2014-10-11 52 views
0

我嘗試使用Spring MVC進行分頁。我控制器臨危2個參數通過AJAX: - 每頁許多元素如何顯示(行) - 該頁面中選擇Spring MVC控制器在1次點擊上工作2次

@Controller 
public class SymptomController { 

@Autowired 
private SymptomService symptomService; 

@RequestMapping(value = "/symptoms", method = RequestMethod.GET) 
public String symptomPage(
    @RequestParam(required = false, value = "rows") Integer rows, 
    @RequestParam(required = false, value = "page") Integer tabNumber, 
    Model model) { 
Page<Symptom> page = null; 
if ((rows == null) && (tabNumber == null)) { 
    page = symptomService.findSymptomsByPage(0, 10); 
    System.out.println(1); 
} else { 
    page = symptomService.findSymptomsByPage(tabNumber - 1, rows); 
    System.out.println(rows + " " + tabNumber); 
} 
int currentPage = page.getNumber() + 1; 
int first = Math.max(1, currentPage - 3); 
int last = Math.min(currentPage + 2, page.getTotalPages()); 

model.addAttribute("symptom", new Symptom()); 
model.addAttribute("symptomPage", page); 
model.addAttribute("currentPage", currentPage); 
model.addAttribute("first", first); 
model.addAttribute("last", last); 
return "symptoms"; 
} 

我的jsp:

<table id="table-methods-table" 
     class="table table-hover table-bordered"> 
     <thead> 
      <tr style="background-color: #F5F5F5"> 
       <th data-field="state" data-checkbox="false" data-align="center"></th> 
       <th data-field="editBtn" data-align="center"><spring:message 
         code="label.editsymptom" /></th> 
       <th data-field="name" data-sortable="true" data-align="left"><spring:message 
         code="label.symptoms" /></th> 
       <th data-field="description" data-sortable="true" data-align="left"><spring:message 
         code="label.descpiption" /></th> 
       <!--<th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Delete</th>--> 
      </tr> 
     </thead> 
     <tbody id="tbody"> 
      <c:forEach items="${symptomPage.content}" var="symptom"> 
       <tr> 
        <td class="bs-checkbox"><input name="SelectItem" 
         type="checkbox"></td> 
        <td><a href="#edit" data-toggle="modal"> <i 
          class="fa fa-pencil-square-o"></i></a></td> 
        <td>${symptom.name}</td> 
        <td><i>${symptom.description}</i></td> 
       </tr> 
      </c:forEach> 
     </tbody> 
    </table> 
</div> 
<ul class="pagination no-margin pull-right"> 
    <c:choose> 
     <c:when test="${currentPage == 1}"> 
      <li class="inactive"><a href="#">&laquo;</a></li> 
      <li class="inactive"><a href="#">&lt;</a></li> 
     </c:when> 
     <c:otherwise> 
      <li><a href="${firstURL}">&laquo;</a></li> 
      <li><a href="${prevURL}">&lt;</a></li> 
     </c:otherwise> 
    </c:choose> 
    <c:forEach var="i" begin="${first}" end="${last}"> 
     <c:url var="pageUrl" value="/symptoms" /> 
     <c:choose> 
      <c:when test="${i == currentPage}"> 
       <li class="active"><a href="${pageUrl}"><c:out value="${i}"></c:out></a></li> 
      </c:when> 
      <c:otherwise> 
       <li><a href="${pageUrl}"><c:out value="${i}"></c:out></a></li> 
      </c:otherwise> 
     </c:choose> 
    </c:forEach> 
    <c:choose> 
     <c:when test="${currentPage != last}"> 
      <li><a href="${nextURL}">&gt;</a></li> 
      <li><a href="${lastURL}">&raquo;</a></li> 
     </c:when> 
     <c:otherwise> 
      <li class="inactive"><a href="#">&gt;</a></li> 
      <li class="inactive"><a href="#">&raquo;</a></li> 
     </c:otherwise> 
    </c:choose> 
</ul> 
<select id="select" class="form-control" 
    style="width: 80px; margin-top: 18px;"> 
    <option selected="selected">10</option> 
    <option>25</option> 
    <option>50</option> 
    <option>100</option> 
</select> 
<script> 
    $(document).ready(function() { 
    var pads = $('ul.pagination').children(); 
    pads.click(function() { 
     $.ajax({ 
      type: 'GET', 
      url : "/hospital/symptoms", 
      data: {rows: parseInt($('#select').text()), page: parseInt($(this).text())}, 
     }); 
    }); 
    }); 
</script> 

當我點擊頁面按鈕我收到在我的控制檯上:

Hibernate: select count(symptom0_.id) as col_0_0_ from symptoms symptom0_ 
Hibernate: select symptom0_.id as id16_, symptom0_.symptom_description as symptom2_16_, symptom0_.symptom_name as symptom3_16_ from symptoms symptom0_ limit ?, ? 
10 3 
Hibernate: select count(symptom0_.id) as col_0_0_ from symptoms symptom0_ 
Hibernate: select symptom0_.id as id16_, symptom0_.symptom_description as symptom2_16_, symptom0_.symptom_name as symptom3_16_ from symptoms symptom0_ limit ? 
1 
Hibernate: select count(symptom0_.id) as col_0_0_ from symptoms symptom0_ 
Hibernate: select symptom0_.id as id16_, symptom0_.symptom_description as symptom2_16_, symptom0_.symptom_name as symptom3_16_ from symptoms symptom0_ limit ?, ? 
10 2 
Hibernate: select count(symptom0_.id) as col_0_0_ from symptoms symptom0_ 
Hibernate: select symptom0_.id as id16_, symptom0_.symptom_description as symptom2_16_, symptom0_.symptom_name as symptom3_16_ from symptoms symptom0_ limit ? 
1 

這說明該控制器工作2次,一次點擊。請給我建議我必須做些什麼才能使控制器正常工作。

回答

0

我認爲瀏覽器發送兩次相同的請求:與您的<a>鏈接本身

您可以與本地click事件又寫道

  • 一旦JavaScript代碼一旦

    • 需要prevent the default browser action with jquery

      <script> 
          $(document).ready(function(event) { 
          event.preventDefault(); 
          var pads = $('ul.pagination').children(); 
          pads.click(function() { 
           $.ajax({ 
            type: 'GET', 
            url : "/hospital/symptoms", 
            data: {rows: parseInt($('#select').text()), page: parseInt($(this).text())}, 
           }); 
          }); 
          }); 
      </script> 
      
  • +0

    我通過在parrent標籤上使用.on函數解決了這個問題,給出了參數'click','li> span',function(){}。它現在很好用。但是我感謝你的回答。我也會嘗試這種方法。 – 2014-10-12 14:14:17