内容发布更新时间 : 2024/12/23 14:20:21星期一 下面是文章的全部内容请认真阅读。
jQuery DataTables in Java Web Applications
介绍
在web开发中最常见的任务就是将表加到页面中。一个标准的页面有一个表，你可能会花大量的时间将他们显示成下图所示的那样：
然而，这个表是太简单了。它没有排序，也没有分页，一些过滤去也许是可以使用的。你会需要花费多大工作量来添加这些功能呢？如果你正在使用jQuery，如果你已经知道了jQuery的DataTable插件，那么你就会知道，你只需要一行JavaScript代码就可以解决了：
$('table#myTable').dataTable();
myTable的用ID的HTML表在这个例子中，被发现的网页在浏览器中的DOM和插件的数据表，以加在前文中所描述的窗口小部件应用。插件中的数据表添加一个“显示XXX项目”表上方的下拉菜单，使用户能够选择他是否希望看到10，25，50，或100每页记录和搜索文本框，使用户能够过滤应该显示在表中的关键字记录。这个插件还增加了排序功能，使用户通过点击列标题对结果进行排序。下面的表中，有一个分页，使用户能够在页面中导航，并自动显示当前显示的记录的文本。
使用JavaScript的功能，所以你不需要做任何事情，一切都实现。你唯一需要做的是在初始情况下生成一个纯表。新的，增强的表如下图所示：
只用了一行代码，就获取了很多不错的功能。在这片篇文章中，你会发现很多细节插件的用法。
背景
这篇文章的目的是向您展示如何可以实现全功能，高性能的表使用jQuery的DataTable插件。这是一个JavaScript插件使用jQuery库处理所有必要的互动与用户的客户端上实现。
插件的jQuery的数据表是一个很好的客户端组件，可以用来在Web浏览器中创建丰富的功能表。这个插件的功能增添了不少纯HTML表格，如滤波，分页，排序，页面长度变化等，虽然默认情况下，它是纯粹的客户端，它可能被配置为使用来自服务器的数据通过AJAX为了提高性能的呼叫。然而，数据表整合 与服务器端代码，开发人员必须知道DataTable和如何使用它们在服务器端所传送的协议和参数。
本文展示了如何jQuery的插件，可以集成到Java Web应用程序的DataTable。它包含一步一步插件中的数据表显示了如何与服务器端组件进行交互的例子。有很多，如在Java标准的Servlet，JSP，JSF，春季，Struts的，等等，本文将不覆盖他们所有的服务器端框架。在本文中，我将重点放在平原的servlet演示如何创建高性能的基于AJAX的数据表与标准的Java servlet。
使用代码
此示例演示如何可以生成一个表的公司，并添加了jQuery插件的HTML表数据表。该代码是逻辑组织在MVC结构：
1、Model代表包含数据将显示在浏览器的类
2、控制器是应用程序逻辑和表示的servlet处理web请求和实用功能 3、查看页面是用来显示数据到客户端 - 在这个例子中，一个JSP和一个普通的HTML页面作为视图
还有一个实用程序包，包含类Java对象转换成JSON（这是必需的，因为jQuery的数据表插件与服务器端代码通过JSON对象）。 该模型是一个Company class，它包含以下属性：
1、Name of the company 2、Address of the company 3、Town of the company
在这个例子中，有一个数据库或者其他数据源没有被使用，所以，我们使用一个包含硬编码的公司名单的名称为DataRepository的类。通过使用下面的调用语句，这个类将返回用于显示的公司：
DataRepository.GetCompanies();
在下面的章节中，提出了在JavaWeb应用程序中使用数据表的两个重要案例。 默认使用–客户端处理模式
在默认模式下，需要最少量的代码- Web服务器可以生成一个纯HTML表中的标准格式。客户端JavaScript组件将使用任何会产生，并添加客户端功能。在这个客户端模式下，数据表需要从
部分的所有表行，并进行过滤，分页和排序这些元素作为直接与内存中的对象。这是最快的方式使用数据表，但它需要服务器返回单呼，负载所有这些行中的所有数据，在内存中的JavaScript对象，使他们在DOM动态。这可能会导致服务器调用和内存使用在客户端的性能问题。然而，这可以最大限度地减少发送到服务器的请求，因为一旦表被加载，在所有不使用的服务器数量。
正如上文所述，jQuery的插件的数据表，都可以应用在一个静态的HTML浏览器中的结构。在这种情况下，您将需要在服务器端生成的HTML代码表。在这个例子中，我产生了一个表结构，使用JSP页面，在下面的清单所示：
<%@ page language=\ pageEncoding=\
import=\
type=\
| Company name | Address | Town |
|---|---|---|
| <%=c.getName()%> | <%=c.getAddress()%> | <%=c.getTown()%> |