source: main/trunk/model-sites-dev/cambridge-museum/collect/waikato-independent/pre-import/EditableDatabaseTable/WebContent/index-orig.html@ 34511

Last change on this file since 34511 was 34511, checked in by davidb, 4 years ago

Evolution of code away from Company model to one that uses RecordHashmap to represent the rows coming out of the JDBC database
File size: 4.6 KB
Line 
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
5 <title>Making DataTable fully editable for a JDBC backed database</title>
6 <link href="media/dataTables/demo_page.css" rel="stylesheet" type="text/css" />
7 <link href="media/dataTables/demo_table.css" rel="stylesheet" type="text/css" />
8 <link href="media/dataTables/demo_table_jui.css" rel="stylesheet" type="text/css" />
9 <link href="media/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
10 <link href="media/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
11
12 <script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
13 <script src="scripts/jquery.dataTables.min.js" type="text/javascript"></script>
14 <script src="scripts/jquery.dataTables.editable.js" type="text/javascript"></script>
15 <script src="scripts/jquery.jeditable.js" type="text/javascript"></script>
16 <script src="scripts/jquery.validate.js" type="text/javascript"></script>
17 <script src="scripts/jquery-ui.js" type="text/javascript"></script>
18
19
20 <script type="text/javascript">
21 $(document).ready(function () {
22 $("#database-table-view").dataTable({
23 "bServerSide": true,
24 "sAjaxSource": "/EditableDatabaseTable/JDBCAjaxDataSource",
25 "bProcessing": true,
26 "sPaginationType": "full_numbers",
27 "bJQueryUI": true,
28 "aoColumns": [
29 { "sName": "ID",
30 "bSearchable": false,
31 "bSortable": false,
32 "bVisible": false
33 },
34 { "sName": "COMPANY_NAME" },
35 { "sName": "ADDRESS" },
36 { "sName": "TOWN" }
37 ]
38 }).makeEditable({
39 "aoColumns": [
40 {
41 cssclass: "required"
42 },
43 null,//null for read-only columns
44 {
45 indicator: 'Saving...',
46 tooltip: 'Click to select town',
47 loadtext: 'loading...',
48 type: 'select',
49 onblur: 'submit',
50 data: '{"London":"London","Liverpool":"Liverpool","Portsmouth": "Portsmouth","Edinburgh":"Edinburgh", "Blackburn":"Blackburn","Kent":"Kent","Essex":"Essex","Oxon":"Oxon","Lothian":"Lothian", "West Sussex":"West Sussex","Lanarkshire":"Lanarkshire", "Birmingham":"Birmingham","East Sussex":"East Sussex","Surrey":"Surrey"}'
51 }
52 ]
53 });
54 });
55 </script>
56 </head>
57 <body id="dt_example">
58 <div id="container">
59 <div id="demo_jui">
60 <button id="btnAddNewRow" value="Ok">Add new row...</button>
61 <button id="btnDeleteRow" value="cancel">Delete selected row</button>
62 <table id="database-table-view" class="display">
63 <thead>
64 <tr>
65 <th>ID</th>
66 <th>Year</th>
67 <th>Name</th>
68 <th>Address</th>
69 </tr>
70 </thead>
71 <tbody>
72
73 </tbody>
74 </table>
75 </div>
76
77
78 <form id="formAddNewRow" action="#" title="Add new row">
79 <input type="hidden" id="id" name="id" value="-1" rel="0" />
80 <label for="name">Name</label><input type="text" name="name" id="name" class="required" rel="1" />
81 <br />
82 <label for="name">Address</label><input type="text" name="address" id="address" rel="2" />
83 <br />
84 <label for="name">Postcode</label><input type="text" name="postcode" id="postcode"/>
85 <br />
86 <label for="name">Town</label><input type="text" name="town" id="town" rel="3"/>
87 <br />
88 <label for="name">Country</label><select name="country" id="country">
89 <option value="1">Serbia</option>
90 <option value="2">France</option>
91 <option value="3">Italy</option>
92 </select>
93 <br />
94 </form>
95
96 </div>
97 </body>
98</html>
99
Note: See TracBrowser for help on using the repository browser.