將數據表集成到我的項目中

我正在嘗試將數據表功能與我的項目集成。我們正在使用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>

我的頁面是這樣的（2份分）請點擊這裏看我的jsp。我沒有聲譽在這裏發佈。

第一圖像鏈接：https://www.dropbox.com/s/7qw8xcf8ek9vnng/ScreenShot1.png?dl=0 第二圖片鏈接：https://www.dropbox.com/s/dadd009r594nvik/ScreenShot2.png?dl=0

技術問題

在第二圖像，它顯示在一個時間中的所有記錄，而不僅僅是10條記錄。它爲什麼顯示所有記錄而不僅僅是10條記錄。我不知道該怎麼做。

爲什麼它顯示一頁上的所有記錄？ WHYYYY？

在此先感謝

來源

2014-08-27 Mayank Sharma