Jquery 数据表与我的项目的集成

我正在尝试将datatable功能与我的项目集成，我们使用的是SpringPortletMVC。我从服务班得到一份名单。我在JSP中使用的列表是${billingOverview.postpaidBillingInfo}

我的代码中包含了以下datatable功能

    <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。我没有名声把它贴在这里

第一图像链接： 第二图像链接：

问题

在第二幅图像上，它显示了所有记录，而不是一次显示10条记录。为什么它显示的是所有的记录，而不仅仅是10条记录。我不知道该怎么办

为什么它在一页上显示所有记录？为什么

---

提前谢谢

为什么不呢？您需要参数化datatable以定义要对结果进行分页的数据。 有关更多信息，请参见，特别是sPaginationType和iDisplayLength参数

---

这个链接也可能有帮助：

当我在我的其他项目中使用上述脚本时，它也可以正常工作$document.readyfunction{$'example'.dataTable；}；上面提到的脚本有什么问题。分页默认为true。您能告诉我如何添加到我的字段的链接吗？我正在实现服务器端分页。我不明白你的问题。哪些链接指向哪些字段以及用于哪些目的？