Статьи

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

Апрель 15, 2019

В этой статье я познакомлю вас с базовым кодированием, которое требуется для создания JQuery DataTable с использованием JSON, передаваемого простым сервлетом. DataTable — это очень мощная сетка на основе JQuery с расширенными функциями, которую можно создать за короткий промежуток времени с помощью настраиваемых функций.

Установка

  1. Скачать последнюю версию JQuery DataTable
  2. Над загрузкой будут представлены два плагина JQuery jquery.js и queryTables.js.
    1
    2
    3
    4
    <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
    1
    2
    3
    <style type="text/css" title="currentStyle">
     @import "../resources/css/demo_table.css";
    </style>

Примечание. Вы можете скачать полный исходный код по ссылке Github.

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

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

feedSummary.jsp

01
02
03
04
05
06
07
08
09
10
11
12
<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

01
02
03
04
05
06
07
08
09
10
11
<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

1
2
3
4
5
6
7
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

01
02
03
04
05
06
07
08
09
10
<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 Image

JQuery-datatabl

Вывод

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

Ресурсы:

44
Share: