在本文中，我将介绍使用简单servlet传递的JSON创建JQuery DataTable所需的基本编码。 DataTable是基于JQuery的非常强大的网格，具有高级功能，可以使用自定义功能在短时间内构建。

安装

1. 下载最新的JQuery DataTable下载
2. 上面的下载将提供两个JQuery插件jquery.js和queryTables.js

   <script type="text/javascript"
   charset="utf-8" src="/DataTables/media/js/jquery.js"></script>
   <script type="text/javascript"
   charset="utf-8" src="/DataTables/media/js/jquery.dataTables.js"></script>

3. 最新的DataTable下载包随附的默认样式表

   <style type="text/css" title="currentStyle">@import "../resources/css/demo_table.css";
   </style>

注意： 您可以从Github链接下载完整的源代码

创建数据表

我们可以编写以下代码来创建具有数据的基本DataTable

feedSummary.jsp

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
var oTable = $('#tableId').dataTable( {
"processing": true,
"ajax": {
"url": "/FeedSummaryUpdate/FeedServlet",
"dataSrc": "demo",
"type": "GET"
}
} );
} );
</script>

$（document）.ready将准备执行javascript，并且var oTable = $（'＃tableId'）。dataTable表示已将DataTable写入tableId位置。

默认情况下，DataTables将为您的表添加排序，过滤，分页和信息，使网站的最终用户能够控制表的显示并尽快从表中查找所需的信息。

指针tableId和列名将在table标记中定义，如下所示

feedSummary.jsp

<table cellpadding="0" cellspacing="0" border="0"
id="tableId">
<thead>
<tr>
<th width="10%">First Name</th>
<th width="10%">Last Name</th>
<th width="10%">Address 1</th>
<th width="10%">Address 2</th>
</tr>
</thead>
</table>

上面的DataTable代码调用FeedServlet，它将返回如下定义的JSON字符串

FeedServlet.java

protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
String json = "{ \"demo\":[[\"First Name\",\"Last Name\","+
+\"Address1\",\"Address2\"],[\"First Name\",\"Last Name\",\"Address1\",\"Address2\"]]}";
out.println(json);
}

现在我们可以使用servlet批注或以下web.xml在FeedServlet上方进行注册

Web.xml

<servlet>
<description></description>
<display-name>FeedServlet</display-name>
<servlet-name>FeedServlet</servlet-name>
<servlet-class>FeedServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FeedServlet</servlet-name>
<url-pattern>/FeedServlet</url-pattern>
</servlet-mapping>

跑步

结合以上几点并与服务器一起部署以查看结果，如下所示： http：// localhost：8080 / ExampleDataTableJSON / feedSummary.jsp

jQuery DataTable图片

结论

您可以从Github链接下载完整的源代码，最欢迎进行分叉或更新。

资源：

• http://datatables.net/examples/

翻译自: https://www.javacodegeeks.com/2013/09/how-to-create-jquery-datatable-using-json-and-servlet.html