В этой статье я познакомлю вас с базовым кодированием, которое требуется для создания JQuery DataTable с использованием JSON, передаваемого простым сервлетом. DataTable — это очень мощная сетка на основе JQuery с расширенными функциями, которую можно создать за короткий промежуток времени с помощью настраиваемых функций.
Установка
- Скачать последнюю версию JQuery DataTable
- Над загрузкой будут представлены два плагина JQuery jquery.js и queryTables.js.
1234
<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
123
<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
Вывод
Вы можете скачать полный исходный код по ссылке Github и, как правило, добро пожаловать на форк или обновление.
Ресурсы: