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 개의 레코드가 아닌 모든 레코드를 보여주고있는 것일까 요? 어떻게해야할지 모르겠다.
한 페이지에 모든 레코드가 표시되는 이유는 무엇입니까? 왜요?
미리 감사드립니다.
. 이 스크립트에서 잘못된 점은 무엇입니까? 페이지 매김은 기본적으로 true입니다. –
필드에 링크를 추가하는 방법을 알려주시겠습니까? 나는 서버 쪽 페이징을 구현 중이다. –
질문을 이해할 수 없습니다. 어떤 필드와 어떤 링크가 있습니까? –