Java Web 应用程序中的 jQuery DataTables
4.93/5 (37投票s)
使用 jQuery DataTables 插件增强 Java Web 应用程序中实现的简单表格。
目录
引言
Web 开发中最常见的任务就是在页面中添加表格。下面的图展示了一个你可能已经添加了很多次的标准带表格的页面。
然而，这个表格过于简单。它没有排序功能，没有分页，添加一些过滤功能可能会很有用。添加这些功能需要多少工作？如果你正在使用 jQuery，并且你已经看到过 jQuery 的 DataTables 插件，那么你就知道你只需要一行 JavaScript 代码。
$('table#myTable').dataTable();
在这个例子中，ID 为 myTable 的 HTML 表格位于浏览器网页的 DOM 中，并应用了 DataTables 插件来添加前面提到的那些小部件。DataTables 插件会在表格上方添加一个“显示 XXX 条目”的下拉菜单，允许用户选择每页显示 10、25、50 或 100 条记录，以及一个搜索文本框，允许用户按关键字过滤表格中应显示的记录。此插件还添加了排序功能，允许用户通过点击列标题来排序结果。表格下方是分页功能，允许用户在页面之间导航，并显示当前显示记录的文本。
一切都通过 JavaScript 功能实现，所以你不需要做任何其他事情。你只需要生成一个初始情况下的普通表格。新改进的表格如图所示。
仅用一行代码就获得了许多强大的功能。在本文中，你将找到更多关于该插件用法的详细信息。
背景
本文的目的是展示如何使用 jQuery DataTables 插件实现功能齐全、高性能的表格。这是一个使用 jQuery 库实现的 JavaScript 插件，它处理所有必要的与用户在客户端的交互。
jQuery DataTables 插件是一个优秀的客户端组件，可用于在 Web 浏览器中创建功能丰富的表格。该插件为普通的 HTML 表格添加了许多功能，例如过滤、分页、排序、更改页面长度等。虽然默认情况下它是纯客户端的，但可以配置它通过 AJAX 调用使用服务器端数据来提高性能。然而，要将 DataTables 与服务器端代码集成，开发人员必须了解 DataTables 发送的协议和参数，以及如何在服务器端使用它们。
本文展示了 jQuery DataTables 插件如何集成到 Java Web 应用程序中。它包含分步示例，展示了 DataTables 插件如何与服务器端组件交互。Java 中有很多服务器端框架，如标准 Servlet、JSP、JSF、Spring、Struts 等，本文不会全部涵盖。在本文中，我将重点介绍普通的 Servlet，演示如何使用标准的 Java Servlet 创建高性能的基于 AJAX 的数据表。
使用代码
此示例展示了如何生成一个公司表格并将 jQuery DataTables 插件添加到 HTML 表格中。代码在 MVC 结构中逻辑组织。
- 模型代表包含数据并将在浏览器中显示的数据类。
- 控制器是应用程序的逻辑，代表处理 Web 请求和实用函数的 Servlet。
- 视图是用于向客户端显示数据的页面——在本例中，使用 JSP 和普通 HTML 页面作为视图。
还有一个实用程序包，其中包含将 Java 对象转换为 JSON 的类（这是必需的，因为 jQuery DataTables 插件通过 JSON 对象与服务器端代码通信）。
模型是一个 Company 类，包含以下属性：
- 公司名称
- 公司地址
- 公司所在城市
在此示例中，不使用数据库或任何其他数据源，因此我使用了一个名为 DataRepository 的类，它包含一个硬编码的公司列表。此类返回将要显示的公司，使用以下调用：
DataRepository.GetCompanies();
接下来的几节将介绍 DataTables 在 Java Web 应用程序中的两种主要用法。
默认用法 - 客户端处理模式
在默认模式下，只需要最少的代码——Web 服务器可以生成标准的普通 HTML 表格。客户端 JavaScript 组件将使用生成的任何内容并添加客户端功能。在此客户端模式下，DataTables 从 <tbody></tbody> 部分获取所有表格行，并直接在这些元素上执行过滤、分页和排序，就像处理内存对象一样。这是使用 DataTables 最快的方式，但它要求服务器在一次调用中返回所有数据，将所有这些行加载为内存中的 JavaScript 对象，并动态地渲染它们到 DOM。这可能会导致服务器调用性能问题，以及客户端内存使用过大。然而，这最小化了发送到服务器的请求数量，因为一旦加载了表格，服务器就完全不再使用。
如上所述，jQuery DataTables 插件可以应用于浏览器中的静态 HTML 结构。在这种情况下，您需要在服务器端生成表格的 HTML 代码。在此示例中，我使用下面的 JSP 页面生成了一个表格结构。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
import="jquery.datatables.model.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Applying jQuery DataTables plugin in the Java Server application</title>
<link href="media/dataTables/demo_page.css" rel="stylesheet" type="text/css" />
<link href="media/dataTables/demo_table.css" rel="stylesheet" type="text/css" />
<link href="media/dataTables/demo_table_jui.css" rel="stylesheet" type="text/css" />
<link href="media/themes/base/jquery-ui.css" rel="stylesheet"
type="text/css" media="all" />
<link href="media/themes/smoothness/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css" media="all" />
<script src="scripts/jquery-1.4.4.min.js"
type="text/javascript"></script>
<script src="scripts/jquery.dataTables.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#companies").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
});
</script>
</head>
<body id="dt_example">
<div id="container">
<div id="demo_jui">
<table id="companies" class="display">
<thead>
<tr>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
<% for(Company c: DataRepository.GetCompanies()){ %>
<tr>
<td><%=c.getName()%></td>
<td><%=c.getAddress()%></td>
<td><%=c.getTown()%></td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>
</body>
</html>
在此 JSP 页面中，包含了所有必要的 JavaScript 库，并生成了公司表格的 HTML 代码。为了演示目的，一个简单的循环为存储库类返回的每个公司生成一个 TR。然而，在您的应用程序中，您可以使用任何您想要的服务器端处理（JavaBeans、JSTL 组件等），因为 jQuery DataTables 插件与所应用的服务器端技术无关。
在文档就绪 (document-ready) 的 JavaScript 事件处理程序中，普通的生成表格被 jQuery DataTables 插件增强。传递给插件初始化函数的有两个参数（这是我一直使用的两个参数）：
sPagination- 指示插件生成数字分页，而不是默认的两个上一页/下一页按钮。bJQueryUI- 应用标准的 jQueryUI 样式。
客户端显示的是以下组件，而不是普通 HTML 表格：
组件中看到的所有操作都在客户端实现（例如，当您在文本框中输入文本时，TR 元素会被过滤）。这是用户体验最快的方式，前提是加载表格所需的时间不是很长。如果您有大量数据，可以考虑在 AJAX 模式下使用 DataTables，其中只向插件返回部分结果。
这些只是 DataTables 插件提供的基本功能，您可以在 使用 jQuery DataTables 插件增强 HTML 表格 文章中找到更多详细信息。此外，您还可以使用许多其他增强功能，例如：
- 使用 DataTables 的 KeyTable 扩展启用类似 Excel 的箭头导航，使用 FixedColumns 插件冻结列，或使用 FixedHeader 插件固定表头。
- 使用 DataTables Editable 插件启用表格单元格的即时点击编辑功能。
- 使用 Row Grouping 插件对行进行分组。
- 使用 Column Filter 插件 或 Column Filter Widget 插件 进行高级过滤。
- 使用 ColVis 和 ColReorder 插件进行列隐藏和重排。
- 使用 Row reordering 插件进行行重排。
- 使用 TableTools 插件将数据导出为 CSV、Excel、PDF。
- 使用 Scroller 插件启用 AJAX 化数据的即时滚动。
您可以在 DataTables 网站 上找到其他 DataTable 插件的完整列表。所有这些插件都是 DataTables 的附加组件，但您也可以使用强大的 DataTables API 来定制行为。下图展示了一个使用几个提及的插件增强的普通表格的示例。
在此示例中，添加了一个按公司名称首字母对行进行分区的分组插件，以及一个在表格上方添加过滤下拉菜单的列过滤器小部件。在上图中，公司按城市 London 进行过滤。添加这些插件很简单——您只需要修改初始化调用，如果需要，添加一些参数，如以下示例所示。
$(document).ready(function () {
$("#companies").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"sDom": 'W<"clear">lfrtip'
})
.rowGrouping({sGroupBy: "letter", bHideGroupingColumn: false})
});
如果您的表格中有合理数量的记录，您无需担心这些功能。只需渲染一个普通表格并应用您需要的插件组合。
但是，如果您有大量记录显示在表格中，并且希望避免在浏览器中进行复杂的 JavaScript 处理，则可以在服务器端（例如，在某个 Servlet 中）实现处理逻辑，并将 DataTables 设置为通过 AJAX 调用查询服务器以获取应显示的信息。此模式将在下一节中介绍。
完全 AJAX 化表格 - 服务器端处理模式
使用 jQuery DataTables 插件，可以通过配置 DataTables 通过 AJAX 调用查询服务器以获取所需数据来实现客户端-服务器交互。在这种情况下，插件将在客户端维护 UI 状态，处理所有事件，但不会处理任何数据。相反，它将调用服务器端页面，发布当前状态和所需数据的相关信息，获取服务器响应，然后刷新表格内容。
在 DataTables 网站上，有一个服务器端配置的示例，其中 jQuery DataTables 插件向 PHP 页面发送请求并获取应在当前视图中显示的数据。服务器响应格式化为 JSON 对象，在客户端解析，并在表格主体中显示。
在这种情况下，每个事件（更改每页显示的项目数、在搜索过滤器中输入关键字、排序、按分页按钮等）都会触发 DataTables 插件将有关当前页面、搜索过滤器和排序列的信息发送到服务器页面。如请求所示，服务器页面返回 JSON 作为结果，DataTables 在显示当前表格页面时使用该数据数组。在此模式下，不再一次性获取整个页面，而是根据需要发送多个小请求，并从服务器返回最少的数据量。DataTables 在此示例中调用/CompanyAjaxDataSource URL 并发送有关用户操作的信息。jQuery DataTables 插件的服务器端配置的完整示例可以在此处找到。服务器端模式的一个主要问题是实现服务器端逻辑，该逻辑接受来自客户端组件的参数，执行操作，并按预期返回数据。
在 AJAX 模式下，只有最少的数据通过 JSON 提供给插件。插件将 AJAX 请求发送到服务器，其中包含视图的当前状态信息（当前页面、过滤条件、页码等）。服务器接受 AJAX 调用，确定应在客户端显示哪些信息，并将 JSON 响应返回给插件。请注意，在这种情况下，处理必须在服务器端实现。
在 AJAX 模式下，视图页面中不会生成任何相关信息，因此它可以是一个静态 HTML 页面。此示例中使用的 HTML 页面的示例显示在以下列表。
<!DOCTYPE html>
<html>
<head>
<title>Using jQuery DataTables plugin with AJAX
source implemented in Java web application</title>
<link href="media/dataTables/demo_page.css"
rel="stylesheet" type="text/css" />
<link href="media/dataTables/demo_table.css"
rel="stylesheet" type="text/css" />
<link href="media/dataTables/demo_table_jui.css"
rel="stylesheet" type="text/css" />
<link href="media/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" media="all" />
<link href="media/themes/smoothness/jquery-ui-1.7.2.custom.css"
rel="stylesheet" type="text/css" media="all" />
<script src="scripts/jquery-1.4.4.min.js"
type="text/javascript"></script>
<script src="scripts/jquery.dataTables.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#companies").dataTable({
"bServerSide": true,
"sAjaxSource": "/JQueryDataTables/CompanyAjaxDataSource",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
});
</script>
</head>
<body id="dt_example">
<div id="container">
<div id="demo_jui">
<table id="companies" class="display">
<thead>
<tr>
<th>Company name</th>
<th>Address</th>
<th>Town</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
正如您所看到的，表格主体是完全空的，因为 jQuery DataTables 插件将通过 AJAX 调用填充。在文档就绪事件中，DataTables 使用三个附加参数进行初始化：
bServerSide- 指示DataTables插件从服务器端获取信息。sAjaxSource- 定义插件应调用以获取数据的 URL。bProcessing(可选) - 在 AJAX 调用执行期间用于显示“Processing”消息。
服务器端代码的关键部分是为 jQuery DataTables 插件提供数据的组件——在这种情况下，这是当调用 sAjaxSource 页面时响应的服务器端组件。它可以是任何东西：Servlet、JSP 页面或任何返回基于插件发送的参数的 JSON 响应的服务器端代码。jQuery DataTables 插件会发送很多参数到服务器端；您可以在 DataTables 网站上找到详细文档，但这里是最重要的参数：
sEcho-DataTables用于同步目的的整数值。服务器端代码的响应应返回相同的值给插件。sKeyword- 在过滤器文本框中输入的文本，用于过滤记录。iDisplayStart- 应显示的第一个记录（用于分页）。iDisplayLength- 应返回的记录数（此值等于在“显示 XXX 条目”下拉菜单中选择的值）。此值也用于分页。iColumns- 表格中的列数。iSortingCols- 用于排序的列数。通常此值为1，但如果用户按多列排序（在点击表头单元格时按住 SHIFT 键），DataTables插件将发送关于应使用多少列对结果进行排序的信息。iSortCol_0,iSortCol_1,iSortCol_2, 等。- 用于排序结果的列的 ID。如果结果按一列排序，您应按iSortCol_0列排序。sSortDir_0,sSortDir_1,sSortDir_2, 等。- 用于排序的每列的排序方向。如果结果按一列排序，将在sSortDir_0参数中返回“asc”或“desc”值。在多列排序的情况下，此数组中的每个参数将具有与iSortCol_参数中的列匹配的方向。
服务器端组件应具有 GET 方法处理程序，该处理程序将在插件发送 AJAX 请求时调用。此方法应接受上述参数，处理数据，并准备将发送给插件的值。下面示例显示了从 Servlet 返回的响应示例。
{ "sEcho":"1",
"iTotalRecords":97,
"iTotalDisplayRecords":9,
"aaData":[
["Zander Exports", "34 Sapcote Trading Centre", "London"],
["Windsong International", "Heather Court", "Kent"],
["Wilkinson Turner King", "10A London Road", "Cheshire"],
["Web User", "IPC Media", "London "],
["Way to Blue", "First Floor", "London"],
["Warner Home DVD", "Warner House", "London"],
["Vivante Music Ltd", "32 The Netherlands", "Surrey"],
["Vinyl Music", "1 Minerva Works", "West Yorkshire"],
["Villa Audio Ltd", "Baileys Yard", "Essex"]
]
}
服务器返回给 DataTables 插件的值是：
sEcho-DataTables用于同步目的的整数值。对于发送到服务器端页面的每次调用，DataTables插件在sEcho参数中发送序列号。响应中必须返回相同的值，因为DataTables使用它进行同步和匹配请求与响应。iTotalRecords- 表示服务器端存在的总未过滤记录的整数值，这些记录在未应用过滤器时可能会显示。此值仅用于显示目的；当用户在搜索文本框中输入关键字时，DataTables会显示“显示 1 到 10 的 23 条记录（共过滤 51 条记录）”消息。在这种情况下，响应中返回的iTotalRecords值等于 51。iTotalDisplayedRecords- 表示与当前过滤器匹配的记录数的整数值。如果用户未在搜索文本框中输入任何值，此值应与iTotalRecords值相同。DataTables插件使用此值来确定生成分页所需的页数——如果此值小于或等于当前页面大小，分页按钮将被禁用。当用户在搜索文本框中输入关键字时，DataTables会显示“显示 1 到 10 的 23 条记录（共过滤 51 条记录）”消息。在这种情况下，响应中返回的iTotalDisplayedRecords值等于 23。aaData- 一个二维数组，表示将在表格中显示的单元格值。当DataTables收到数据时，它将使用aaData数组中的值填充表格单元格。二维数组中的列数必须与 HTML 表格中的列数（即使是隐藏的）匹配，并且行数应等于当前页面上可以显示的条目数（例如，10、25、50 或 100——此值在“显示 XXX 条目”下拉菜单中选择）。
在这种情况下，会返回一个将要显示的单元格矩阵。然而，这并非唯一可用的格式。您也可以返回以下格式的 JSON 对象数组：
{
"sEcho":"1",
"iTotalRecords":73,
"iTotalDisplayRecords":51,
"aaData":[
{"name":"Zane Music","address":"162 Castle Hill","town":"Berkshire"},
{"name":"Zander Exports","address":"34 Sapcote Trading Centre","town":"London"},
{"name":"Windsong International","address":"Heather Court","town":"Kent"},
{"name":"Wilkinson Turner King","address":"10A London Road","town":"Cheshire"},
{"name":"Web User","address":"IPC Media","town":"London "},
{"name":"Way to Blue","address":"First Floor","town":"London"},
{"name":"Warner Home DVD","address":"Warner House","town":"London"},
{"name":"Vivante Music Ltd","address":"32 The Netherlands","town":"Surrey"},
{"name":"Vinyl Music","address":"1 Minerva Works","town":"West Yorkshire"},
{"name":"Villa Audio Ltd","address":"Baileys Yard","town":"Essex"}
]
}
在这种情况下，会返回命名属性，而不是像上一种情况那样返回数组的数组。DataTable 初始化调用应略作更改，因为我们需要将对象中的属性映射到表格列。初始化调用显示在以下代码中。
$(document).ready(function () {
$("#companies").dataTable({
"bServerSide": true,
"sAjaxSource": "/JQueryDataTablesAll/CompanyGsonObjects",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"aoColumns": [
{ "mDataProp": "name" },
{ "mDataProp": "address" },
{ "mDataProp": "town" }
]
});
});
在此示例中，在 DataTable 初始化调用中的 aoColumns 参数中添加了属性到列的映射。
Servlet 实现
任何接受上述参数并返回预期 JSON 结果的 Java 服务器端组件都可以使用。在此示例中，出于演示目的使用了普通的 Servlet，但您可以使用任何其他组件。此示例中使用的 Servlet 具有一个 doGet 方法，该方法接受参数并返回 JSON 对象。以下列表显示了 get 方法的示例。
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
JQueryDataTableParamModel param = DataTablesParamUtility.getParam(request);
String sEcho = param.sEcho;
int iTotalRecords; // total number of records (unfiltered)
int iTotalDisplayRecords;//value will be set when code filters companies by keyword
//Filtering companies
//Ordering companies
//Pagination
//Generate JSON response
}
该 Servlet 映射到/CompanyAjaxDataSource URL，并且 get 方法接收插件发送的参数。为此，我们添加了两个实用类：JQueryDataTableParamModel 包含插件发送的属性，以及 DataTablesParamUtility，它从请求加载 JQueryDataTableParamModel 的值。此外，在此代码部分，准备了将要发送给插件的值。实际填充请求中属性的代码被省略了，但您可以在代码示例中找到。请注意，此类中的属性与插件发送的参数名称相同，因此您可以轻松地跟踪代码。
在服务器端需要执行的第一项操作是根据插件提供的关键字过滤公司。此代码显示在以下列表中。
iTotalRecords = DataRepository.GetCompanies().size();
List<Company> companies = new LinkedList<Company>();
for(Company c : DataRepository.GetCompanies()){
if( c.getName().toLowerCase().contains(param.sSearch.toLowerCase())
||
c.getAddress().toLowerCase().contains(param.sSearch.toLowerCase())
||
c.getTown().toLowerCase().contains(param.sSearch.toLowerCase()))
{
companies.add(c); // Add a company that matches search criterion
}
}
iTotalDisplayRecords = companies.size();
//Number of companies that matches search criterion should be returned
输入在过滤器文本框中的关键字位于 param.sSearch 字符串中。在此示例中，iTotalRecords 设置为列表中公司的总数，按公司属性进行搜索，并将包含关键字的新过滤公司列表添加到列表中。过滤后的公司数量存储在 iTotalDisplayRecords 变量中。在代码的第二部分，按列对公司进行排序。以下代码显示了使用应排序的列索引和方向进行的排序。在服务器端代码中，您需要知道列索引与 Company 类中的属性相匹配。
final int sortColumnIndex = param.iSortColumnIndex;
final int sortDirection = param.sSortDirection.equals("asc") ? -1 : 1;
Collections.sort(companies, new Comparator<Company>(){
@Override
public int compare(Company c1, Company c2) {
switch(sortColumnIndex){
case 0:
return c1.getName().compareTo(c2.getName()) * sortDirection;
case 1:
return c1.getAddress().compareTo(c2.getAddress()) * sortDirection;
case 2:
return c1.getTown().compareTo(c2.getTown()) * sortDirection;
}
return 0;
}
});
这是一个简化的情况，假定排序是按一列进行的，并且将用于排序的列索引和方向分别存储在 param.iSortColumIndex 和 param.sSortDirection 属性中。
最后需要实现的功能是分页。当前页码和长度分别存储在 iDisplayStart 和 iDisplayLength 属性中，这些属性用于获取应返回给插件的子列表。以下列表显示了一个示例。
if(companies.size()< param.iDisplayStart + param.iDisplayLength)
companies = companies.subList(param.iDisplayStart, companies.size());
else
companies = companies.subList(param.iDisplayStart,
param.iDisplayStart + param.iDisplayLength);
当列表准备好后，应创建表示响应的 JSON 对象。创建 JSON 响应的代码是：
try {
JsonObject jsonResponse = new JsonObject();
jsonResponse.addProperty("sEcho", sEcho);
jsonResponse.addProperty("iTotalRecords", iTotalRecords);
jsonResponse.addProperty("iTotalDisplayRecords", iTotalDisplayRecords);
Gson gson = new Gson();
for(Company c : companies){
JsonArray row = new JsonArray();
row.add(new JsonPrimitive(c.getName()));
row.add(new JsonPrimitive(c.getAddress()));
row.add(new JsonPrimitive(c.getTown()));
data.add(row);
}
jsonResponse.add("aaData", data);
response.setContentType("application/Json");
response.getWriter().print(jsonResponse.toString());
} catch (JsonIOException e) {
e.printStackTrace();
response.setContentType("text/html");
response.getWriter().print(e.getMessage());
}
此示例包含 echo、总记录数和总过滤记录数属性。此外，数据属性有一个包含名称、地址和城市信息的矩阵。当此对象返回给插件时，过滤后的信息将显示在客户端的表格中。
如您之前所见，您可以输出矩阵或对象数组回 DataTable。如果您想输出对象数组，代码略有不同：
Gson gson = new Gson();
try {
JsonObject jsonResponse = new JsonObject();
jsonResponse.addProperty("sEcho", sEcho);
jsonResponse.addProperty("iTotalRecords", iTotalRecords);
jsonResponse.addProperty("iTotalDisplayRecords", iTotalDisplayRecords);
jsonResponse.add("aaData", gson.toJsonTree(companies));
response.setContentType("application/Json");
response.getWriter().print(jsonResponse.toString());
} catch (JsonIOException e) {
e.printStackTrace();
response.setContentType("text/html");
response.getWriter().print(e.getMessage());
}
在此示例中，GSON 库用于将 Java 对象序列化为 JSON，但您可以使用任何其他 JSON 序列化库。
在此示例中，处理是在纯源代码中进行的；然而，在您的应用程序中，您可以使用其他方法，如 SQL、存储过程、HQL 等。您可以在 DataTables 网站 上找到从数据库生成 JSON 响应的示例。唯一重要的是您返回一个 JSON 响应，其中包含与表格当前状态匹配的对象。
结论
本示例展示了如何使用 jQuery DataTables 插件在 Java Web 应用程序中创建有效、功能齐全的表格。利用文章中的代码示例，您可以显著增强 Web 应用程序的外观和功能。我建议您尝试一下——当您在应用程序的几个表格中集成 jQuery DataTables 后，您会发现实现非常简单，并且经过一些练习，您将能够以非常小的努力实现许多功能。
您可以下载示例代码，该代码是在 Eclipse Java EE IDE for Web Developers 中创建的，运行在 Tomcat 6.0 Web 服务器上。如果您拥有相同的配置，您可以运行并尝试此项目，如果您有其他开发环境，我建议您创建一个新项目，配置它，然后添加您可以在项目中找到的类。我希望这个示例能帮助您创建更好的表格界面。
如果您有兴趣为 jQuery DataTables 添加完整的 Web 2.0 CRUD 功能，我推荐另一篇文章，为 Web 表格添加数据管理 (CRUD) 功能，其中我解释了如何配置插件以自动为 jQuery DataTables 插件添加内联编辑、删除和添加新记录的功能。
历史
- 2012年4月7日：初始版本