将 DataTables 集成到 Java Web 应用程序（Datatables 和 Java）

Tuan Xuan Bui

4.83/5 (7投票s)

2013年11月8日

CPOL

4分钟阅读

81318

3029

将 DataTables 集成到 Java Web 应用程序中，按需渲染 DataTable，易于使用且灵活。

下载 datatables_webapp.zip - 2.1 MB

引言

本文将演示如何轻松地将 Java Web 与 DataTable (DataTables.net) 集成。

将 Datatable 集成到 Servlet 中
按需初始化新的 Datatable（单击即可创建表）
自动处理 AJAX 请求，为 Datatable 响应（只需实现一个接口）。

背景

如果您在 Google 上搜索，会发现一些关于将 Datatables.net 集成到 Java Web 应用程序的教程和文章，但对我来说，我找不到满足我需求的示例。我需要一些全面的东西，一些能帮助我在 Java 代码中控制 Datatable 并能轻松使用的东西。自己完成，以下是我的想法：

将所有 Datatable 的属性映射到 Java 对象，当然要有 Datatables.net 的文档。
找到一种更轻松地渲染表头的方法，最终有两种方式：经典类和注解。
当 Datatable 设置为服务器端处理时，处理从表中发送的 Ajax 请求的最佳方法是什么？

为了完全理解本文，您必须熟悉以下术语：

Java 语言（反射、注解），J2EE 或至少 Java Web 应用程序。
JavaScript, jQuery, AJAX
JSON
DataTables

本文使用以下工具和库：

Eclipse IDE（推荐 Eclipse IDE for Java EE Developers)
Jquery https://jqueryjs.cn/, Jquery UI https://jqueryui.jqueryjs.cn/
Datatables https://datatables.net.cn/
Jackson 库（用于序列化 JSON）http://jackson.codehaus.org/
Tomcat 服务器 https://tomcat.net.cn/

Using the Code

本项目的源代码主要演示了如何使用 datatables 包装器库。您可以在这里找到更多详细信息和源代码。

在客户端，我们有两种类型的表格要创建（由 DataTable 对象的 bServerSide 属性指定）：

静态数据<静态表>：客户端请求一个表，服务器返回一个包含表定义和数据的 Json（行）。此类型通常适用于数据库记录不多时。
动态数据<动态表>：客户端请求一个表，服务器只返回表的定义，然后表本身会发出 Ajax 请求来检索数据，为了服务此请求，服务器只从数据库返回有限数量的数据。对于包含数千条记录的数据库，此类型是最佳选择。

使用 datatables 包装器时需要执行以下步骤：

将 datatables **包装器**和**依赖项**添加到项目中。
创建一个 jsp 文件<index.jsp>，其中包含必要的 JavaScripts 和 CSS 库。
创建一个 Java bean 类，该类代表一个表行（包括列**标题**定义）。
添加一个新**Servlet**类，在 web.xml 文件中声明 URL 模式。
要处理表格数据，请实现 IDataHanlder 接口。

这是截图：

Eclipse 项目结构

I. 依赖项

项目需要依赖项：

datatableswapper-1.0.jar, 
jackson-annotations-2.2.3.jar, 
jackson-core-2.2.3.jar, 
jackson-databind-2.2.3.jar

II. Jsp 文件

它们也都共享同一个 index.jsp 文件，并需要以下 JavaScript 和 CSS 库：

<link rel="stylesheet" type="text/css" 
href="js/data_table/reset-min.css">
<link rel="stylesheet" type="text/css" 
href="js/data_table/complete.css"> 
<script type="text/javascript" 
language="javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" language="javascript" 
src="js/data_table/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" 
src="js/data_table/jquery.dataTables.plugins.js"></script>

页面加载后的 JavaScript（**注意**：由于 JSON 的限制，我们无法将回调代码添加到 JSON 中，因此 JSON.parse 会用回调函数替换回调名称，该函数通常在插件文件中定义。）

$.ajax({
    dataType: "text",//force ajax return text in order to parse json latter.
    url: "DataTableCtrl", 
    success: function(data){
        //custom parse Json
        var jsonTbl = JSON.parse(data, applyCallback);
        
        //create DOM table in memory
        var DOMTable = $("<table>").attr("class", "pretty");
                
        //add dom table into body
        $("body").append(DOMTable);
                
        //init datatables
        oTable = DOMTable.dataTable(jsonTbl); 
    }
});

完整的 index.jsp 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" 
href="js/data_table/reset-min.css">
<link rel="stylesheet" type="text/css" 
href="js/data_table/complete.css">

<script type="text/javascript" language="javascript" 
src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" language="javascript" 
src="js/data_table/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" 
src="js/data_table/jquery.dataTables.plugins.js"></script>

<script language="javascript" type="text/javascript">
    var oTable;
    $(document).ready(function(){
        $.ajax({
            dataType: "text",//force ajax return text in order to parse json latter.
            url: "DataTableCtrl", 
            success: function(data){
                //custome parse Json
                var jsonTbl = JSON.parse(data, applyCallback);
        
                //create DOM table in memory
                var DOMTable = $("<table>").attr("class", "pretty");
                
                //add dom table into body
                $("body").append(DOMTable);
                
                //init datatables
                oTable = DOMTable.dataTable(jsonTbl); 
            }
        });
    });
</script>
</head>
    <body>
    </body>
</html>

III. Bean 类

Java bean 类将在每个字段上具有 @AoColumn 注解。它指示表的列标题。

import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonInclude.Include;

import net.datatables.wrapper.annotation.AoColumn;

public class Student {
    @AoColumn(sTitle = "ID")
    private int id;
    
    @AoColumn(sTitle = "Name")
    @JsonInclude(Include.ALWAYS)
    private String name;
    
    @AoColumn(sTitle = "Age")
    private int age;
    
    @AoColumn(sTitle = "Class")
    @JsonInclude(Include.ALWAYS)
    private String clazz;
    
    @AoColumn(sTitle = "Address", bSearchable = false)
    @JsonInclude(Include.ALWAYS)
    private String address;
.... Setters and  getters method
}

上面的代码定义了表格列的标题为 **[ ID | Name | Age | Class | Address]**。

**注意**：默认情况下，当值为 null 时，Datatables 包装器不会包含在 JSON 响应中。但是，我们希望通过添加额外注解来包含它，如果它是数据行的值。

@JsonInclude(Include.ALWAYS)

IV. Servlet 类和 web.xml

DataTableCtrl.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) 
                            throws ServletException, IOException {
    // Create an instance of DataTableWrapper
    DataTableWrapper tableWrapper = new DataTableWrapper();
    // Create an instance of Datatable with type: Student
    DataTable<Student> table = new DataTable<>(Student.class);

    // Set properties for table.
    table.bServerSide = true;
    table.bDestroy = true;
    table.sPaginationType = "full_numbers";
    table.fnServerData = new FnCallBack("fnDataTablesPipeline");

    // specify ajax data handle class
    tableWrapper.setDataHandler(StudentDataHandler.class);
    tableWrapper.setDataTable(table);
    try {
        // let the tablewrapper do it job
        tableWrapper.wrap(request, response);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

web.xml

  <servlet>
    <servlet-name>DataTableCtrl</servlet-name>
    <servlet-class>servlet.DataTableCtrl</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>DataTableCtrl</servlet-name>
    <url-pattern>/DataTableCtrl</url-pattern>
  </servlet-mapping>

V. 实现 IDataHandler 接口

StudentDataHandler.java.

有三个方法需要您覆盖：

public List<Student> getListData(AjaxRequest tableRequest,...)

AjaxRequest 对象将包含表格发送过来的所有信息。例如：sSearchKeyword、iDisplayStart、iDisplayLength... 例如：在动态表中，在用户单击分页控件上的“下一页”按钮后。根据 iDisplayStart 和 iDisplayLength，我们将返回表格所需的正确行数。

*注意：如果在 Servlet 类中定义了：table.bServerSide = false，则 AjaxRequest 对象将为 null，并且我们应该一次性返回数据库中的所有记录。 方法：getITotalRecords() 和 getITotalDisplayRecords() 不需要返回任何值，除非是 0。

public class StudentDataHandler implements IDataHandler<Student> {
    List<Student> list;
    int itotalRecords;
    int iTotalDisplay;
    
    public StudentDataHandler() {
        list = getAllStudents();
        itotalRecords = iTotalDisplay = list.size();
    }
    @Override
    public List<Student> getListData(AjaxRequest tableRequest,
            HttpServletRequest request) {
        return filterStudents(tableRequest);
    }

    @Override
    public int getITotalRecords() {
        return itotalRecords;
    }

    @Override
    public int getITotalDisplayRecords() {
        return iTotalDisplay;
    }

结论

通过使用注解，现在创建 datatables 似乎非常简单。表格将在客户端需要时创建，并且在列标题和数据方面没有限制。基于这个想法，我们可以创建另一个表并使用 AJAX 替换当前表。