在本文中，我將介紹使用簡單servlet傳遞的JSON創建JQuery DataTable所需的基本編碼。 DataTable是基于JQuery的非常強大的網格，具有高級功能，可以使用自定義功能在短時間內構建。

安裝

下載最新的JQuery DataTable下載

上面的下載將提供兩個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>

最新的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/

參考：在Tech My Talk博客上， 如何從我們的JCG合作伙伴 Nitin Kumar 使用JSON和servlet創建JQuery DataTable 。

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

總結

以上是生活随笔為你收集整理的如何使用JSON和Servlet创建JQuery DataTable的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。