Для современных систем учёта стандартные таблицы из HTML мало подходят. Нужна подгрузка данных из JSON, нужна постраничная разбивка, нужно обновлять данные без перезагрузки страницы, нужна сортировка и многое другое.
Более красивую и современную форму можно сделать с помощью jqGrid. Дистрибутив jqGrid можно скачать по ссылке в конце статьи. Затем нужно сначала добавить на страницу загрузку необходимых ресурсов.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!-- JQuery CSS --> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" type="text/css" /> <!-- jqGrid CSS --> <link rel="stylesheet" href="css/ui.jqgrid.css" type="text/css" /> <!-- The actual JQuery code --> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"> </script> <!-- The JQuery UI code --> <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js" > </script> <!-- The jqGrid language file code--> <script type="text/javascript" src="js/i18n/grid.locale-en.js" > </script> <script type="text/javascript" src="js/i18n/grid.locale-ru.js" > </script> <script type="text/javascript" src="js/i18n/grid.locale-fr.js" > </script> <!-- The atual jqGrid code --> <script type="text/javascript" src="js/jquery.jqGrid.min.js" > </script> |
Теперь нужно объявить тег table для самого jqGrid и div для навигации по страницам:
1 2 |
<table id="jqGrid"></table> <div id="jqGridPager"></div> |
Инициализируем jqGrid. В качестве параметра передаём идентификатор тега table.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script type="text/javascript"> $(document).ready(function () { $("#jqGrid").jqGrid({ regional : 'ru', forceRegional : true, url: 'data.json', mtype: "GET", datatype: "json", colModel: [ { label: 'ID', name: 'id', key: true, width: 75 }, { label: 'Driver name', name: 'name', width: 150 } ], viewrecords: true, width: 780, height: 250, rowNum: 20, pager: "#jqGridPager" }); }); </script> |
Здесь url — адрес страницы, с которой будут загружаться данные, colModel — описание колонок, pager — идентификатор div, в котором будут рисоваться элементы для постраничной навигации, rowNum — количество строк на странице. На url будет отсылаться запрос с параметром page (номер страницы). Например, data.json?page=3. Параметры regional и forceRegional устанавливают русский язык.
С сервера должна возвращаться json следующего вида:
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "records":2, "page":1, "total":1, "rows":[{ "id":1, "name":"driver 1 name" },{ "id":2, "name":"driver 2 name" }] } |
Здесь records — общее количество записей, page — номер текущей страницы (с единицы), total — количество страниц, rows — сами строки.
Теперь код всей страницы вместе:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html> <head> <!-- JQuery CSS --> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" type="text/css" /> <!-- jqGrid CSS --> <link rel="stylesheet" href="css/ui.jqgrid.css" type="text/css" /> <!-- The actual JQuery code --> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"> </script> <!-- The JQuery UI code --> <script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js" > </script> <!-- The jqGrid language file code--> <script type="text/javascript" src="js/i18n/grid.locale-en.js" > </script> <script type="text/javascript" src="js/i18n/grid.locale-ru.js" > </script> <script type="text/javascript" src="js/i18n/grid.locale-fr.js" > </script> <!-- The atual jqGrid code --> <script type="text/javascript" src="js/jquery.jqGrid.min.js" > </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jqGrid</title> </head> <body> <table id="jqGrid"></table> <div id="jqGridPager"></div> <script type="text/javascript"> $(document).ready(function () { $("#jqGrid").jqGrid({ regional : 'ru', forceRegional : true, url: 'data.json', mtype: "GET", datatype: "json", colModel: [ { label: 'ID', name: 'id', key: true, width: 75 }, { label: 'Driver name', name: 'name', width: 150 } ], viewrecords: true, width: 780, height: 250, rowNum: 20, pager: "#jqGridPager" }); }); </script> </body> </html> |
Официальный сайт jqGrid: http://jqgrid.com/