Статьи

Как создать JQuery DataTable, используя JSON и Servlet

Июль 20, 2017

В этой статье я познакомлю вас с базовым кодированием, которое требуется для создания JQuery DataTable с использованием JSON, передаваемого простым сервлетом.
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.

Создание таблицы данных

Мы можем написать ниже код для создания базовой таблицы данных с данными

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 и имя столбца будут определены в табличном теге, как показано ниже

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);
}

Теперь мы можем использовать аннотацию сервлета или 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: // локальный: 8080 / ExampleDataTableJSON / feedSummary.jsp

JQuery DataTable Image

JQuery DataTabl

Заключение
Вы можете скачать полный исходный код по  ссылке Github  и, как правило, можете его разветвить или обновить.

Ссылки:

http://datatables.net/examples/

36
Share: