2014-08-27 13 views
0

데이터 테이블 기능을 프로젝트에 통합하려고합니다. 우리는 Spring 포틀릿 MVC를 사용하고 있습니다. 서비스 클래스에서 목록을 가져옵니다. 내 JSP에서 사용하는 목록은 $ {billingOverview.postpaidBillingInfo}입니다.프로젝트와 데이터 테이블의 통합

다음 데이터 기능을 코드에 포함 시켰습니다.

<script> 
    $(document).ready(function() { 
     $('#example').dataTable(); 
    }); 
    </script> 

-> 예는 테이블 태그에 사용 된 ID입니다. 다음과 같이

내 JSP는 다음과 같습니다 표시됩니다

<%@page import="java.text.SimpleDateFormat, java.util.*"%> 
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%><portlet:defineObjects /> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> 
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%> 
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> 
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.js" type="text/javascript"></script> 
<script src="${pageContext.request.contextPath}/js/jquery.dataTables.min.js" type="text/javascript"></script> 
<link href="${pageContext.request.contextPath}/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> 
<%Date d=new Date(); 
SimpleDateFormat sdf=new SimpleDateFormat("dd-MMMM-yyyy"); 
%> 
<script> 
function getPdf(urlLink) { 
    alert("getPdf"); 
$.ajax({ 
    url : urlLink, 
    type : 'GET', 
    dataType : 'text', 
    success : function(data){ 
     alert(data); 
     //window.open(data,"resizeable,scrollbar"); 
    } 
}); 
} 
</script> 
<script> 
     $(document).ready(function() { 
      $('#example').dataTable(); 
     }); 
</script> 


<portlet:resourceURL var="contractLevelBillingPDF" id="contractLevelBillingPDF"> 
       <portlet:param name="contractId" value="${accountOverview.contractId}"/> 
      </portlet:resourceURL> 
<portlet:renderURL var="selectedPostpaidBillingDetails"> 
      <portlet:param name="action" value="getSelectedPostpaidBillingDetails" /> 
</portlet:renderURL> 

