我正在尝试将数据表功能与我的项目集成。我们正在使用 Spring portlet 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>
我显示的页面是这样的（分为两部分）请看我的jsp here。我没有声望在这里发布它。
第一张图片链接：https ://www.dropbox.com/s/7qw8xcf8ek9vnng/ScreenShot1.png?dl=0 第二张图片链接：https ://www.dropbox.com/s/dadd009r594nvik/ScreenShot2.png?dl=0
问题
在第二张图片上，它显示了所有记录，而不是一次只显示 10 条记录。为什么它显示所有记录而不仅仅是 10 条记录。我不知道我应该如何进行。
为什么它在一页上显示所有记录？为什么？
提前致谢