《DataTables数据库分页》由会员分享，可在线阅读，更多相关《DataTables数据库分页（14页珍藏版）》请在金锄头文库上搜索。
1、jQuery DataTables in Java Web Applications介绍在 web 开发中最常见的任务就是将表加到页面中。一个标准的页面有一个表，你可能会花大量的时间将他们显示成下图所示的那样：然而，这个表是太简单了。它没有排序，也没有分页，一些过滤去也许是可以使用的。你会需要花费多大工作量来添加这些功能呢？如果你正在使用jQuery，如果你已经知道了 jQuery 的 DataTable 插件，那么你就会知道，你只需要一行 JavaScript 代码就可以解决了：$(table#myTable).dataTable();myTable 的用 ID 的 HTML 表在这个例子中
2、，被发现的网页在浏览器中的 DOM 和插件的数据表，以加在前文中所描述的窗口小部件应用。插件中的数据表添加一个“显示 XXX 项目”表上方的下拉菜单，使用户能够选择他是否希望看到10，25，50，或 100 每页记录和搜索文本框，使用户能够过滤应该显示在表中的关键字记录。这个插件还增加了排序功能，使用户通过点击列标题对结果进行排序。下面的表中，有一个分页，使用户能够在页面中导航，并自动显示当前显示的记录的文本。使用 JavaScript 的功能，所以你不需要做任何事情，一切都实现。你唯一需要做的是在初始情况下生成一个纯表。新的，增强的表如下图所示： 只用了一行代码，就获取了很多不错的功能。在这
3、片篇文章中，你会发现很多细节插件的用法。背景这篇文章的目的是向您展示如何可以实现全功能，高性能的表使用 jQuery 的DataTable 插件。这是一个 JavaScript 插件使用 jQuery 库处理所有必要的互动与用户的客户端上实现。插件的 jQuery 的数据表是一个很好的客户端组件，可以用来在 Web 浏览器中创建丰富的功能表。这个插件的功能增添了不少纯 HTML 表格，如滤波，分页，排序，页面长度变化等，虽然默认情况下，它是纯粹的客户端，它可能被配置为使用来自服务器的数据通过 AJAX 为了提高性能的呼叫。然而，数据表整合 与服务器端代码，开发人员必须知道 DataTable
4、和如何使用它们在服务器端所传送的协议和参数。本文展示了如何 jQuery 的插件，可以集成到 Java Web 应用程序的DataTable。它包含一步一步插件中的数据表显示了如何与服务器端组件进行交互的例子。有很多，如在 Java 标准的 Servlet，JSP，JSF，春季，Struts 的，等等，本文将不覆盖他们所有的服务器端框架。在本文中，我将重点放在平原的 servlet 演示如何创建高性能的基于 AJAX 的数据表与标准的 Java servlet。使用代码此示例演示如何可以生成一个表的公司，并添加了 jQuery 插件的 HTML 表数据表。该代码是逻辑组织在 MVC 结构：1、
5、Model 代表包含数据将显示在浏览器的类2、控制器是应用程序逻辑和表示的 servlet 处理 web 请求和实用功能3、查看页面是用来显示数据到客户端 - 在这个例子中，一个 JSP 和一个普通的 HTML 页面作为视图还有一个实用程序包，包含类 Java 对象转换成 JSON（这是必需的，因为jQuery 的数据表插件与服务器端代码通过 JSON 对象）。该模型是一个 Company class，它包含以下属性：1、Name of the company2、Address of the company3、Town of the company在这个例子中，有一个数据库或者其他数据源没有被
6、使用，所以，我们使用一个包含硬编码的公司名单的名称为 DataRepository 的类。通过使用下面的调用语句，这个类将返回用于显示的公司：DataRepository.GetCompanies(); 在下面的章节中，提出了在 JavaWeb 应用程序中使用数据表的两个重要案例。默认使用 客户端处理模式在默认模式下，需要最少量的代码- Web 服务器可以生成一个纯 HTML 表中的标准格式。客户端 JavaScript 组件将使用任何会产生，并添加客户端功能。在这个客户端模式下，数据表需要从 部分的所有表行，并进行过滤，分页和排序这些元素作为直接与内存中的对象。这是最快的方式使用数据表，但它
7、需要服务器返回单呼，负载所有这些行中的所有数据，在内存中的JavaScript 对象，使他们在 DOM 动态。这可能会导致服务器调用和内存使用在客户端的性能问题。然而，这可以最大限度地减少发送到服务器的请求，因为一旦表被加载，在所有不使用的服务器数量。正如上文所述，jQuery 的插件的数据表，都可以应用在一个静态的 HTML 浏览器中的结构。在这种情况下，您将需要在服务器端生成的 HTML 代码表。在这个例子中，我产生了一个表结构，使用 JSP 页面，在下面的清单所示：Applying jQuery DataTables plugin in the Java Server applicati
8、on$(document).ready(function () $(#companies).dataTable(sPaginationType: full_numbers,bJQueryUI: true););Company nameAddressTown在此 JSP 页面中包括所有必要的 JavaScript 库，公司表产生的 HTML 代码。出于演示的目的，一个简单的循环生成一个 repository 类所传回的每家公司的TR。然而，在你的应用程序，你可以使用你想要的任何服务器端处理（，JSTL的 JavaBeans 组件等），因为 jQuery 的插件是独立的 DataTable 的应用
9、的服务器端技术。在文件准备的 JavaScript 事件处理程序，平原生成的表是加强与 jQuery 的插件的 DataTable。有两个参数被传递到插件的初始化函数（这些我总是使用两个参数）：1、sPagination -指示插件生成分页用数字而不是前两次的下一个按钮，默认生成的.2、bJQueryUI -应用标准 jQueryUI 的样式.取而代之的是普通的 HTML 表，下面的组件显示在客户端上:你看到的所有动作，在组件上实现客户端（例如，在文本框中输入文本时，TR元素被过滤）。这对于用户来说，是最快的方法的假设条件下，所需的时间来加载表不是太大。如果你有一个庞大的数据量，你可能会考虑使
10、用 AJAX 模式，只有部分结果返回给插件的 DataTable。这些都只是基本的功能插件所提供的数据表，并在 加强 HTML 表格使用 jQuery插件文章 的 DataTable，你可以看到更多的细节。此外，您还可以使用很多其他的增强功能，如：1、启用类似 Excel 导航箭头使用 KEYTABLE 的数据表，冻结列使用FixedColumns 插件或标题行使用 FixedHeader 插件，扩展。2、启用内嵌点击和表中编辑编辑的细胞，使用数据表编辑插件。3、分组行使用行分组插件。4、使用高级过滤列筛选器插件 或 列筛选的 Widget 插件。5、列隐藏和重新排序使用 ColVis，和 C
11、olReorder 插件6、行重新排序的行重新排序插件7、将数据导出到 CSV，Excel 和 PDF 格式使用的 TableTools 插件8、启用即时滚动使用滚轮插件的 Ajax 化的数据你可以看到额外的 DataTable 插件的完整列表。所有这些插件都是额外添加附加的 DataTable，但你也可以使用功能强大的 API 自定义数据表行为。有几个提到的插件增强平原表的一个例子如下图所示：在这个例子中添加一组插件的公司名称的第一个字母，分区，行和列过滤部件，增加了过滤表上方的下拉菜单。在上图中，公司过滤伦敦镇。添加这些插件很简单 - 你只需要修改初始化呼叫，如果需要添加一些参数，如下面的
12、示例所示:$(document).ready(function () $(#companies).dataTable(sPaginationType: full_numbers,bJQueryUI: true,sDom: Wlfrtip).rowGrouping(sGroupBy: letter, bHideGroupingColumn: false);如果你有一个合理数量的记录表中，你不需要担心这些功能。只呈现一个普通的表，并应用插件，你需要一些组合。但是，如果你有很多的记录，表中所示，你想避免复杂的 JavaScript 在浏览器中处理，你可以实现处理逻辑在服务器端（例如，在一些 serv
13、let），设置的DataTable 查询服务器通过 AJAX 调用，以便采取应显示的信息。这种模式是在下面的部分描述.完全 Ajax 化的表-服务器端处理模式与 jQuery 开发的 DataTable 插件，它是通过配置数据表，以获取所需的数据查询服务器通过 AJAX 调用，可以实现客户端 - 服务器交互。在这种情况下，该插件将保持客户端的 UI 状态，处理所有的事件，但它不会处理数据。与其这样，它会调用服务器端的页面，后期的当前状态信息和所需的数据，来自服务器的响应，并刷新表格内容。在数据表的网站上，有服务器端配置插件的 jQuery 的 DataTable 发送到一个PHP 页面的请求，
14、并得到在当前视图中显示的数据，应是一个例子。服务器响应格式化为一个 JSON 对象，在客户端解析，并显示在表体。在这种情况下，每个事件（改变应显示每页项目的数量，输入关键字搜索过滤器，排序，按下按钮，分页等）触发的 DataTables 插件来发送当前页面的信息，搜索过滤和排序列的服务器页面。所示的请求，服务器页面返回 JSON 作为一个结果和数据表显示当前表页时，使用该数据阵列。在这种模式下，一次完整的页面，而不是多个较小的请求被发送时，新的信息是必需的，和从服务器返回的数据量最小。数据表，在这个例子中，呼叫/ CompanyAjaxDataSource URL，并发送关于用户操作的信息。服
15、务器端的配置了 jQuery 的 DataTable 插件可以在这里找到完整的例子。服务器端模式的一个主要问题是执行服务器端的逻辑，接受从客户端组件的参数，执行行动，并返回数据如预期。中的 AJAX 模式下，只有最小量的数据被提供给该插件使用 JSON。该插件将Ajax 请求发送到服务器认为的当前状态信息（当前页面过滤标准，页码等）。服务器接受 AJAX 调用，并决定什么样的信息应该显示在客户端上，并返回一个JSON 响应返回给插件。请注意，在这种情况下，处理必须在服务器端实现。AJAX 模式，没有相关的信息中生成的视图页面，因此它甚至可以是一个静态HTML 页面。在这个例子中使用的 HTML
16、 页面的一个例子显示在下面的列表：Using jQuery DataTables plugin with AJAX source implemented in Java web application$(document).ready(function () $(#companies).dataTable(bServerSide: true,sAjaxSource: /JQueryDataTables/CompanyAjaxDataSource,bProcessing: true,sPaginationType: full_numbers,bJQueryUI: true););Company nameAddressTown正如你可以看到，表体完全是空的，因为使用了 AJAX 调用 jQuery 的插件将被填充的 DataTable。在文档准备事件，初始化数据表与另外三个参数：bServerSide-指示从服务器端