<section> 
    <div class="row"> 

     <div class="medium-9 columns content"> 
      <h3 class="title">Billing</h3> 
      <p class="text"><%=sdf.format(d.getTime()) %></p> 
      <hr> 
      <table class="no-margin-top" data-widget="sort-table"> 
       <thead> 
       <tr> 
        <th><div><div class="large dark-purple"><label><spring:message code="label.prevBalance" /></label></div></div></th> 
        <th><div><div class="large pink"><label><spring:message code="label.currentMonth" /></label></div></div></th> 
        <th><div><div class="large light-green"><label><spring:message code="label.totalBalance" /></label> <span class="small"><%=sdf.format(d.getTime()) %></span></div></div></th> 
        <th data-disable-sort=""><div><div class="large grey"><label><spring:message code="label.viewCharges" /></label></div></div></th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr class="no-border"> 
        <td class="text-center large dark-purple">KD ${billingOverview.previousBillAmount}</td> 
        <td class="text-center large pink">KD ${billingOverview.currentBillAmount}</td> 
        <td class="text-center large light-green">KD ${billingOverview.totalBalance}</td> 
        <td class="text-center large"><a href="#" onclick='getPdf("${contractLevelBillingPDF}")' title="View"><i class="fa fa-search-plus fa-fw"></i>View</a></td> 
       </tr> 
       </tbody> 
      </table> 
      <div class="row"> 
       <div class="medium-12 columns text-right"> 
       <portlet:renderURL var="quickPayMethodURL"> 
        <portlet:param name="action" value="quickPay" ></portlet:param> 
        <portlet:param name="contractId" value="${accountOverview.contractId}" ></portlet:param> 
       </portlet:renderURL> 
        <a class="button" href="${quickPayMethodURL}" title="Total Balance">KD ${billingOverview.totalBalance } - PAY NOW</a> 
       </div> 
      </div> 
      <c:if test="${ accountOverview.contractHolder}"> 
      <hr class="dark-purple"> 
      <div class="row"> 
       <div class="large-6 columns"><h3 class="title">Breakdown</h3> </div> 
       <div class="large-6 columns" data-widget="dropdown" data-dropdown-type="select" data-dropdown-search=""> 
        <portlet:renderURL var="selectedPostpaidBillingDetails"> 
         <portlet:param name="action" value="getSelectedPostpaidBillingDetails" /> 
        </portlet:renderURL> 
       <form:form id="selectMsisdnForm" action="${selectedPostpaidBillingDetails}" method="GET" commandName="billingOverview"> 
        <form:select id="selectedMsisdn" path="selectedMsisdn" onchange="this.form.submit()" > 
         <form:option value="All" label="All" /> 
         <form:options items = "${billingOverview.allMsisdnList}" /> 
        </form:select> 
       </form:form> 
       </div> 
      </div> 
      </c:if> 
      <table id="example" data-widget="sort-table" class="display" cellspacing="0" width="100%"> 
       <thead> 
       <tr> 
        <th><div><div><label><spring:message code="label.number" /></div></div></th> 
        <th width="150"><div><div><label><spring:message code="label.type" /></div></div></th> 
        <th><div><div><label><spring:message code="label.status" /></div></div></th> 
        <th width="150"><div><div><label><spring:message code="label.prevBalance" /></div></div></th> 
        <th width="150"><div><div><label><spring:message code="label.currentMonthCharges" /></div></div></th> 
        <th><div><div><label><spring:message code="label.totalAmount" /></div></div></th> 
        <th data-disable-sort=""><div><div><label><spring:message code="label.bill" /></label></div></div></th> 
       </tr> 
       </thead> 
       <c:forEach varStatus = "count" var = "billingOver" items = "${billingOverview.postpaidBillingInfo}"> 
       <tbody> 
       <tr><portlet:renderURL var="serviceSettings"> 
         <portlet:param name="action" value="serviceSettings" /> 
         <portlet:param name="msisdn" value="${billingOver.msisdn}"/> 
        </portlet:renderURL> 
        <td class="text-center"><a href="${serviceSettings}" title="serviceSettings">${billingOver.msisdn}</a></td> 
        <td class="text-center">${billingOver.billingServiceType}</td> 
        <td class="text-center"><i class="fa fa-check fa-fw light-green"></i></td> 
        <td class="text-center">${billingOver.previousBalance}</td> 
        <td class="text-center">${billingOver.currentBalance}</td> 
        <td class="text-center">${billingOver.totalBalance}</td> 
        <td class="text-center"> 
        <portlet:resourceURL var="postpaidNumberBillingPDF" id="postpaidNumberBillingPDF"> 
         <portlet:param name="msisdn" value="${billingOver.msisdn}"/> 
        </portlet:resourceURL> 
         <a class="has-tooltip" href="#" onclick='getPdf("${postpaidNumberBillingPDF}")' title="View" data-widget="tooltip" data-tip-id="viewTip1" data-tip-position="bottom"><i class="fa fa-search-plus fa-fw"></i></a> 
        <portlet:renderURL var="quickPayUrl"> 
         <portlet:param name="action" value="quickPay" /> 
         <portlet:param name="msisdn" value="${billingOver.msisdn}"/> 
        </portlet:renderURL> 
         <!-- <a class="has-tooltip" href="/myzain/corp/quickpay-logged.html" title="View" data-widget="tooltip" data-tip-id="payTip1" data-tip-position="bottom"><i class="fa fa-credit-card fa-fw"></i></a> --> 
         <a class="has-tooltip" href="${quickPayUrl}" title="Pay" data-widget="tooltip" data-tip-id="payTip1" data-tip-position="bottom"><i class="fa fa-credit-card fa-fw"></i></a> 

        </td> 
       </tr> 
       </c:forEach> 
      </table> 

      <div class="row"> 
       <div class="medium-12 columns text-right"> 
        <a class="button" href="/myzain/corp/quickpay-logged.html" title="KD 77.275 DUE - PAY NOW">KD ${billingOverview.totalBalance } - PAY NOW</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

내 페이지는 다음과 같이 (2 개 부분으로 나누어) 여기 내 JSP로 봐주십시오. 여기에 게시 할 명성이 없습니다.

1 이미지 링크 : https://www.dropbox.com/s/7qw8xcf8ek9vnng/ScreenShot1.png?dl=0 2 이미지 링크 : https://www.dropbox.com/s/dadd009r594nvik/ScreenShot2.png?dl=0

인한 문제

두 번째 이미지에, 그것은 한 번에 모든 레코드뿐 아니라 10 개 개의 레코드를 보이고있다. 왜 그것은 10 개의 레코드가 아닌 모든 레코드를 보여주고있는 것일까 요? 어떻게해야할지 모르겠다.

한 페이지에 모든 레코드가 표시되는 이유는 무엇입니까? 왜요?

미리 감사드립니다.

답변

0

왜 그렇습니까? 결과 페이지 매김을 정의하도록 데이터 테이블을 매개 변수화해야합니다. 자세한 내용은 http://legacy.datatables.net/usage/options을 참조하십시오. 특히 sPaginationType 및 iDisplayLength 매개 변수

이 링크도 도움이 될 수 있습니다 : 내 다른 프로젝트에 위의 스크립트를 사용하는 경우, 그것은 그냥 잘 작동 jQuery Datatables pagination setting

+0

. 이 스크립트에서 잘못된 점은 무엇입니까? 페이지 매김은 기본적으로 true입니다. –

+0

필드에 링크를 추가하는 방법을 알려주시겠습니까? 나는 서버 쪽 페이징을 구현 중이다. –

+0

질문을 이해할 수 없습니다. 어떤 필드와 어떤 링크가 있습니까? –