├── AddData.php
├── DeleteData.php
├── UpdateData.php
├── UpdateBrowser.php
├── UpdatePlatforms.php
├── DeleteDataError.php
├── UpdateDataError.php
├── CustomUpdateEngineVersion.php
├── media
├── images
│ ├── favicon.ico
│ ├── sort_asc.png
│ ├── DataTables.jpg
│ ├── sort_both.png
│ ├── sort_desc.png
│ ├── unchecked.gif
│ ├── back_disabled.jpg
│ ├── back_disabled.png
│ ├── back_enabled.jpg
│ ├── back_enabled.png
│ ├── forward_disabled.jpg
│ ├── forward_disabled.png
│ ├── forward_enabled.jpg
│ ├── forward_enabled.png
│ ├── sort_asc_disabled.png
│ └── sort_desc_disabled.png
├── jAlert
│ ├── images
│ │ ├── info.gif
│ │ ├── title.gif
│ │ └── important.gif
│ ├── jquery.alerts.css
│ └── jquery.alerts.js
├── css
│ ├── themes
│ │ ├── base
│ │ │ └── images
│ │ │ │ ├── ui-icons_222222_256x240.png
│ │ │ │ ├── ui-icons_2e83ff_256x240.png
│ │ │ │ ├── ui-icons_454545_256x240.png
│ │ │ │ ├── ui-icons_888888_256x240.png
│ │ │ │ ├── ui-icons_cd0a0a_256x240.png
│ │ │ │ ├── ui-bg_flat_0_aaaaaa_40x100.png
│ │ │ │ ├── ui-bg_flat_75_ffffff_40x100.png
│ │ │ │ ├── ui-bg_glass_55_fbf9ee_1x400.png
│ │ │ │ ├── ui-bg_glass_65_ffffff_1x400.png
│ │ │ │ ├── ui-bg_glass_75_dadada_1x400.png
│ │ │ │ ├── ui-bg_glass_75_e6e6e6_1x400.png
│ │ │ │ ├── ui-bg_glass_95_fef1ec_1x400.png
│ │ │ │ └── ui-bg_highlight-soft_75_cccccc_1x100.png
│ │ └── smoothness
│ │ │ └── images
│ │ │ ├── ui-icons_222222_256x240.png
│ │ │ ├── ui-icons_2e83ff_256x240.png
│ │ │ ├── ui-icons_454545_256x240.png
│ │ │ ├── ui-icons_888888_256x240.png
│ │ │ ├── ui-icons_cd0a0a_256x240.png
│ │ │ ├── ui-bg_flat_0_aaaaaa_40x100.png
│ │ │ ├── ui-bg_flat_75_ffffff_40x100.png
│ │ │ ├── ui-bg_glass_55_fbf9ee_1x400.png
│ │ │ ├── ui-bg_glass_65_ffffff_1x400.png
│ │ │ ├── ui-bg_glass_75_dadada_1x400.png
│ │ │ ├── ui-bg_glass_75_e6e6e6_1x400.png
│ │ │ ├── ui-bg_glass_95_fef1ec_1x400.png
│ │ │ └── ui-bg_highlight-soft_75_cccccc_1x100.png
│ ├── demo_validation.css
│ ├── demo_page.css
│ ├── demo_table.css
│ └── demo_table_jui.css
└── js
│ ├── jquery.jeditable.ajaxUpload.js
│ ├── jeditable.checkbox.js
│ ├── jquery.jeditable.checkbox.js
│ ├── jquery.jeditable.datepicker.js
│ ├── jquery.jeditable.time.js
│ └── jquery.dataTables.rowGrouping.js
├── UpdateTimeCellError.php
├── EngineVersionList.php
├── ajax_source2.js
├── ajax_source_2.js
├── server_processing.js
├── ajax_object_source.js
├── ajax_source.js
├── issue91.html
├── ajax-inlinebuttons.html
├── ajax-inlinedeletebuttons.html
├── issue20.html
├── ajax.html
├── ajax_object_source.html
├── ajax_mDataProp.html
├── issue19.html
├── checkbox.html
├── ajax_mDataProp.js
├── server_side_processing.html
├── table-actions.html
├── ajax-popupedit.html
└── custom-edit-events.html
/AddData.php:
--------------------------------------------------------------------------------
1 | 123243
--------------------------------------------------------------------------------
/DeleteData.php:
--------------------------------------------------------------------------------
1 | ok
--------------------------------------------------------------------------------
/UpdateData.php:
--------------------------------------------------------------------------------
1 | ok
--------------------------------------------------------------------------------
/UpdateBrowser.php:
--------------------------------------------------------------------------------
1 | IE9
--------------------------------------------------------------------------------
/UpdatePlatforms.php:
--------------------------------------------------------------------------------
1 | Win XP
--------------------------------------------------------------------------------
/DeleteDataError.php:
--------------------------------------------------------------------------------
1 | This record cannot be deleted (message returned from the server)
--------------------------------------------------------------------------------
/UpdateDataError.php:
--------------------------------------------------------------------------------
1 | This record cannot be updated (message returned from the server)
--------------------------------------------------------------------------------
/CustomUpdateEngineVersion.php:
--------------------------------------------------------------------------------
1 | This is an error message returned from the server page CustomUpdateEngineVersion.php
--------------------------------------------------------------------------------
/media/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/favicon.ico
--------------------------------------------------------------------------------
/media/images/sort_asc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/sort_asc.png
--------------------------------------------------------------------------------
/media/images/DataTables.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/DataTables.jpg
--------------------------------------------------------------------------------
/media/images/sort_both.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/sort_both.png
--------------------------------------------------------------------------------
/media/images/sort_desc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/sort_desc.png
--------------------------------------------------------------------------------
/media/images/unchecked.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/unchecked.gif
--------------------------------------------------------------------------------
/media/jAlert/images/info.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/jAlert/images/info.gif
--------------------------------------------------------------------------------
/media/images/back_disabled.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/back_disabled.jpg
--------------------------------------------------------------------------------
/media/images/back_disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/back_disabled.png
--------------------------------------------------------------------------------
/media/images/back_enabled.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/back_enabled.jpg
--------------------------------------------------------------------------------
/media/images/back_enabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/back_enabled.png
--------------------------------------------------------------------------------
/media/jAlert/images/title.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/jAlert/images/title.gif
--------------------------------------------------------------------------------
/media/images/forward_disabled.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/forward_disabled.jpg
--------------------------------------------------------------------------------
/media/images/forward_disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/forward_disabled.png
--------------------------------------------------------------------------------
/media/images/forward_enabled.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/forward_enabled.jpg
--------------------------------------------------------------------------------
/media/images/forward_enabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/forward_enabled.png
--------------------------------------------------------------------------------
/media/jAlert/images/important.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/jAlert/images/important.gif
--------------------------------------------------------------------------------
/media/images/sort_asc_disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/sort_asc_disabled.png
--------------------------------------------------------------------------------
/media/images/sort_desc_disabled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/images/sort_desc_disabled.png
--------------------------------------------------------------------------------
/UpdateTimeCellError.php:
--------------------------------------------------------------------------------
1 | ERROR On the Google demo site, server-side page for updating time always return this error mesage. Error message should be shown in the popup window.
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-icons_222222_256x240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-icons_222222_256x240.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-icons_2e83ff_256x240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-icons_2e83ff_256x240.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-icons_454545_256x240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-icons_454545_256x240.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-icons_888888_256x240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-icons_888888_256x240.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-icons_cd0a0a_256x240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-icons_cd0a0a_256x240.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-bg_flat_75_ffffff_40x100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-bg_flat_75_ffffff_40x100.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-bg_glass_65_ffffff_1x400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-bg_glass_65_ffffff_1x400.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-bg_glass_75_dadada_1x400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-bg_glass_75_dadada_1x400.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-icons_222222_256x240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-icons_222222_256x240.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-icons_2e83ff_256x240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-icons_2e83ff_256x240.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-icons_454545_256x240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-icons_454545_256x240.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-icons_888888_256x240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-icons_888888_256x240.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-icons_cd0a0a_256x240.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-icons_cd0a0a_256x240.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-bg_flat_0_aaaaaa_40x100.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-bg_flat_75_ffffff_40x100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-bg_flat_75_ffffff_40x100.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-bg_glass_65_ffffff_1x400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-bg_glass_65_ffffff_1x400.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-bg_glass_75_dadada_1x400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-bg_glass_75_dadada_1x400.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png
--------------------------------------------------------------------------------
/media/css/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png
--------------------------------------------------------------------------------
/media/css/themes/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jphustman/jquery-datatables-editable/HEAD/media/css/themes/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png
--------------------------------------------------------------------------------
/EngineVersionList.php:
--------------------------------------------------------------------------------
1 | {
2 | '1.1':'1.1',
3 | '1.2':'1.2',
4 | '1.3':'1.3',
5 | '1.4':'1.4',
6 | '1.5':'1.5',
7 | '1.6':'1.6',
8 | '1.7':'1.7',
9 | '1.8':'1.8',
10 | '1.9':'1.9',
11 | '1.10':'1.10',
12 | '1.11':'1.11',
13 | '1.12':'1.12'
14 | }
--------------------------------------------------------------------------------
/media/css/demo_validation.css:
--------------------------------------------------------------------------------
1 | /* Validation styles ------ */
2 | label.error {
3 | background: url("../images/unchecked.gif") no-repeat scroll 0 0 transparent;
4 | color: #EA5200;
5 | font-weight: bold;
6 | padding-bottom: 2px;
7 | padding-left: 16px;
8 | }
9 |
10 |
--------------------------------------------------------------------------------
/ajax_source2.js:
--------------------------------------------------------------------------------
1 | { "aaData": [
2 | ["1","Internet Explorer 4.0","Win 95+","4","X","1"],
3 | ["2","Internet Explorer 5.0","Win 95+","5","C","2"],
4 | ["3","Internet Explorer 5.5","Win 95+","5.5","A","3"],
5 | ["4","Internet Explorer 6","Win 98+","6","A","4"],
6 | ["5","Internet Explorer 7","Win XP SP2+","7","A","5"],
7 | ["6","AOL browser (AOL desktop)","Win XP","6","A","6"]
8 |
9 | ] }
--------------------------------------------------------------------------------
/ajax_source_2.js:
--------------------------------------------------------------------------------
1 | { "aaData": [
2 | ["Trident","Internet Explorer 4.0","Win 95+"],
3 | ["Trident","Internet Explorer 5.0","Win 95+"],
4 | ["Trident","Internet Explorer 5.5","Win 95+"],
5 | ["Trident","Internet Explorer 6","Win 98+"],
6 | ["Trident","Internet Explorer 7","Win XP SP2+"],
7 | ["Misc","Links","Text only"],
8 | ["Misc","Lynx","Text only"],
9 | ["Misc","IE Mobile","Windows Mobile 6"],
10 | ["Misc","PSP browser","PSP"],
11 | ["Other browsers","All others","-"]
12 | ] }
--------------------------------------------------------------------------------
/server_processing.js:
--------------------------------------------------------------------------------
1 | {"sEcho": 1, "iTotalRecords": 57, "iTotalDisplayRecords": 57, "aaData": [ ["Gecko","Firefox 1.0","Win 98+ / OSX.2+","1.7","A"],["Gecko","Firefox 1.5","Win 98+ / OSX.2+","1.8","A"],["Gecko","Firefox 2.0","Win 98+ / OSX.2+","1.8","A"],["Gecko","Firefox 3.0","Win 2k+ / OSX.3+","1.9","A"],["Gecko","Camino 1.0","OSX.2+","1.8","A"],["Gecko","Camino 1.5","OSX.3+","1.8","A"],["Gecko","Netscape 7.2","Win 95+ / Mac OS 8.6-9.2","1.7","A"],["Gecko","Netscape Browser 8","Win 98SE+","1.7","A"],["Gecko","Netscape Navigator 9","Win 98+ / OSX.2+","1.8","A"],["Gecko","Mozilla 1.0","Win 95+ / OSX.1+","1","A"]] }
--------------------------------------------------------------------------------
/media/jAlert/jquery.alerts.css:
--------------------------------------------------------------------------------
1 | #popup_container {
2 | font-family: Arial, sans-serif;
3 | font-size: 12px;
4 | min-width: 300px; /* Dialog will be no smaller than this */
5 | max-width: 600px; /* Dialog will wrap after this width */
6 | background: #FFF;
7 | border: solid 5px #999;
8 | color: #000;
9 | -moz-border-radius: 5px;
10 | -webkit-border-radius: 5px;
11 | border-radius: 5px;
12 | }
13 |
14 | #popup_title {
15 | font-size: 14px;
16 | font-weight: bold;
17 | text-align: center;
18 | line-height: 1.75em;
19 | color: #666;
20 | background: #CCC url(images/title.gif) top repeat-x;
21 | border: solid 1px #FFF;
22 | border-bottom: solid 1px #999;
23 | cursor: default;
24 | padding: 0em;
25 | margin: 0em;
26 | }
27 |
28 | #popup_content {
29 | background: 16px 16px no-repeat url(images/info.gif);
30 | padding: 1em 1.75em;
31 | margin: 0em;
32 | }
33 |
34 | #popup_content.alert {
35 | background-image: url(images/info.gif);
36 | }
37 |
38 | #popup_content.confirm {
39 | background-image: url(images/important.gif);
40 | }
41 |
42 | #popup_content.prompt {
43 | background-image: url(images/help.gif);
44 | }
45 |
46 | #popup_message {
47 | padding-left: 48px;
48 | }
49 |
50 | #popup_panel {
51 | text-align: center;
52 | margin: 1em 0em 0em 1em;
53 | }
54 |
55 | #popup_prompt {
56 | margin: .5em 0em;
57 | }
58 | h1#popup_title{ margin-top:0em;}
--------------------------------------------------------------------------------
/media/js/jquery.jeditable.ajaxUpload.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Ajaxupload for Jeditable
3 | *
4 | * Copyright (c) 2008-2009 Mika Tuupola
5 | *
6 | * Licensed under the MIT license:
7 | * http://www.opensource.org/licenses/mit-license.php
8 | *
9 | * Depends on Ajax fileupload jQuery plugin by PHPLetter guys:
10 | * http://www.phpletter.com/Our-Projects/AjaxFileUpload/
11 | *
12 | * Project home:
13 | * http://www.appelsiini.net/projects/jeditable
14 | *
15 | * Revision: $Id$
16 | *
17 | */
18 |
19 | $.editable.addInputType('ajaxupload', {
20 | /* create input element */
21 | element : function(settings) {
22 | settings.onblur = 'ignore';
23 | var input = $(', it's content will be replaced by a checkbox.
16 | * If the text within the paragraph is 'Yes', the checkbox will be checked
17 | * by default, otherwise it will be unchecked.
18 | *
19 | * trueValue is submitted when the checkbox is checked and falseValue otherwise.
20 | *
21 | * Have fun!
22 | *
23 | * Peter Bücker (spam.naag@gmx.net)
24 | * http://www.pastie.org/893364
25 | */
26 |
27 | $.editable.addInputType('checkbox', {
28 | element: function(settings, original) {
29 | $(this).append('
, it's content will be replaced by a checkbox.
16 | * If the text within the paragraph is 'Yes', the checkbox will be checked
17 | * by default, otherwise it will be unchecked.
18 | *
19 | * trueValue is submitted when the checkbox is checked and falseValue otherwise.
20 | *
21 | * Have fun!
22 | *
23 | * Peter Bücker (spam.naag@gmx.net)
24 | * http://www.pastie.org/893364
25 | */
26 |
27 | $.editable.addInputType('checkbox', {
28 | element: function(settings, original) {
29 | $(this).append('1 "],
45 | ["45","Konqureror 3.1","KDE 3.1","3.1","C"],
46 | ["46","Konqureror 3.3","KDE 3.3","3.3","A"],
47 | ["47","Konqureror 3.5","KDE 3.5","3.5","A"],
48 | ["48","Internet Explorer 4.5","Mac OS 8-9","-","X"],
49 | ["49","Internet Explorer 5.1","Mac OS 7.6-9","1","C"],
50 | ["50","Internet Explorer 5.2","Mac OS 8-X","1","C"],
51 | ["51","NetFront 3.1","Embedded devices","-","C"],
52 | ["52","NetFront 3.4","Embedded devices","-","A"],
53 | ["53","Dillo 0.8","Embedded devices","-","X"],
54 | ["54","Links","Text only","-","X"],
55 | ["55","Lynx","Text only","-","X"],
56 | ["56","IE Mobile","Windows Mobile 6","-","C"],
57 | ["57","PSP browser","PSP","-","C"],
58 | ["58","All others","-","-","U"]
59 | ] }
--------------------------------------------------------------------------------
/issue91.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Using DataTable with Editable plugin - Getting the data source via ajax request
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
56 |
57 |
58 |
59 |
60 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | Editable DataTable example for issue 19
83 |
84 |
85 |
Preamble
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
Live example
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 | Rendering engine
111 | Browser
112 | Platform(s)
113 | Engine version
114 | CSS grade
115 |
116 |
117 |
118 |
119 |
120 | Rendering engine
121 | Browser
122 | Platform(s)
123 | Engine version
124 | CSS grade
125 |
126 |
127 |
128 |
129 |
130 | Trident
131 |
132 | Internet
133 | Explorer 4.0
134 | Win 95+
135 | 4
136 | X
137 |
138 |
139 | WebKit
140 |
141 | Internet
142 | Explorer 5.0
143 | Win 95+
144 | 5
145 | C
146 |
147 |
148 | Gecko
149 |
150 | Internet
151 | Explorer 5.5
152 | Win 95+
153 | 5.5
154 | A
155 |
156 |
157 | Tasman
158 |
159 | Internet
160 | Explorer 6
161 | Win 98+
162 | 6
163 | A
164 |
165 |
166 | Trident
167 |
168 | Internet Explorer 7
169 | Win XP SP2+
170 | 7
171 | A
172 |
173 |
174 | Trident
175 |
176 | AOL browser (AOL desktop)
177 | Win XP
178 | 6
179 | A
180 |
181 |
182 |
183 |
184 |
185 |
186 |
191 |
192 |
193 |
194 |
195 |
196 |
--------------------------------------------------------------------------------
/ajax-inlinebuttons.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Getting the data source via ajax request
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
52 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
Home
73 |
Wiki
74 |
75 |
76 | Editable DataTable example - Injecting id of the new record into the table
77 |
78 |
79 |
Preamble
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
Live example
88 |
89 |
90 |
91 |
113 |
114 |
115 |
116 |
117 |
118 |
119 | ID
120 | Browser
121 | Platform(s)
122 | Engine version
123 | CSS grade
124 | Edit
125 |
126 |
127 |
128 |
129 |
130 | ID
131 | Browser
132 | Platform(s)
133 | Engine version
134 | CSS grade
135 | Edit
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
Other examples
150 |
164 |
165 |
170 |
171 |
172 |
173 |
174 |
175 |
--------------------------------------------------------------------------------
/ajax-inlinedeletebuttons.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Inline delete with ajax source
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
52 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
Home
73 |
Wiki
74 |
75 |
76 | Editable DataTable example - Injecting id of the new record into the table
77 |
78 |
79 |
Preamble
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
Live example
88 |
89 |
90 |
91 |
113 |
114 |
115 |
116 |
117 |
118 |
119 | ID
120 | Browser
121 | Platform(s)
122 | Engine version
123 | CSS grade
124 | Edit
125 |
126 |
127 |
128 |
129 |
130 | ID
131 | Browser
132 | Platform(s)
133 | Engine version
134 | CSS grade
135 | Edit
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
Other examples
150 |
164 |
165 |
170 |
171 |
172 |
173 |
174 |
175 |
--------------------------------------------------------------------------------
/issue20.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - xample for issues 20
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
65 |
66 |
67 |
68 |
69 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 | Editable DataTable example for
issue 20
92 |
93 |
94 |
Preamble
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
Live example
103 |
104 |
105 |
106 |
129 |
130 |
131 |
132 |
133 |
134 |
Delete Selected Browser Add Browser
135 |
136 |
137 |
138 |
139 | ID
140 | Browser
141 | Platform(s)
142 | Engine version
143 | CSS grade
144 |
145 |
146 |
147 |
148 |
149 | ID
150 | Browser
151 | Platform(s)
152 | Engine version
153 | CSS grade
154 |
155 |
156 |
157 |
158 |
159 | 1
160 |
161 | Internet
162 | Explorer 4.0
163 | Win 95+
164 | 4
165 | X
166 |
167 |
168 | 2
169 |
170 | Internet
171 | Explorer 5.0
172 | Win 95+
173 | 5
174 | C
175 |
176 |
177 | 3
178 |
179 | Internet
180 | Explorer 5.5
181 | Win 95+
182 | 5.5
183 | A
184 |
185 |
186 | 4
187 |
188 | Internet
189 | Explorer 7
190 | Win 98+
191 | 6
192 | A
193 |
194 |
195 | 5
196 |
197 | Internet Explorer 8
198 | Win XP SP2+
199 | 7
200 | A
201 |
202 |
203 | 9
204 |
205 | AOL browser (AOL desktop)
206 | Win XP
207 | 6
208 | A
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
Other examples
217 |
227 |
228 |
233 |
234 |
235 |
236 |
237 |
238 |
--------------------------------------------------------------------------------
/ajax.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Getting the data source via ajax request
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
40 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
Home
61 |
Wiki
62 |
63 |
64 | Editable DataTable example - ajax data source
65 |
66 |
67 |
Preamble
68 |
69 | DataTable Editable plugin works with DataTables that dinamically read cells that should be displayed via ajax call. In this example, cells are not placed in the source
70 | of the page - they is loaded from the server-side via JSON request. Once cells are loaded from the source via AJAX call, they are processed on the client side.
71 |
72 |
73 |
74 |
75 |
76 |
Live example
77 |
78 |
79 |
80 |
101 |
102 |
103 |
104 |
105 |
106 |
107 | ID
108 | Browser
109 | Platform(s)
110 | Engine version
111 | CSS grade
112 |
113 |
114 |
115 |
116 |
117 | ID
118 | Browser
119 | Platform(s)
120 | Engine version
121 | CSS grade
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
Initialization code
134 |
In the initialization code you will need to pass URL of the data source that contains data that will be loaded. Processing option is placed just to show "Processing" dialog while the action is performing.
135 | Note that first column will be considered as an id and value of the first cell will added as an id of the row. You can hide this column if you want.
136 |
137 | $(document).ready( function () {
138 | $('#example').dataTable({
139 | "bProcessing": true,
140 | "sAjaxSource": "ajax_source.js"
141 | }
142 | ).makeEditable();
143 | } );
144 |
145 |
Additional HTML code
146 |
Html code is same as in the other cases, however you will need to add one change into the "Add" form. To inject id of the new record you will to put hidden field with value DATAROWID that will be mapped to the ID colum (rel=0). Plugin will take the id returned from server and put it as an id attribute of the row.
147 |
148 |
149 |
150 |
151 | <!-- Custom form for adding new records with included place holder for id column-->
152 | <form id="formAddNewRow" action="#" title="Add new record">
153 | ...
154 | <input type="hidden" name="id" id="id" rel="0" value="DATAROWID" rel="0" />
155 | ...
156 | </form>
157 |
158 |
159 |
Other examples
160 |
174 |
175 |
180 |
181 |
182 |
183 |
184 |
185 |
--------------------------------------------------------------------------------
/ajax_object_source.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Getting the data source via ajax request
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
40 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
Home
61 |
Wiki
62 |
63 |
64 | Editable DataTable example - ajax data source
65 |
66 |
67 |
Preamble
68 |
69 | DataTable Editable plugin works with DataTables that dinamically read cells that should be displayed via ajax call. In this example, cells are not placed in the source
70 | of the page - they is loaded from the server-side via JSON request. Once cells are loaded from the source via AJAX call, they are processed on the client side.
71 |
72 |
73 |
74 |
75 |
76 |
Live example
77 |
78 |
79 |
80 |
104 |
105 |
106 |
107 |
108 |
109 |
110 | Engine
111 | Browser
112 | Platform(s)
113 | Engine version
114 | CSS grade
115 |
116 |
117 |
118 |
119 |
120 | Engine
121 | Browser
122 | Platform(s)
123 | Engine version
124 | CSS grade
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
Initialization code
137 |
In the initialization code you will need to pass URL of the data source that contains data that will be loaded. Processing option is placed just to show "Processing" dialog while the action is performing.
138 | Note that first column will be considered as an id and value of the first cell will added as an id of the row. You can hide this column if you want.
139 |
140 | $(document).ready( function () {
141 | $('#example').dataTable({
142 | "bProcessing": true,
143 | "sAjaxSource": "ajax_source.js"
144 | }
145 | ).makeEditable();
146 | } );
147 |
148 |
Additional HTML code
149 |
Html code is same as in the other cases, however you will need to add one change into the "Add" form. To inject id of the new record you will to put hidden field with value DATAROWID that will be mapped to the ID colum (rel=0). Plugin will take the id returned from server and put it as an id attribute of the row.
150 |
151 |
152 |
153 |
154 | <!-- Custom form for adding new records with included place holder for id column-->
155 | <form id="formAddNewRow" action="#" title="Add new record">
156 | ...
157 | <input type="hidden" name="id" id="id" rel="0" value="DATAROWID" rel="0" />
158 | ...
159 | </form>
160 |
161 |
162 |
Other examples
163 |
177 |
178 |
183 |
184 |
185 |
186 |
187 |
188 |
--------------------------------------------------------------------------------
/ajax_mDataProp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Getting the data source via ajax request
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
46 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
Home
67 |
Wiki
68 |
69 |
70 | Editable DataTable example - ajax data source
71 |
72 |
73 |
Preamble
74 |
75 | DataTable Editable plugin works with DataTables that dinamically read cells that should be displayed via ajax call. In this example, cells are not placed in the source
76 | of the page - they is loaded from the server-side via JSON request. Once cells are loaded from the source via AJAX call, they are processed on the client side.
77 |
78 |
79 |
80 |
81 |
82 |
Live example
83 |
84 |
85 |
86 |
110 |
111 |
112 |
113 |
114 |
115 |
116 | Engine
117 | Browser
118 | Platform(s)
119 | Engine version
120 | CSS grade
121 |
122 |
123 |
124 |
125 |
126 | Engine
127 | Browser
128 | Platform(s)
129 | Engine version
130 | CSS grade
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
Initialization code
143 |
In the initialization code you will need to pass URL of the data source that contains data that will be loaded. Processing option is placed just to show "Processing" dialog while the action is performing.
144 | Note that first column will be considered as an id and value of the first cell will added as an id of the row. You can hide this column if you want.
145 |
146 | $(document).ready( function () {
147 | $('#example').dataTable({
148 | "bProcessing": true,
149 | "sAjaxSource": "ajax_source.js"
150 | }
151 | ).makeEditable();
152 | } );
153 |
154 |
Additional HTML code
155 |
Html code is same as in the other cases, however you will need to add one change into the "Add" form. To inject id of the new record you will to put hidden field with value DATAROWID that will be mapped to the ID colum (rel=0). Plugin will take the id returned from server and put it as an id attribute of the row.
156 |
157 |
158 |
159 |
160 | <!-- Custom form for adding new records with included place holder for id column-->
161 | <form id="formAddNewRow" action="#" title="Add new record">
162 | ...
163 | <input type="hidden" name="id" id="id" rel="0" value="DATAROWID" rel="0" />
164 | ...
165 | </form>
166 |
167 |
168 |
Other examples
169 |
183 |
184 |
189 |
190 |
191 |
192 |
193 |
194 |
--------------------------------------------------------------------------------
/media/jAlert/jquery.alerts.js:
--------------------------------------------------------------------------------
1 | // jQuery Alert Dialogs Plugin
2 | //
3 | // Version 1.1
4 | //
5 | // Cory S.N. LaViska
6 | // A Beautiful Site (http://abeautifulsite.net/)
7 | // 14 May 2009
8 | //
9 | // Visit http://abeautifulsite.net/notebook/87 for more information
10 | //
11 | // Usage:
12 | // jAlert( message, [title, callback] )
13 | // jConfirm( message, [title, callback] )
14 | // jPrompt( message, [value, title, callback] )
15 | //
16 | // History:
17 | //
18 | // 1.00 - Released (29 December 2008)
19 | //
20 | // 1.01 - Fixed bug where unbinding would destroy all resize events
21 | //
22 | // License:
23 | //
24 | // This plugin is dual-licensed under the GNU General Public License and the MIT License and
25 | // is copyright 2008 A Beautiful Site, LLC.
26 | //
27 | (function($) {
28 |
29 | $.alerts = {
30 |
31 | // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time
32 |
33 | verticalOffset: -75, // vertical offset of the dialog from center screen, in pixels
34 | horizontalOffset: 0, // horizontal offset of the dialog from center screen, in pixels/
35 | repositionOnResize: true, // re-centers the dialog on window resize
36 | overlayOpacity: .01, // transparency level of overlay
37 | overlayColor: '#FFF', // base color of overlay
38 | draggable: true, // make the dialogs draggable (requires UI Draggables plugin)
39 | okButton: ' OK ', // text for the OK button
40 | cancelButton: ' Cancel ', // text for the Cancel button
41 | dialogClass: null, // if specified, this class will be applied to all dialogs
42 |
43 | // Public methods
44 |
45 | alert: function(message, title, callback) {
46 | if( title == null ) title = 'Alert';
47 | $.alerts._show(title, message, null, 'alert', function(result) {
48 | if( callback ) callback(result);
49 | });
50 | },
51 |
52 | confirm: function(message, title, callback) {
53 | if( title == null ) title = 'Confirm';
54 | $.alerts._show(title, message, null, 'confirm', function(result) {
55 | if( callback ) callback(result);
56 | });
57 | },
58 |
59 | prompt: function(message, value, title, callback) {
60 | if( title == null ) title = 'Prompt';
61 | $.alerts._show(title, message, value, 'prompt', function(result) {
62 | if( callback ) callback(result);
63 | });
64 | },
65 |
66 | // Private methods
67 |
68 | _show: function(title, msg, value, type, callback) {
69 |
70 | $.alerts._hide();
71 | $.alerts._overlay('show');
72 |
73 | $("BODY").append(
74 | '');
80 |
81 | if( $.alerts.dialogClass ) $("#popup_container").addClass($.alerts.dialogClass);
82 |
83 | // IE6 Fix
84 | var pos = ($.browser.msie && parseInt($.browser.version) <= 6 ) ? 'absolute' : 'fixed';
85 |
86 | $("#popup_container").css({
87 | position: pos,
88 | zIndex: 99999,
89 | padding: 0,
90 | margin: 0
91 | });
92 |
93 | $("#popup_title").text(title);
94 | $("#popup_content").addClass(type);
95 | $("#popup_message").text(msg);
96 | $("#popup_message").html( $("#popup_message").text().replace(/\n/g, '
') );
97 |
98 | $("#popup_container").css({
99 | minWidth: $("#popup_container").outerWidth(),
100 | maxWidth: $("#popup_container").outerWidth()
101 | });
102 |
103 | $.alerts._reposition();
104 | $.alerts._maintainPosition(true);
105 |
106 | switch( type ) {
107 | case 'alert':
108 | $("#popup_message").after('');
109 | $("#popup_ok").click( function() {
110 | $.alerts._hide();
111 | callback(true);
112 | });
113 | $("#popup_ok").focus().keypress( function(e) {
114 | if( e.keyCode == 13 || e.keyCode == 27 ) $("#popup_ok").trigger('click');
115 | });
116 | break;
117 | case 'confirm':
118 | $("#popup_message").after('');
119 | $("#popup_ok").click( function() {
120 | $.alerts._hide();
121 | if( callback ) callback(true);
122 | });
123 | $("#popup_cancel").click( function() {
124 | $.alerts._hide();
125 | if( callback ) callback(false);
126 | });
127 | $("#popup_ok").focus();
128 | $("#popup_ok, #popup_cancel").keypress( function(e) {
129 | if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
130 | if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
131 | });
132 | break;
133 | case 'prompt':
134 | $("#popup_message").append('
').after('');
135 | $("#popup_prompt").width( $("#popup_message").width() );
136 | $("#popup_ok").click( function() {
137 | var val = $("#popup_prompt").val();
138 | $.alerts._hide();
139 | if( callback ) callback( val );
140 | });
141 | $("#popup_cancel").click( function() {
142 | $.alerts._hide();
143 | if( callback ) callback( null );
144 | });
145 | $("#popup_prompt, #popup_ok, #popup_cancel").keypress( function(e) {
146 | if( e.keyCode == 13 ) $("#popup_ok").trigger('click');
147 | if( e.keyCode == 27 ) $("#popup_cancel").trigger('click');
148 | });
149 | if( value ) $("#popup_prompt").val(value);
150 | $("#popup_prompt").focus().select();
151 | break;
152 | }
153 |
154 | // Make draggable
155 | if( $.alerts.draggable ) {
156 | try {
157 | $("#popup_container").draggable({ handle: $("#popup_title") });
158 | $("#popup_title").css({ cursor: 'move' });
159 | } catch(e) { /* requires jQuery UI draggables */ }
160 | }
161 | },
162 |
163 | _hide: function() {
164 | $("#popup_container").remove();
165 | $.alerts._overlay('hide');
166 | $.alerts._maintainPosition(false);
167 | },
168 |
169 | _overlay: function(status) {
170 | switch( status ) {
171 | case 'show':
172 | $.alerts._overlay('hide');
173 | $("BODY").append('');
174 | $("#popup_overlay").css({
175 | position: 'absolute',
176 | zIndex: 99998,
177 | top: '0px',
178 | left: '0px',
179 | width: '100%',
180 | height: $(document).height(),
181 | background: $.alerts.overlayColor,
182 | opacity: $.alerts.overlayOpacity
183 | });
184 | break;
185 | case 'hide':
186 | $("#popup_overlay").remove();
187 | break;
188 | }
189 | },
190 |
191 | _reposition: function() {
192 | var top = (($(window).height() / 2) - ($("#popup_container").outerHeight() / 2)) + $.alerts.verticalOffset;
193 | var left = (($(window).width() / 2) - ($("#popup_container").outerWidth() / 2)) + $.alerts.horizontalOffset;
194 | if( top < 0 ) top = 0;
195 | if( left < 0 ) left = 0;
196 |
197 | // IE6 fix
198 | if( $.browser.msie && parseInt($.browser.version) <= 6 ) top = top + $(window).scrollTop();
199 |
200 | $("#popup_container").css({
201 | top: top + 'px',
202 | left: left + 'px'
203 | });
204 | $("#popup_overlay").height( $(document).height() );
205 | },
206 |
207 | _maintainPosition: function(status) {
208 | if( $.alerts.repositionOnResize ) {
209 | switch(status) {
210 | case true:
211 | $(window).bind('resize', $.alerts._reposition);
212 | break;
213 | case false:
214 | $(window).unbind('resize', $.alerts._reposition);
215 | break;
216 | }
217 | }
218 | }
219 |
220 | }
221 |
222 | // Shortuct functions
223 | jAlert = function(message, title, callback) {
224 | $.alerts.alert(message, title, callback);
225 | }
226 |
227 | jConfirm = function(message, title, callback) {
228 | $.alerts.confirm(message, title, callback);
229 | };
230 |
231 | jPrompt = function(message, value, title, callback) {
232 | $.alerts.prompt(message, value, title, callback);
233 | };
234 |
235 | })(jQuery);
--------------------------------------------------------------------------------
/issue19.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Getting the data source via ajax request
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
85 |
86 |
87 |
88 |
89 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 | Editable DataTable example for issue 19
112 |
113 |
114 |
Preamble
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
Live example
123 |
124 |
125 |
126 |
149 |
150 |
151 |
152 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
Delete Selected Browser Without CSS Grade Add New Browser Without CSS Grade
177 |
178 |
179 |
180 |
181 | Rendering engine
182 | Browser
183 | Platform(s)
184 | Engine version
185 |
186 |
187 |
188 |
189 | Trident
190 |
191 | Internet
192 | Explorer 4.0
193 | Win 95+
194 | 4
195 |
196 |
197 |
198 | Trident
199 |
200 | Internet
201 | Explorer 5.0
202 | Win 95+
203 | 4
204 |
205 |
206 |
207 | Trident
208 |
209 | Internet
210 | Explorer 5.5
211 | Win 95+
212 | 5.5
213 |
214 |
215 |
216 | Trident
217 |
218 | Internet
219 | Explorer 6
220 | Win 98+
221 | 6
222 |
223 |
224 |
225 | Trident
226 |
227 | Internet Explorer 7
228 | Win XP SP2+
229 | 7
230 |
231 |
232 |
233 | Trident
234 |
235 | AOL browser (AOL desktop)
236 | Win XP
237 | 6
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
Delete Selected Browser With CSS Grade Add Browser With CSS Grade
247 |
248 |
249 |
250 |
251 | Rendering engine
252 | Browser
253 | Platform(s)
254 | Engine version
255 | CSS grade
256 |
257 |
258 |
259 |
260 |
261 | Rendering engine
262 | Browser
263 | Platform(s)
264 | Engine version
265 | CSS grade
266 |
267 |
268 |
269 |
270 |
271 | Trident
272 |
273 | Internet
274 | Explorer 4.0
275 | Win 95+
276 | 4
277 | X
278 |
279 |
280 | Trident
281 |
282 | Internet
283 | Explorer 5.0
284 | Win 95+
285 | 5
286 | C
287 |
288 |
289 | Trident
290 |
291 | Internet
292 | Explorer 5.5
293 | Win 95+
294 | 5.5
295 | A
296 |
297 |
298 | Trident
299 |
300 | Internet
301 | Explorer 6
302 | Win 98+
303 | 6
304 | A
305 |
306 |
307 | Trident
308 |
309 | Internet Explorer 7
310 | Win XP SP2+
311 | 7
312 | A
313 |
314 |
315 | Trident
316 |
317 | AOL browser (AOL desktop)
318 | Win XP
319 | 6
320 | A
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
Other examples
333 |
343 |
344 |
349 |
350 |
351 |
352 |
353 |
354 |
--------------------------------------------------------------------------------
/media/css/demo_table.css:
--------------------------------------------------------------------------------
1 | .dataTables_wrapper {
2 | clear: both;
3 | position: relative;
4 | }
5 | .dataTables_processing {
6 | background-color: white;
7 | border: 1px solid #DDDDDD;
8 | color: #999999;
9 | font-size: 14px;
10 | height: 30px;
11 | left: 50%;
12 | margin-left: -125px;
13 | margin-top: -15px;
14 | padding: 14px 0 2px;
15 | position: absolute;
16 | text-align: center;
17 | top: 50%;
18 | width: 250px;
19 | }
20 | .dataTables_length {
21 | float: left;
22 | width: 40%;
23 | }
24 | .dataTables_filter {
25 | float: right;
26 | text-align: right;
27 | width: 50%;
28 | }
29 | .dataTables_info {
30 | float: left;
31 | width: 60%;
32 | }
33 | .dataTables_paginate {
34 | float: right;
35 | text-align: right;
36 | }
37 | .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
38 | color: #111111 !important;
39 | cursor: pointer;
40 | float: left;
41 | height: 19px;
42 | }
43 | .paginate_disabled_previous:hover, .paginate_enabled_previous:hover, .paginate_disabled_next:hover, .paginate_enabled_next:hover {
44 | text-decoration: none !important;
45 | }
46 | .paginate_disabled_previous:active, .paginate_enabled_previous:active, .paginate_disabled_next:active, .paginate_enabled_next:active {
47 | outline: medium none;
48 | }
49 | .paginate_disabled_previous, .paginate_disabled_next {
50 | color: #666666 !important;
51 | }
52 | .paginate_disabled_previous, .paginate_enabled_previous {
53 | padding-left: 23px;
54 | }
55 | .paginate_disabled_next, .paginate_enabled_next {
56 | margin-left: 10px;
57 | padding-right: 23px;
58 | }
59 | .paginate_disabled_previous {
60 | background: url("../images/back_disabled.png") no-repeat scroll left top transparent;
61 | }
62 | .paginate_enabled_previous {
63 | background: url("../images/back_enabled.png") no-repeat scroll left top transparent;
64 | }
65 | .paginate_enabled_previous:hover {
66 | background: url("../images/back_enabled_hover.png") no-repeat scroll left top transparent;
67 | }
68 | .paginate_disabled_next {
69 | background: url("../images/forward_disabled.png") no-repeat scroll right top transparent;
70 | }
71 | .paginate_enabled_next {
72 | background: url("../images/forward_enabled.png") no-repeat scroll right top transparent;
73 | }
74 | .paginate_enabled_next:hover {
75 | background: url("../images/forward_enabled_hover.png") no-repeat scroll right top transparent;
76 | }
77 | table.display {
78 | clear: both;
79 | margin: 0 auto;
80 | width: 100%;
81 | }
82 | table.display thead th {
83 | border-bottom: 1px solid black;
84 | cursor: pointer;
85 | font-weight: bold;
86 | padding: 3px 18px 3px 10px;
87 | }
88 | table.display tfoot th {
89 | border-top: 1px solid black;
90 | font-weight: bold;
91 | padding: 3px 18px 3px 10px;
92 | }
93 | table.display tr.heading2 td {
94 | border-bottom: 1px solid #AAAAAA;
95 | }
96 | table.display td {
97 | padding: 3px 10px;
98 | }
99 | table.display td.center {
100 | text-align: center;
101 | }
102 | .sorting_asc {
103 | background: url("../images/sort_asc.png") no-repeat scroll right center transparent;
104 | }
105 | .sorting_desc {
106 | background: url("../images/sort_desc.png") no-repeat scroll right center transparent;
107 | }
108 | .sorting {
109 | background: url("../images/sort_both.png") no-repeat scroll right center transparent;
110 | }
111 | .sorting_asc_disabled {
112 | background: url("../images/sort_asc_disabled.png") no-repeat scroll right center transparent;
113 | }
114 | .sorting_desc_disabled {
115 | background: url("../images/sort_desc_disabled.png") no-repeat scroll right center transparent;
116 | }
117 | th:active {
118 | outline: medium none;
119 | }
120 | table.display tr.odd.gradeA {
121 | background-color: #DDFFDD;
122 | }
123 | table.display tr.even.gradeA {
124 | background-color: #EEFFEE;
125 | }
126 | table.display tr.odd.gradeC {
127 | background-color: #DDDDFF;
128 | }
129 | table.display tr.even.gradeC {
130 | background-color: #EEEEFF;
131 | }
132 | table.display tr.odd.gradeX {
133 | background-color: #FFDDDD;
134 | }
135 | table.display tr.even.gradeX {
136 | background-color: #FFEEEE;
137 | }
138 | table.display tr.odd.gradeU {
139 | background-color: #DDDDDD;
140 | }
141 | table.display tr.even.gradeU {
142 | background-color: #EEEEEE;
143 | }
144 | tr.odd {
145 | background-color: #E2E4FF;
146 | }
147 | tr.even {
148 | background-color: white;
149 | }
150 | .dataTables_scroll {
151 | clear: both;
152 | }
153 | .dataTables_scrollBody {
154 | }
155 | .top, .bottom {
156 | background-color: #F5F5F5;
157 | border: 1px solid #CCCCCC;
158 | padding: 15px;
159 | }
160 | .top .dataTables_info {
161 | float: none;
162 | }
163 | .clear {
164 | clear: both;
165 | }
166 | .dataTables_empty {
167 | text-align: center;
168 | }
169 | tfoot input {
170 | color: #444444;
171 | margin: 0.5em 0;
172 | width: 100%;
173 | }
174 | tfoot input.search_init {
175 | color: #999999;
176 | }
177 | td.group {
178 | background-color: #D1CFD0;
179 | border-bottom: 2px solid #A19B9E;
180 | border-top: 2px solid #A19B9E;
181 | }
182 | td.details {
183 | background-color: #D1CFD0;
184 | border: 2px solid #A19B9E;
185 | }
186 | .example_alt_pagination div.dataTables_info {
187 | width: 40%;
188 | }
189 | .paging_full_numbers {
190 | height: 22px;
191 | line-height: 22px;
192 | width: 400px;
193 | }
194 | .paging_full_numbers a:active {
195 | outline: medium none;
196 | }
197 | .paging_full_numbers a:hover {
198 | text-decoration: none;
199 | }
200 | .paging_full_numbers a.paginate_button, .paging_full_numbers a.paginate_active {
201 | border: 1px solid #AAAAAA;
202 | border-radius: 5px 5px 5px 5px;
203 | color: #333333 !important;
204 | cursor: pointer;
205 | margin: 0 3px;
206 | padding: 2px 5px;
207 | }
208 | .paging_full_numbers a.paginate_button {
209 | background-color: #DDDDDD;
210 | }
211 | .paging_full_numbers a.paginate_button:hover {
212 | background-color: #CCCCCC;
213 | text-decoration: none !important;
214 | }
215 | .paging_full_numbers a.paginate_active {
216 | background-color: #99B3FF;
217 | }
218 | table.display tr.even.row_selected td {
219 | background-color: #B0BED9;
220 | }
221 | table.display tr.odd.row_selected td {
222 | background-color: #9FAFD1;
223 | }
224 | tr.odd td.sorting_1 {
225 | background-color: #D3D6FF;
226 | }
227 | tr.odd td.sorting_2 {
228 | background-color: #DADCFF;
229 | }
230 | tr.odd td.sorting_3 {
231 | background-color: #E0E2FF;
232 | }
233 | tr.even td.sorting_1 {
234 | background-color: #EAEBFF;
235 | }
236 | tr.even td.sorting_2 {
237 | background-color: #F2F3FF;
238 | }
239 | tr.even td.sorting_3 {
240 | background-color: #F9F9FF;
241 | }
242 | tr.odd.gradeA td.sorting_1 {
243 | background-color: #C4FFC4;
244 | }
245 | tr.odd.gradeA td.sorting_2 {
246 | background-color: #D1FFD1;
247 | }
248 | tr.odd.gradeA td.sorting_3 {
249 | background-color: #D1FFD1;
250 | }
251 | tr.even.gradeA td.sorting_1 {
252 | background-color: #D5FFD5;
253 | }
254 | tr.even.gradeA td.sorting_2 {
255 | background-color: #E2FFE2;
256 | }
257 | tr.even.gradeA td.sorting_3 {
258 | background-color: #E2FFE2;
259 | }
260 | tr.odd.gradeC td.sorting_1 {
261 | background-color: #C4C4FF;
262 | }
263 | tr.odd.gradeC td.sorting_2 {
264 | background-color: #D1D1FF;
265 | }
266 | tr.odd.gradeC td.sorting_3 {
267 | background-color: #D1D1FF;
268 | }
269 | tr.even.gradeC td.sorting_1 {
270 | background-color: #D5D5FF;
271 | }
272 | tr.even.gradeC td.sorting_2 {
273 | background-color: #E2E2FF;
274 | }
275 | tr.even.gradeC td.sorting_3 {
276 | background-color: #E2E2FF;
277 | }
278 | tr.odd.gradeX td.sorting_1 {
279 | background-color: #FFC4C4;
280 | }
281 | tr.odd.gradeX td.sorting_2 {
282 | background-color: #FFD1D1;
283 | }
284 | tr.odd.gradeX td.sorting_3 {
285 | background-color: #FFD1D1;
286 | }
287 | tr.even.gradeX td.sorting_1 {
288 | background-color: #FFD5D5;
289 | }
290 | tr.even.gradeX td.sorting_2 {
291 | background-color: #FFE2E2;
292 | }
293 | tr.even.gradeX td.sorting_3 {
294 | background-color: #FFE2E2;
295 | }
296 | tr.odd.gradeU td.sorting_1 {
297 | background-color: #C4C4C4;
298 | }
299 | tr.odd.gradeU td.sorting_2 {
300 | background-color: #D1D1D1;
301 | }
302 | tr.odd.gradeU td.sorting_3 {
303 | background-color: #D1D1D1;
304 | }
305 | tr.even.gradeU td.sorting_1 {
306 | background-color: #D5D5D5;
307 | }
308 | tr.even.gradeU td.sorting_2 {
309 | background-color: #E2E2E2;
310 | }
311 | tr.even.gradeU td.sorting_3 {
312 | background-color: #E2E2E2;
313 | }
314 | .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
315 | background-color: #ECFFB3;
316 | }
317 | .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
318 | background-color: #E6FF99;
319 | }
320 | .ex_highlight_row #example tr.even:hover {
321 | background-color: #ECFFB3;
322 | }
323 | .ex_highlight_row #example tr.even:hover td.sorting_1 {
324 | background-color: #DDFF75;
325 | }
326 | .ex_highlight_row #example tr.even:hover td.sorting_2 {
327 | background-color: #E7FF9E;
328 | }
329 | .ex_highlight_row #example tr.even:hover td.sorting_3 {
330 | background-color: #E2FF89;
331 | }
332 | .ex_highlight_row #example tr.odd:hover {
333 | background-color: #E6FF99;
334 | }
335 | .ex_highlight_row #example tr.odd:hover td.sorting_1 {
336 | background-color: #D6FF5C;
337 | }
338 | .ex_highlight_row #example tr.odd:hover td.sorting_2 {
339 | background-color: #E0FF84;
340 | }
341 | .ex_highlight_row #example tr.odd:hover td.sorting_3 {
342 | background-color: #DBFF70;
343 | }
344 | table.KeyTable td {
345 | border: 3px solid transparent;
346 | }
347 | table.KeyTable td.focus {
348 | border: 3px solid #3366FF;
349 | }
350 | table.display tr.gradeA {
351 | background-color: #EEFFEE;
352 | }
353 | table.display tr.gradeC {
354 | background-color: #DDDDFF;
355 | }
356 | table.display tr.gradeX {
357 | background-color: #FFDDDD;
358 | }
359 | table.display tr.gradeU {
360 | background-color: #DDDDDD;
361 | }
362 | div.box {
363 | background-color: #E5E5FF;
364 | border: 1px solid #8080FF;
365 | height: 100px;
366 | overflow: auto;
367 | padding: 10px;
368 | }
369 |
370 | .number_range_filter {
371 | width: 20px;
372 | }
373 | .date_range_filter {
374 | width: 5.5em;
375 | }
376 | .search_init {
377 | color: #999999;
378 | }
379 |
--------------------------------------------------------------------------------
/checkbox.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Using Checkboxed as column editors
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
76 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
Home
97 |
Wiki
98 |
99 |
100 | Editable DataTable example - custom editors + checkbox
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
Live example
109 |
110 |
111 |
112 |
113 |
114 |
115 | Is supported
116 | Browser
117 | Platform(s)
118 | Engine version
119 | CSS grade
120 |
121 |
122 |
123 |
124 |
125 | Rendering engine
126 | Browser
127 | Platform(s)
128 | Engine version
129 | CSS grade
130 |
131 |
132 |
133 |
134 |
135 | No
136 | Internet Explorer 4.0
137 | Win 95+ (Entity: &)
138 | 4
139 |
140 | X
141 |
142 |
143 | No
144 | Internet Explorer 5.0
145 | Win 95+
146 | 5
147 |
148 | C
149 |
150 |
151 |
152 | Yes
153 | Firefox 1.5
154 | Win 98+ / OSX.2+
155 | 1.8
156 |
157 | A
158 |
159 |
160 | Yes
161 | Firefox 2.0
162 | Win 98+ / OSX.2+
163 | 1.8
164 |
165 | A
166 |
167 |
168 | Yes
169 | Firefox 3.0
170 | Win 2k+ / OSX.3+
171 | 1.9
172 |
173 | A
174 |
175 |
176 | Yes
177 | Camino 1.0
178 | OSX.2+
179 | 1.8
180 |
181 | A
182 |
183 |
184 | Yes
185 | Camino 1.5
186 | OSX.3+
187 | 1.8
188 |
189 | A
190 |
191 |
192 | Yes
193 | Netscape 7.2
194 | Win 95+ / Mac OS 8.6-9.2
195 | 1.7
196 |
197 | A
198 |
199 |
200 | Yes
201 | Netscape Browser 8
202 | Win 98SE+
203 | 1.7
204 |
205 | A
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
Initialization code
219 |
In the initialization code you will need to pass definitions of the columns according to the JQuery JEditable plugin rules.
220 |
$(document).ready( function () {
221 | $('#example').dataTable().makeEditable({
222 | sUpdateURL: "UpdateData.php",
223 | "aoColumns": [
224 | { type:'checkbox',
225 | onblur: 'submit',
226 | checkbox: { trueValue: 'Yes', falseValue: 'No' }
227 | },
228 | {
229 | },
230 | {
231 | indicator: 'Saving platforms...',
232 | tooltip: 'Click to edit platforms',
233 | type: 'textarea',
234 | submit:'Save changes',
235 | fnOnCellUpdated: function(sStatus, sValue, settings){
236 | alert("(Cell Callback): Cell is updated with value " + sValue);
237 | }
238 | },
239 | {
240 | //indicator: 'Saving Engine Version...',
241 | tooltip: 'Click to select engine version',
242 | loadtext: 'loading...',
243 | type: 'select',
244 | onblur: 'cancel',
245 | submit: 'Ok',
246 | loadurl: 'EngineVersionList.php',
247 | loadtype: 'GET',
248 | sUpdateURL: "CustomUpdateEngineVersion.php"
249 | },
250 | {
251 | indicator: 'Saving CSS Grade...',
252 | tooltip: 'Click to select CSS Grade',
253 | loadtext: 'loading...',
254 | type: 'select',
255 | onblur: 'submit',
256 | data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}",
257 | sUpdateURL: function(value, settings){
258 | alert("Custom function for posting results");
259 | return value;
260 |
261 | }
262 | }
263 | ]
264 | });
265 | })
266 |
267 |
268 |
Other examples
269 |
283 |
284 |
289 |
290 |
291 |
292 |
293 |
--------------------------------------------------------------------------------
/ajax_mDataProp.js:
--------------------------------------------------------------------------------
1 | {"DT_RowId": "row_7",
2 | "aaData": [
3 | {"DT_RowId": "row_1",
4 | "engine": "Trident",
5 | "browser": "Internet Explorer 4.0",
6 | "platform": "Win 95+",
7 | "version": "4",
8 | "grade": "X"
9 | },
10 | {"DT_RowId": "row_2",
11 | "engine": "Trident",
12 | "browser": "Internet Explorer 5.0",
13 | "platform": "Win 95+",
14 | "version": "5",
15 | "grade": "C"
16 | },
17 | {"DT_RowId": "row_3",
18 | "engine": "Trident",
19 | "browser": "Internet Explorer 5.5",
20 | "platform": "Win 95+",
21 | "version": "5.5",
22 | "grade": "A"
23 | },
24 | {"DT_RowId": "row_4",
25 | "engine": "Trident",
26 | "browser": "Internet Explorer 6",
27 | "platform": "Win 98+",
28 | "version": "6",
29 | "grade": "A"
30 | },
31 | {"DT_RowId": "row_5",
32 | "engine": "Trident",
33 | "browser": "Internet Explorer 7",
34 | "platform": "Win XP SP2+",
35 | "version": "7",
36 | "grade": "A"
37 | },
38 | {"DT_RowId": "row_6",
39 | "engine": "Trident",
40 | "browser": "AOL browser (AOL desktop)",
41 | "platform": "Win XP",
42 | "version": "6",
43 | "grade": "A"
44 | },
45 | {"DT_RowId": "row_8",
46 | "engine": "Gecko",
47 | "browser": "Firefox 1.0",
48 | "platform": "Win 98+ / OSX.2+",
49 | "version": "1.7",
50 | "grade": "A"
51 | },
52 | {"DT_RowId": "row_7",
53 | "engine": "Gecko",
54 | "browser": "Firefox 1.5",
55 | "platform": "Win 98+ / OSX.2+",
56 | "version": "1.8",
57 | "grade": "A"
58 | },
59 | {"DT_RowId": "row_7",
60 | "engine": "Gecko",
61 | "browser": "Firefox 2.0",
62 | "platform": "Win 98+ / OSX.2+",
63 | "version": "1.8",
64 | "grade": "A"
65 | },
66 | {"DT_RowId": "row_7",
67 | "engine": "Gecko",
68 | "browser": "Firefox 3.0",
69 | "platform": "Win 2k+ / OSX.3+",
70 | "version": "1.9",
71 | "grade": "A"
72 | },
73 | {"DT_RowId": "row_7",
74 | "engine": "Gecko",
75 | "browser": "Camino 1.0",
76 | "platform": "OSX.2+",
77 | "version": "1.8",
78 | "grade": "A"
79 | },
80 | {"DT_RowId": "row_7",
81 | "engine": "Gecko",
82 | "browser": "Camino 1.5",
83 | "platform": "OSX.3+",
84 | "version": "1.8",
85 | "grade": "A"
86 | },
87 | {"DT_RowId": "row_7",
88 | "engine": "Gecko",
89 | "browser": "Netscape 7.2",
90 | "platform": "Win 95+ / Mac OS 8.6-9.2",
91 | "version": "1.7",
92 | "grade": "A"
93 | },
94 | {"DT_RowId": "row_7",
95 | "engine": "Gecko",
96 | "browser": "Netscape Browser 8",
97 | "platform": "Win 98SE+",
98 | "version": "1.7",
99 | "grade": "A"
100 | },
101 | {"DT_RowId": "row_7",
102 | "engine": "Gecko",
103 | "browser": "Netscape Navigator 9",
104 | "platform": "Win 98+ / OSX.2+",
105 | "version": "1.8",
106 | "grade": "A"
107 | },
108 | {"DT_RowId": "row_7",
109 | "engine": "Gecko",
110 | "browser": "Mozilla 1.0",
111 | "platform": "Win 95+ / OSX.1+",
112 | "version": "1",
113 | "grade": "A"
114 | },
115 | {"DT_RowId": "row_7",
116 | "engine": "Gecko",
117 | "browser": "Mozilla 1.1",
118 | "platform": "Win 95+ / OSX.1+",
119 | "version": "1.1",
120 | "grade": "A"
121 | },
122 | {"DT_RowId": "row_7",
123 | "engine": "Gecko",
124 | "browser": "Mozilla 1.2",
125 | "platform": "Win 95+ / OSX.1+",
126 | "version": "1.2",
127 | "grade": "A"
128 | },
129 | {"DT_RowId": "row_7",
130 | "engine": "Gecko",
131 | "browser": "Mozilla 1.3",
132 | "platform": "Win 95+ / OSX.1+",
133 | "version": "1.3",
134 | "grade": "A"
135 | },
136 | {"DT_RowId": "row_7",
137 | "engine": "Gecko",
138 | "browser": "Mozilla 1.4",
139 | "platform": "Win 95+ / OSX.1+",
140 | "version": "1.4",
141 | "grade": "A"
142 | },
143 | {"DT_RowId": "row_7",
144 | "engine": "Gecko",
145 | "browser": "Mozilla 1.5",
146 | "platform": "Win 95+ / OSX.1+",
147 | "version": "1.5",
148 | "grade": "A"
149 | },
150 | {"DT_RowId": "row_7",
151 | "engine": "Gecko",
152 | "browser": "Mozilla 1.6",
153 | "platform": "Win 95+ / OSX.1+",
154 | "version": "1.6",
155 | "grade": "A"
156 | },
157 | {"DT_RowId": "row_7",
158 | "engine": "Gecko",
159 | "browser": "Mozilla 1.7",
160 | "platform": "Win 98+ / OSX.1+",
161 | "version": "1.7",
162 | "grade": "A"
163 | },
164 | {"DT_RowId": "row_7",
165 | "engine": "Gecko",
166 | "browser": "Mozilla 1.8",
167 | "platform": "Win 98+ / OSX.1+",
168 | "version": "1.8",
169 | "grade": "A"
170 | },
171 | {"DT_RowId": "row_7",
172 | "engine": "Gecko",
173 | "browser": "Seamonkey 1.1",
174 | "platform": "Win 98+ / OSX.2+",
175 | "version": "1.8",
176 | "grade": "A"
177 | },
178 | {"DT_RowId": "row_7",
179 | "engine": "Gecko",
180 | "browser": "Epiphany 2.20",
181 | "platform": "Gnome",
182 | "version": "1.8",
183 | "grade": "A"
184 | },
185 | {"DT_RowId": "row_7",
186 | "engine": "Webkit",
187 | "browser": "Safari 1.2",
188 | "platform": "OSX.3",
189 | "version": "125.5",
190 | "grade": "A"
191 | },
192 | {"DT_RowId": "row_7",
193 | "engine": "Webkit",
194 | "browser": "Safari 1.3",
195 | "platform": "OSX.3",
196 | "version": "312.8",
197 | "grade": "A"
198 | },
199 | {"DT_RowId": "row_7",
200 | "engine": "Webkit",
201 | "browser": "Safari 2.0",
202 | "platform": "OSX.4+",
203 | "version": "419.3",
204 | "grade": "A"
205 | },
206 | {"DT_RowId": "row_7",
207 | "engine": "Webkit",
208 | "browser": "Safari 3.0",
209 | "platform": "OSX.4+",
210 | "version": "522.1",
211 | "grade": "A"
212 | },
213 | {"DT_RowId": "row_7",
214 | "engine": "Webkit",
215 | "browser": "OmniWeb 5.5",
216 | "platform": "OSX.4+",
217 | "version": "420",
218 | "grade": "A"
219 | },
220 | {"DT_RowId": "row_7",
221 | "engine": "Webkit",
222 | "browser": "iPod Touch / iPhone",
223 | "platform": "iPod",
224 | "version": "420.1",
225 | "grade": "A"
226 | },
227 | {"DT_RowId": "row_7",
228 | "engine": "Webkit",
229 | "browser": "S60",
230 | "platform": "S60",
231 | "version": "413",
232 | "grade": "A"
233 | },
234 | {"DT_RowId": "row_7",
235 | "engine": "Presto",
236 | "browser": "Opera 7.0",
237 | "platform": "Win 95+ / OSX.1+",
238 | "version": "-",
239 | "grade": "A"
240 | },
241 | {"DT_RowId": "row_7",
242 | "engine": "Presto",
243 | "browser": "Opera 7.5",
244 | "platform": "Win 95+ / OSX.2+",
245 | "version": "-",
246 | "grade": "A"
247 | },
248 | {"DT_RowId": "row_7",
249 | "engine": "Presto",
250 | "browser": "Opera 8.0",
251 | "platform": "Win 95+ / OSX.2+",
252 | "version": "-",
253 | "grade": "A"
254 | },
255 | {"DT_RowId": "row_7",
256 | "engine": "Presto",
257 | "browser": "Opera 8.5",
258 | "platform": "Win 95+ / OSX.2+",
259 | "version": "-",
260 | "grade": "A"
261 | },
262 | {"DT_RowId": "row_7",
263 | "engine": "Presto",
264 | "browser": "Opera 9.0",
265 | "platform": "Win 95+ / OSX.3+",
266 | "version": "-",
267 | "grade": "A"
268 | },
269 | {"DT_RowId": "row_7",
270 | "engine": "Presto",
271 | "browser": "Opera 9.2",
272 | "platform": "Win 88+ / OSX.3+",
273 | "version": "-",
274 | "grade": "A"
275 | },
276 | {"DT_RowId": "row_7",
277 | "engine": "Presto",
278 | "browser": "Opera 9.5",
279 | "platform": "Win 88+ / OSX.3+",
280 | "version": "-",
281 | "grade": "A"
282 | },
283 | {"DT_RowId": "row_7",
284 | "engine": "Presto",
285 | "browser": "Opera for Wii",
286 | "platform": "Wii",
287 | "version": "-",
288 | "grade": "A"
289 | },
290 | {"DT_RowId": "row_7",
291 | "engine": "Presto",
292 | "browser": "Nokia N800",
293 | "platform": "N800",
294 | "version": "-",
295 | "grade": "A"
296 | },
297 | {"DT_RowId": "row_7",
298 | "engine": "Presto",
299 | "browser": "Nintendo DS browser",
300 | "platform": "Nintendo DS",
301 | "version": "8.5",
302 | "grade": "C/A
1 "
303 | },
304 | {"DT_RowId": "row_7",
305 | "engine": "KHTML",
306 | "browser": "Konqureror 3.1",
307 | "platform": "KDE 3.1",
308 | "version": "3.1",
309 | "grade": "C"
310 | },
311 | {"DT_RowId": "row_7",
312 | "engine": "KHTML",
313 | "browser": "Konqureror 3.3",
314 | "platform": "KDE 3.3",
315 | "version": "3.3",
316 | "grade": "A"
317 | },
318 | {"DT_RowId": "row_7",
319 | "engine": "KHTML",
320 | "browser": "Konqureror 3.5",
321 | "platform": "KDE 3.5",
322 | "version": "3.5",
323 | "grade": "A"
324 | },
325 | {"DT_RowId": "row_7",
326 | "engine": "Tasman",
327 | "browser": "Internet Explorer 4.5",
328 | "platform": "Mac OS 8-9",
329 | "version": "-",
330 | "grade": "X"
331 | },
332 | {"DT_RowId": "row_7",
333 | "engine": "Tasman",
334 | "browser": "Internet Explorer 5.1",
335 | "platform": "Mac OS 7.6-9",
336 | "version": "1",
337 | "grade": "C"
338 | },
339 | {"DT_RowId": "row_7",
340 | "engine": "Tasman",
341 | "browser": "Internet Explorer 5.2",
342 | "platform": "Mac OS 8-X",
343 | "version": "1",
344 | "grade": "C"
345 | },
346 | {"DT_RowId": "row_7",
347 | "engine": "Misc",
348 | "browser": "NetFront 3.1",
349 | "platform": "Embedded devices",
350 | "version": "-",
351 | "grade": "C"
352 | },
353 | {"DT_RowId": "row_7",
354 | "engine": "Misc",
355 | "browser": "NetFront 3.4",
356 | "platform": "Embedded devices",
357 | "version": "-",
358 | "grade": "A"
359 | },
360 | {"DT_RowId": "row_7",
361 | "engine": "Misc",
362 | "browser": "Dillo 0.8",
363 | "platform": "Embedded devices",
364 | "version": "-",
365 | "grade": "X"
366 | },
367 | {"DT_RowId": "row_7",
368 | "engine": "Misc",
369 | "browser": "Links",
370 | "platform": "Text only",
371 | "version": "-",
372 | "grade": "X"
373 | },
374 | {"DT_RowId": "row_7",
375 | "engine": "Misc",
376 | "browser": "Lynx",
377 | "platform": "Text only",
378 | "version": "-",
379 | "grade": "X"
380 | },
381 | {"DT_RowId": "row_7",
382 | "engine": "Misc",
383 | "browser": "IE Mobile",
384 | "platform": "Windows Mobile 6",
385 | "version": "-",
386 | "grade": "C"
387 | },
388 | {"DT_RowId": "row_7",
389 | "engine": "Misc",
390 | "browser": "PSP browser",
391 | "platform": "PSP",
392 | "version": "-",
393 | "grade": "C"
394 | },
395 | {"DT_RowId": "row_7",
396 | "engine": "Other browsers",
397 | "browser": "All others",
398 | "platform": "-",
399 | "version": "-",
400 | "grade": "U"
401 | }
402 | ]
403 | }
--------------------------------------------------------------------------------
/media/js/jquery.dataTables.rowGrouping.js:
--------------------------------------------------------------------------------
1 | /*
2 | * File: jquery.dataTables.grouping.js
3 | * Version: 0.1.
4 | * Author: Jovan Popovic
5 | *
6 | * Copyright 2011 Jovan Popovic, all rights reserved.
7 | *
8 | * This source file is free software, under either the GPL v2 license or a
9 | * BSD style license, as supplied with this software.
10 | *
11 | * This source file is distributed in the hope that it will be useful, but
12 | * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
13 | * or FITNESS FOR A PARTICULAR PURPOSE.
14 | *
15 | */
16 | (function ($) {
17 |
18 | $.fn.rowGrouping = function (options) {
19 |
20 | function _fnGetYear(x) {
21 | return x.substr(iYearIndex, 4);
22 | }
23 | function _fnGetGroupByName(x) {
24 | return x;
25 | }
26 |
27 | function _fnGetGroupByLetter(x) {
28 | return x.substr(0, 1);
29 | }
30 |
31 | function _fnGetGroupByYear(x) {
32 | return _fnGetYear(x);
33 | //return Date.parseExact(x, properties.sDateFormat).getFullYear();//slooooow
34 | }
35 |
36 | function _fnGetGroupByYearMonth(x) {
37 | var date = Date.parseExact(x, "dd/MM/yyyy");
38 | return date.getFullYear() + " / " + date.getMonthName();
39 | }
40 |
41 | var oTable = this;
42 | var iYearIndex = 6;
43 |
44 | var defaults = {
45 |
46 | iGroupingColumnIndex: 0,
47 | sGroupingColumnSortDirection: "",
48 | iGroupingOrderByColumnIndex: -1,
49 | sGrupingClass: "group",
50 | bHideGroupingColumn: true,
51 | bHideGroupingOrderByColumn: true,
52 | sGroupBy: "name",
53 |
54 | sDateFormat: "dd/MM/yyyy",
55 | sEmptyGroupLabel: "-",
56 | bSetGroupingClassOnTR: false,
57 |
58 | iGroupingColumnIndex2: -1,
59 | sGroupingColumnSortDirection2: "",
60 | iGroupingOrderByColumnIndex2: -1,
61 | sGrupingClass2: "subgroup",
62 | bHideGroupingColumn2: true,
63 | bHideGroupingOrderByColumn2: true,
64 | sGroupBy2: "name",
65 |
66 |
67 | };
68 |
69 | properties = $.extend(defaults, options);
70 |
71 | if (properties.iGroupingOrderByColumnIndex == -1) {
72 | properties.bCustomColumnOrdering = false;
73 | properties.iGroupingOrderByColumnIndex = properties.iGroupingColumnIndex;
74 | } else {
75 | properties.bCustomColumnOrdering = true;
76 | }
77 |
78 | if (properties.sGroupingColumnSortDirection == "") {
79 | if (properties.sGroupBy == "year")
80 | properties.sGroupingColumnSortDirection = "desc";
81 | else
82 | properties.sGroupingColumnSortDirection = "asc";
83 | }
84 |
85 |
86 | if (properties.iGroupingOrderByColumnIndex2 == -1) {
87 | properties.bCustomColumnOrdering2 = false;
88 | properties.iGroupingOrderByColumnIndex2 = properties.iGroupingColumnIndex2;
89 | } else {
90 | properties.bCustomColumnOrdering2 = true;
91 | }
92 |
93 | if (properties.sGroupingColumnSortDirection2 == "") {
94 | if (properties.sGroupBy2 == "year")
95 | properties.sGroupingColumnSortDirection2 = "desc";
96 | else
97 | properties.sGroupingColumnSortDirection2 = "asc";
98 | }
99 |
100 | iYearIndex = properties.sDateFormat.toLowerCase().indexOf('yy');
101 |
102 | var fnGetGroup = _fnGetGroupByName;
103 | switch (properties.sGroupBy) {
104 | case "letter": fnGetGroup = _fnGetGroupByLetter;
105 | break;
106 | case "year": fnGetGroup = _fnGetGroupByYear;
107 | break;
108 | case "month": fnGetGroup = _fnGetGroupByYearMonth;
109 | break;
110 | default: fnGetGroup = _fnGetGroupByName;
111 | break;
112 | }
113 |
114 | return this.each(function () {
115 |
116 |
117 | var _fnDrawCallBackWithGrouping = function (oSettings) {
118 |
119 | var bUseSecondaryGrouping = false;
120 |
121 | if (properties.iGroupingColumnIndex2 != -1)
122 | bUseSecondaryGrouping = true;
123 |
124 | //-----Start grouping
125 |
126 | if (oSettings.aiDisplay.length == 0) {
127 | return;
128 | }
129 |
130 | var nTrs = $('tbody tr', oTable);
131 | var iColspan = nTrs[0].getElementsByTagName('td').length;
132 | var sLastGroup = null;
133 | var sLastGroup2 = null;
134 | for (var i = 0; i < nTrs.length; i++) {
135 | var iDisplayIndex = oSettings._iDisplayStart + i;
136 | var sGroupData = "";
137 | var sGroup = null;
138 | var sGroupData2 = "";
139 | var sGroup2 = null;
140 |
141 | sGroupData = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[properties.iGroupingColumnIndex];
142 | var sGroup = sGroupData;
143 | if (properties.sGroupBy != "year")
144 | sGroup = fnGetGroup(sGroupData);
145 |
146 | if (bUseSecondaryGrouping) {
147 | sGroupData2 = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[properties.iGroupingColumnIndex2];
148 | if (properties.sGroupBy2 != "year")
149 | sGroup2 = fnGetGroup(sGroupData2);
150 | }
151 |
152 | if (sLastGroup == null || sGroup != sLastGroup) {
153 | var nGroup = document.createElement('tr');
154 | var nCell = document.createElement('td');
155 |
156 | if (properties.bSetGroupingClassOnTR) {
157 | nGroup.className = properties.sGrupingClass + " " + sGroup.toLowerCase().replace(" ", "-");
158 | } else {
159 | nCell.className = properties.sGrupingClass + " " + sGroup.toLowerCase().replace(" ", "-");
160 | }
161 |
162 | nCell.colSpan = iColspan;
163 | nCell.innerHTML = sGroup == "" ? properties.sEmptyGroupLabel : sGroup;
164 |
165 | nGroup.appendChild(nCell);
166 | nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
167 | sLastGroup = sGroup;
168 | sLastGroup2 = null;//to reset second level grouping
169 |
170 |
171 |
172 | } // end if (sLastGroup == null || sGroup != sLastGroup)
173 |
174 | if (bUseSecondaryGrouping) {
175 |
176 | if (sLastGroup2 == null || sGroup2 != sLastGroup2) {
177 | var nGroup2 = document.createElement('tr');
178 | var nCell2 = document.createElement('td');
179 |
180 | if (properties.bSetGroupingClassOnTR) {
181 | nGroup2.className = properties.sGrupingClass2 + " " + sGroup2.toLowerCase().replace(" ", "-");
182 | } else {
183 | nCell2.className = properties.sGrupingClass2 + " " + sGroup2.toLowerCase().replace(" ", "-");
184 | }
185 |
186 | nCell2.colSpan = iColspan;
187 | nCell2.innerHTML = sGroup2 == "" ? properties.sEmptyGroupLabel : sGroup2;
188 |
189 | nGroup2.appendChild(nCell2);
190 | nTrs[i].parentNode.insertBefore(nGroup2, nTrs[i]);
191 | sLastGroup2 = sGroup2;
192 | }
193 |
194 |
195 | } //end if (bUseSecondaryGrouping)
196 |
197 |
198 | } // end for (var i = 0; i < nTrs.length; i++)
199 |
200 |
201 | //-----End grouping
202 |
203 |
204 | };
205 |
206 | oTable.fnSetColumnVis(properties.iGroupingColumnIndex, !properties.bHideGroupingColumn);
207 | if (properties.bCustomColumnOrdering) {
208 | oTable.fnSetColumnVis(properties.iGroupingOrderByColumnIndex, !properties.bHideGroupingOrderByColumn);
209 | }
210 | if (properties.iGroupingColumnIndex2 != -1) {
211 | oTable.fnSetColumnVis(properties.iGroupingColumnIndex2, !properties.bHideGroupingColumn2);
212 | }
213 | if (properties.bCustomColumnOrdering2) {
214 | oTable.fnSetColumnVis(properties.iGroupingOrderByColumnIndex2, !properties.bHideGroupingOrderByColumn2);
215 | }
216 | oTable.fnSettings().aoDrawCallback.push({
217 | "fn": _fnDrawCallBackWithGrouping,
218 | "sName": "fnRowGroupung"
219 | });
220 |
221 | var aaSortingFixed = new Array();
222 | aaSortingFixed.push( [properties.iGroupingOrderByColumnIndex, properties.sGroupingColumnSortDirection] );
223 | if (properties.iGroupingColumnIndex2 != -1) {
224 | aaSortingFixed.push( [properties.iGroupingOrderByColumnIndex2, properties.sGroupingColumnSortDirection2] );
225 | }
226 |
227 | oTable.fnSettings().aaSortingFixed = aaSortingFixed;
228 | //Old way
229 | //oTable.fnSettings().aaSortingFixed = [[properties.iGroupingOrderByColumnIndex, properties.sGroupingColumnSortDirection]];
230 |
231 | switch (properties.sGroupBy) {
232 | case "name":
233 | break;
234 |
235 |
236 | case "letter":
237 |
238 | /* Create an array with the values of all the input boxes in a column */
239 | oTable.fnSettings().aoColumns[properties.iGroupingOrderByColumnIndex].sSortDataType = "rg-letter";
240 | $.fn.dataTableExt.afnSortData['rg-letter'] = function (oSettings, iColumn) {
241 | var aData = [];
242 | $('td:eq(' + iColumn + ')', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
243 | aData.push(_fnGetGroupByLetter(this.innerHTML));
244 | });
245 | return aData;
246 | }
247 |
248 |
249 | break;
250 |
251 |
252 | case "year":
253 |
254 |
255 | /* Create an array with the values of all the input boxes in a column */
256 | oTable.fnSettings().aoColumns[properties.iGroupingOrderByColumnIndex].sSortDataType = "rg-date";
257 | $.fn.dataTableExt.afnSortData['rg-date'] = function (oSettings, iColumn) {
258 | var aData = [];
259 | $('td:eq(' + iColumn + ')', oSettings.oApi._fnGetTrNodes(oSettings)).each(function () {
260 | aData.push(_fnGetYear(this.innerHTML));
261 | });
262 | return aData;
263 | }
264 |
265 |
266 |
267 |
268 | break;
269 | default:
270 | break;
271 |
272 | }
273 | if (properties.sGroupBy == "name" || properties.sGroupBy == "letter") {
274 |
275 | } else {
276 | //oTable.fnSettings().aaSortingFixed = [[properties.iGroupingOrderByColumnIndex, properties.sGroupingColumnSortDirection]];
277 |
278 | }
279 |
280 | oTable.fnDraw();
281 |
282 |
283 | });
284 | };
285 | })(jQuery);
--------------------------------------------------------------------------------
/server_side_processing.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Server-side processing
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
85 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 | Editable DataTable example - server-side processing
108 |
109 |
110 |
Preamble
111 |
112 | DataTable Editable plugin works with DataTables in the server-side processing mode. In this example, cells are not placed in the source
113 | of the page - they are loaded from the server-side via JSON. This mode is similar with the ajax mode because in both cases rows are loaded via ajax call. However in the ajax mode , once data is loaded sorting, filtering and pagination is done on the client side, and in this mode each time user makes any action new ajax request is sent to the server.
114 |
There is just one important thing you need to notice. If you set aoColumns definitions in dataTable and editable number of columns should not match.
115 | In the dataTable plugin number of aoColumns elements should be same as the number of columns in the table. However, in the dataTables editable plugin
116 | number of aoColumns is equal to the number of visible columns. If you have five columns in the dataTable and first one is not visible,
117 | in the dataTables editable aoColumns array you will have four elements because each of the elements is applied to the visible cells.
118 |
119 |
Live example
120 |
121 |
122 |
123 |
124 |
125 |
126 | Rendering engine
127 | Browser
128 | Platform(s)
129 | Engine version
130 | CSS grade
131 |
132 |
133 |
134 |
135 |
136 | Rendering engine
137 | Browser
138 | Platform(s)
139 | Engine version
140 | CSS grade
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
Initialization code
153 |
In the initialization code you will need to pass definitions of the columns according to the JQuery DataTables server-side processing rules. Note that this is a "fake" server-side processing becuse the same .js file is called each time. Google code do not host php server page therefore on the demo page is used just a simulation.
154 |
155 | $(document).ready( function () {
156 | $('#example').dataTable({
157 | "bServerSide": true,
158 | "sAjaxSource": "server_processing.js",
159 | "aoColumns":[
160 | {
161 | "bVisible" : false
162 | },
163 | {},
164 | {},
165 | {},
166 | {}
167 | ]
168 | }
169 | ).makeEditable({
170 | sUpdateURL: function(value, settings)
171 | {
172 | //Simulation of server-side response using a callback function
173 | return(value);
174 | },
175 | "aoColumns": [
176 | {
177 | },
178 | {
179 | indicator: 'Saving platforms...',
180 | tooltip: 'Click to edit platforms',
181 | type: 'textarea',
182 | cssclass: 'required',
183 | submit:'Save changes'
184 | },
185 | {
186 | indicator: 'Saving Engine Version...',
187 | tooltip: 'Click to select engine version',
188 | loadtext: 'loading...',
189 | type: 'select',
190 | onblur: 'cancel',
191 | submit: 'Ok',
192 | loadurl: 'EngineVersionList.php',
193 | loadtype: 'GET'
194 | },
195 | {
196 | indicator: 'Saving CSS Grade...',
197 | tooltip: 'Click to select CSS Grade',
198 | loadtext: 'loading...',
199 | type: 'select',
200 | onblur: 'submit',
201 | data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}"
202 | }
203 | ]
204 | });
205 | } );
206 |
207 |
208 |
Other examples
209 |
219 |
220 |
225 |
226 |
227 |
228 |
229 |
230 |
--------------------------------------------------------------------------------
/media/css/demo_table_jui.css:
--------------------------------------------------------------------------------
1 | /*
2 | * File: demo_table_jui.css
3 | * CVS: $Id$
4 | * Description: CSS descriptions for DataTables demo pages
5 | * Author: Allan Jardine
6 | * Created: Tue May 12 06:47:22 BST 2009
7 | * Modified: $Date$ by $Author$
8 | * Language: CSS
9 | * Project: DataTables
10 | *
11 | * Copyright 2009 Allan Jardine. All Rights Reserved.
12 | *
13 | * ***************************************************************************
14 | * DESCRIPTION
15 | *
16 | * The styles given here are suitable for the demos that are used with the standard DataTables
17 | * distribution (see www.datatables.net). You will most likely wish to modify these styles to
18 | * meet the layout requirements of your site.
19 | *
20 | * Common issues:
21 | * 'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
22 | * no conflict between the two pagination types. If you want to use full_numbers pagination
23 | * ensure that you either have "example_alt_pagination" as a body class name, or better yet,
24 | * modify that selector.
25 | * Note that the path used for Images is relative. All images are by default located in
26 | * ../images/ - relative to this CSS file.
27 | */
28 |
29 |
30 | /*
31 | * jQuery UI specific styling
32 | */
33 |
34 | .paging_two_button .ui-button {
35 | float: left;
36 | cursor: pointer;
37 | * cursor: hand;
38 | }
39 |
40 | .paging_full_numbers .ui-button {
41 | padding: 2px 6px;
42 | margin: 0;
43 | cursor: pointer;
44 | * cursor: hand;
45 | color: #333 !important;
46 | }
47 |
48 | .dataTables_paginate .ui-button {
49 | margin-right: -0.1em !important;
50 | }
51 |
52 | .paging_full_numbers {
53 | width: 350px !important;
54 | }
55 |
56 | .dataTables_wrapper .ui-toolbar {
57 | padding: 5px;
58 | }
59 |
60 | .dataTables_paginate {
61 | width: auto;
62 | }
63 |
64 | .dataTables_info {
65 | padding-top: 3px;
66 | }
67 |
68 | table.display thead th {
69 | padding: 3px 0px 3px 10px;
70 | cursor: pointer;
71 | * cursor: hand;
72 | }
73 |
74 | div.dataTables_wrapper .ui-widget-header {
75 | font-weight: normal;
76 | }
77 |
78 |
79 | /*
80 | * Sort arrow icon positioning
81 | */
82 | table.display thead th div.DataTables_sort_wrapper {
83 | position: relative;
84 | padding-right: 20px;
85 | padding-right: 20px;
86 | }
87 |
88 | table.display thead th div.DataTables_sort_wrapper span {
89 | position: absolute;
90 | top: 50%;
91 | margin-top: -8px;
92 | right: 0;
93 | }
94 |
95 |
96 |
97 |
98 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
99 | *
100 | * Everything below this line is the same as demo_table.css. This file is
101 | * required for 'cleanliness' of the markup
102 | *
103 | * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
104 |
105 |
106 |
107 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
108 | * DataTables features
109 | */
110 |
111 | .dataTables_wrapper {
112 | position: relative;
113 | clear: both;
114 | }
115 |
116 | .dataTables_processing {
117 | position: absolute;
118 | top: 0px;
119 | left: 50%;
120 | width: 250px;
121 | margin-left: -125px;
122 | border: 1px solid #ddd;
123 | text-align: center;
124 | color: #999;
125 | font-size: 11px;
126 | padding: 2px 0;
127 | }
128 |
129 | .dataTables_length {
130 | width: 40%;
131 | float: left;
132 | }
133 |
134 | .dataTables_filter {
135 | width: 50%;
136 | float: right;
137 | text-align: right;
138 | }
139 |
140 | .dataTables_info {
141 | width: 50%;
142 | float: left;
143 | }
144 |
145 | .dataTables_paginate {
146 | float: right;
147 | text-align: right;
148 | }
149 |
150 | /* Pagination nested */
151 | .paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
152 | height: 19px;
153 | width: 19px;
154 | margin-left: 3px;
155 | float: left;
156 | }
157 |
158 | .paginate_disabled_previous {
159 | background-image: url('../images/back_disabled.jpg');
160 | }
161 |
162 | .paginate_enabled_previous {
163 | background-image: url('../images/back_enabled.jpg');
164 | }
165 |
166 | .paginate_disabled_next {
167 | background-image: url('../images/forward_disabled.jpg');
168 | }
169 |
170 | .paginate_enabled_next {
171 | background-image: url('../images/forward_enabled.jpg');
172 | }
173 |
174 |
175 |
176 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
177 | * DataTables display
178 | */
179 | table.display {
180 | margin: 0 auto;
181 | width: 100%;
182 | clear: both;
183 | border-collapse: collapse;
184 | }
185 |
186 | table.display tfoot th {
187 | padding: 3px 0px 3px 10px;
188 | font-weight: bold;
189 | font-weight: normal;
190 | }
191 |
192 | table.display tr.heading2 td {
193 | border-bottom: 1px solid #aaa;
194 | }
195 |
196 | table.display td {
197 | padding: 3px 10px;
198 | }
199 |
200 | table.display td.center {
201 | text-align: center;
202 | }
203 |
204 |
205 |
206 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
207 | * DataTables sorting
208 | */
209 |
210 | .sorting_asc {
211 | background: url('../images/sort_asc.png') no-repeat center right;
212 | }
213 |
214 | .sorting_desc {
215 | background: url('../images/sort_desc.png') no-repeat center right;
216 | }
217 |
218 | .sorting {
219 | background: url('../images/sort_both.png') no-repeat center right;
220 | }
221 |
222 | .sorting_asc_disabled {
223 | background: url('../images/sort_asc_disabled.png') no-repeat center right;
224 | }
225 |
226 | .sorting_desc_disabled {
227 | background: url('../images/sort_desc_disabled.png') no-repeat center right;
228 | }
229 |
230 |
231 |
232 |
233 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
234 | * DataTables row classes
235 | */
236 | table.display tr.odd.gradeA {
237 | background-color: #ddffdd;
238 | }
239 |
240 | table.display tr.even.gradeA {
241 | background-color: #eeffee;
242 | }
243 |
244 |
245 |
246 |
247 | table.display tr.odd.gradeA {
248 | background-color: #ddffdd;
249 | }
250 |
251 | table.display tr.even.gradeA {
252 | background-color: #eeffee;
253 | }
254 |
255 | table.display tr.odd.gradeC {
256 | background-color: #ddddff;
257 | }
258 |
259 | table.display tr.even.gradeC {
260 | background-color: #eeeeff;
261 | }
262 |
263 | table.display tr.odd.gradeX {
264 | background-color: #ffdddd;
265 | }
266 |
267 | table.display tr.even.gradeX {
268 | background-color: #ffeeee;
269 | }
270 |
271 | table.display tr.odd.gradeU {
272 | background-color: #ddd;
273 | }
274 |
275 | table.display tr.even.gradeU {
276 | background-color: #eee;
277 | }
278 |
279 |
280 | tr.odd {
281 | background-color: #E2E4FF;
282 | }
283 |
284 | tr.even {
285 | background-color: white;
286 | }
287 |
288 |
289 |
290 |
291 |
292 | /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
293 | * Misc
294 | */
295 | .dataTables_scroll {
296 | clear: both;
297 | }
298 |
299 | .top, .bottom {
300 | padding: 15px;
301 | background-color: #F5F5F5;
302 | border: 1px solid #CCCCCC;
303 | }
304 |
305 | .top .dataTables_info {
306 | float: none;
307 | }
308 |
309 | .clear {
310 | clear: both;
311 | }
312 |
313 | .dataTables_empty {
314 | text-align: center;
315 | }
316 |
317 | tfoot input {
318 | margin: 0.5em 0;
319 | width: 100%;
320 | color: #444;
321 | }
322 |
323 | tfoot input.search_init {
324 | color: #999;
325 | }
326 |
327 | td.group {
328 | background-color: #d1cfd0;
329 | border-bottom: 2px solid #A19B9E;
330 | border-top: 2px solid #A19B9E;
331 | }
332 |
333 | td.details {
334 | background-color: #d1cfd0;
335 | border: 2px solid #A19B9E;
336 | }
337 |
338 |
339 | .example_alt_pagination div.dataTables_info {
340 | width: 40%;
341 | }
342 |
343 | .paging_full_numbers a.paginate_button,
344 | .paging_full_numbers a.paginate_active {
345 | border: 1px solid #aaa;
346 | -webkit-border-radius: 5px;
347 | -moz-border-radius: 5px;
348 | padding: 2px 5px;
349 | margin: 0 3px;
350 | cursor: pointer;
351 | *cursor: hand;
352 | color: #333 !important;
353 | }
354 |
355 | .paging_full_numbers a.paginate_button {
356 | background-color: #ddd;
357 | }
358 |
359 | .paging_full_numbers a.paginate_button:hover {
360 | background-color: #ccc;
361 | text-decoration: none !important;
362 | }
363 |
364 | .paging_full_numbers a.paginate_active {
365 | background-color: #99B3FF;
366 | }
367 |
368 | table.display tr.even.row_selected td {
369 | background-color: #B0BED9;
370 | }
371 |
372 | table.display tr.odd.row_selected td {
373 | background-color: #9FAFD1;
374 | }
375 |
376 |
377 | /*
378 | * Sorting classes for columns
379 | */
380 | /* For the standard odd/even */
381 | tr.odd td.sorting_1 {
382 | background-color: #D3D6FF;
383 | }
384 |
385 | tr.odd td.sorting_2 {
386 | background-color: #DADCFF;
387 | }
388 |
389 | tr.odd td.sorting_3 {
390 | background-color: #E0E2FF;
391 | }
392 |
393 | tr.even td.sorting_1 {
394 | background-color: #EAEBFF;
395 | }
396 |
397 | tr.even td.sorting_2 {
398 | background-color: #F2F3FF;
399 | }
400 |
401 | tr.even td.sorting_3 {
402 | background-color: #F9F9FF;
403 | }
404 |
405 |
406 | /* For the Conditional-CSS grading rows */
407 | /*
408 | Colour calculations (based off the main row colours)
409 | Level 1:
410 | dd > c4
411 | ee > d5
412 | Level 2:
413 | dd > d1
414 | ee > e2
415 | */
416 | tr.odd.gradeA td.sorting_1 {
417 | background-color: #c4ffc4;
418 | }
419 |
420 | tr.odd.gradeA td.sorting_2 {
421 | background-color: #d1ffd1;
422 | }
423 |
424 | tr.odd.gradeA td.sorting_3 {
425 | background-color: #d1ffd1;
426 | }
427 |
428 | tr.even.gradeA td.sorting_1 {
429 | background-color: #d5ffd5;
430 | }
431 |
432 | tr.even.gradeA td.sorting_2 {
433 | background-color: #e2ffe2;
434 | }
435 |
436 | tr.even.gradeA td.sorting_3 {
437 | background-color: #e2ffe2;
438 | }
439 |
440 | tr.odd.gradeC td.sorting_1 {
441 | background-color: #c4c4ff;
442 | }
443 |
444 | tr.odd.gradeC td.sorting_2 {
445 | background-color: #d1d1ff;
446 | }
447 |
448 | tr.odd.gradeC td.sorting_3 {
449 | background-color: #d1d1ff;
450 | }
451 |
452 | tr.even.gradeC td.sorting_1 {
453 | background-color: #d5d5ff;
454 | }
455 |
456 | tr.even.gradeC td.sorting_2 {
457 | background-color: #e2e2ff;
458 | }
459 |
460 | tr.even.gradeC td.sorting_3 {
461 | background-color: #e2e2ff;
462 | }
463 |
464 | tr.odd.gradeX td.sorting_1 {
465 | background-color: #ffc4c4;
466 | }
467 |
468 | tr.odd.gradeX td.sorting_2 {
469 | background-color: #ffd1d1;
470 | }
471 |
472 | tr.odd.gradeX td.sorting_3 {
473 | background-color: #ffd1d1;
474 | }
475 |
476 | tr.even.gradeX td.sorting_1 {
477 | background-color: #ffd5d5;
478 | }
479 |
480 | tr.even.gradeX td.sorting_2 {
481 | background-color: #ffe2e2;
482 | }
483 |
484 | tr.even.gradeX td.sorting_3 {
485 | background-color: #ffe2e2;
486 | }
487 |
488 | tr.odd.gradeU td.sorting_1 {
489 | background-color: #c4c4c4;
490 | }
491 |
492 | tr.odd.gradeU td.sorting_2 {
493 | background-color: #d1d1d1;
494 | }
495 |
496 | tr.odd.gradeU td.sorting_3 {
497 | background-color: #d1d1d1;
498 | }
499 |
500 | tr.even.gradeU td.sorting_1 {
501 | background-color: #d5d5d5;
502 | }
503 |
504 | tr.even.gradeU td.sorting_2 {
505 | background-color: #e2e2e2;
506 | }
507 |
508 | tr.even.gradeU td.sorting_3 {
509 | background-color: #e2e2e2;
510 | }
511 |
512 |
513 | /*
514 | * Row highlighting example
515 | */
516 | .ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
517 | background-color: #ECFFB3;
518 | }
519 |
520 | .ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
521 | background-color: #E6FF99;
522 | }
--------------------------------------------------------------------------------
/table-actions.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Using Table Actions
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
61 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
Home
82 |
Wiki
83 |
84 |
85 | Editable DataTable example - Using Table Actions
86 |
87 |
88 |
Preamble
89 |
90 | You can associate custom actions buttons on the particular table rows. Action buttons can be used to edit entire or partial row elements in the popup edit form.
91 |
92 |
93 |
94 |
95 |
96 |
97 |
Live example
98 |
99 |
100 |
101 |
110 |
119 |
120 |
129 |
130 |
139 |
140 |
163 |
164 |
Add 1 Add 2
165 |
166 |
167 |
168 |
169 |
170 | Browser
171 | Platform(s)
172 | Engine version
173 | CSS grade
174 | Edit
175 |
176 |
177 |
178 |
179 |
180 |
181 | Browser
182 | Platform(s)
183 | Engine version
184 | CSS grade
185 | Edit
186 |
187 |
188 |
189 |
190 |
191 |
192 | Internet Explorer 4.0
193 |
194 |
195 | Win 95+
196 |
197 |
198 | 4
199 |
200 |
201 | X
202 |
203 |
204 | Edit Browser Edit Platforms
205 |
206 |
207 |
208 |
209 | Internet Explorer 5.0
210 |
211 |
212 | Win 95+
213 |
214 |
215 | 5
216 |
217 |
218 | C
219 |
220 |
221 | Edit Browser Edit Platforms
222 |
223 |
224 |
225 |
226 | Internet Explorer 5.5
227 |
228 |
229 | Win 95+
230 |
231 |
232 | 5.5
233 |
234 |
235 | A
236 |
237 |
238 | Edit Browser Edit Platforms
239 |
240 |
241 |
242 |
243 | Internet Explorer 6
244 |
245 |
246 | Win 98+
247 |
248 |
249 | 6
250 |
251 |
252 | A
253 |
254 |
255 | Edit Browser Edit Platforms
256 |
257 |
258 |
259 |
260 | Internet Explorer 7
261 |
262 |
263 | Win XP SP2+
264 |
265 |
266 | 7
267 |
268 |
269 | A
270 |
271 |
272 | Edit Browser Edit Platforms
273 |
274 |
275 |
276 |
277 | AOL browser (AOL desktop)
278 |
279 |
280 | Win XP
281 |
282 |
283 | 6
284 |
285 |
286 | A
287 |
288 |
289 | Edit Browser Edit Platforms
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
Additional HTML code
301 |
In the table should be placed links or butons with class names in the format table-action-. Plugin will attach event handlers to these elements. Example is shown below:
302 |
303 | <tr id="6">
304 | <td>
305 | AOL browser (AOL desktop)
306 | </td>
307 | <td>
308 | Win XP
309 | </td>
310 | <td>
311 | 6
312 | </td>
313 | <td>
314 | A
315 | </td>
316 | <td>
317 | <a class="table-action-EditBrowser">Edit Browser</a>
318 | <button type="button" class="table-action-EditPlatforms">Edit Platforms</button>
319 | </td>
320 | </tr>
321 |
322 |
323 |
324 |
In the page should be added forms that will be used for editing records. Elements in the form should have rel attributes that matches table columns. Olso id elements with classes DATARECORDID and ROWID are placed in the form their values will be populated with id of the record and id of the row that will be edited.
325 |
326 | <form id="formEditPlatforms" action="UpdatePlatforms.php" title="Update Platforms">
327 | <input type="hidden" class="DATARECORDID" name="id" />
328 | <input type="hidden" class="ROWID" name="row_id" />
329 | <label for="platforms">Platform(s)</label><br />
330 | <textarea name="platforms" id="Textarea1" class="required" rel="1"></textarea>
331 | <br />
332 | <button id="formEditPlatformsOk" type="submit">Ok</button>
333 | <button id="formEditPlatformsCancel" type="button">Cancel</button>
334 | </form>
335 |
336 |
337 |
338 |
Initialization code
339 |
In the plugin initialization code should be placed definitions of the action.
340 |
341 | $('#example').dataTable()
342 | .makeEditable({
343 | aoTableActions: [
344 | {
345 | sAction: "EditBrowser"
346 | },
347 | {
348 | sAction: "EditPlatforms"
349 | }
350 | ]
351 | });
352 |
353 |
354 |
Other examples
355 |
369 |
370 |
375 |
376 |
377 |
378 |
379 |
380 |
--------------------------------------------------------------------------------
/ajax-popupedit.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Inline delete with ajax source
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
45 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
Home
66 |
Wiki
67 |
68 |
69 | Editable DataTable example - Editing data in the popup window(Beta)
70 |
71 |
72 |
Preamble
73 |
Editable plugin enables you to add "actions" in the table. Action can be Editing columns in the popup.
74 |
75 |
76 |
77 |
78 |
79 |
80 |
Live example
81 |
82 |
83 |
84 |
121 |
122 |
123 |
151 |
152 |
153 |
154 |
155 |
156 |
157 | Browser
158 | Platform(s)
159 | Engine version
160 | CSS grade
161 | Status
162 | Edit
163 | Details
164 |
165 |
166 |
167 |
168 | Internet Explorer 4.0
169 |
170 |
171 | Win 95+
172 |
173 |
174 | 4
175 |
176 |
177 | X
178 |
179 |
180 | Retired
181 | Edit
182 | Details
184 |
185 |
186 | Internet Explorer 5.0
187 |
188 |
189 | Win 95+
190 |
191 |
192 | 5,5.5
193 |
194 |
195 | C
196 |
197 |
198 | Retired
199 | Edit
200 | Details
202 |
203 |
204 | Internet Explorer 5.5
205 |
206 |
207 | Win 95+
208 |
209 |
210 | 5.5
211 |
212 |
213 | A
214 |
215 |
216 | Retired
217 | Edit
218 | Details
220 |
221 |
222 | Internet Explorer 6
223 |
224 |
225 | Win 98+
226 |
227 |
228 | 6
229 |
230 |
231 | A
232 |
233 |
234 | Live
235 | Edit
236 | Details
238 |
239 |
240 | Internet Explorer 7
241 |
242 |
243 | Win XP SP2+
244 |
245 |
246 | 7
247 |
248 |
249 | A
250 |
251 |
252 | Live
253 | Edit
254 | Details
256 |
257 |
258 | AOL browser (AOL desktop)
259 |
260 |
261 | Win XP
262 |
263 |
264 | 6
265 |
266 |
267 | A
268 |
269 |
270 | Retired
271 | Edit
272 | Details
274 |
275 |
276 |
277 |
278 |
279 |
Initialization code
280 |
To initialize action, the action definition in the aoTableActions array. Action definition should contain name of the action,
281 | URL of the server-side page that will be called, and dialog options that will be passed to the action popup dialog.
282 |
$(document).ready(function () {
283 | $('#example').dataTable()
284 | .makeEditable({
285 | aoTableActions: [
286 | {
287 | sAction: "EditData",
288 | sServerActionURL: "UpdateData.php",
289 | oFormOptions: { autoOpen: false, modal:true }
290 | }
291 | ],
292 | sUpdateURL: "UpdateData.php",
293 | sAddURL: "AddData.php",
294 | sDeleteURL: "DeleteData.php",
295 | aoColumns: [ { } , { } , { } , { } , null ]
296 | });
297 |
298 | });
299 |
300 |
Action form
301 |
One action form that will be loaded from the form and update row cells should be defined.
302 | This form should have the following properties:
303 |
304 | id of the form should be form(ACTION NAME)
305 | Elements of the form should have rel attributes that match table cells by id
306 | There should be ok and cancel buttons with the ids form(ACTION NAME)Ok nd form(ACTION NAME)Cancel
307 |
308 | Example is shown below:
309 |
310 |
311 |
<form id="formEditData" action="UpdateData.php" title="Update Platforms">
312 | <label for="browser">Browser</label><br />
313 | <input type="text" name="browser" id="browser" class="required" rel="0" />
314 | <br />
315 | <label for="platforms">Platform(s)</label><br />
316 | <textarea name="platforms" id="Textarea1" class="required" rel="1"></textarea>
317 | <br />
318 | <label for="version">Engine version</label><br />
319 | <select name="version" id="version" rel="2">
320 | <option>1.5</option>
321 | <option>1.7</option>
322 | <option>1.8</option>
323 | <option>1.5</option>
324 | <option>4</option>
325 | <option>5</option>
326 | <option>5.5</option>
327 | <option>6</option>
328 | <option>7</option>
329 | </select>
330 | <br />
331 | <label for="grade">CSS grade</label><br />
332 | <input type="radio" name="grade" value="A" rel="3"> First<br>
333 | <input type="radio" name="grade" value="B" rel="3"> Second<br>
334 | <input type="radio" name="grade" value="C" rel="3"> Third
335 | <input type="radio" name="grade" value="X" rel="3"> The Worst
336 | <br />
337 | <button id="formEditDataOk" type="submit">Ok</button>
338 | <button id="formEditDataCancel" type="button">Cancel</button>
339 | </form>
340 |
341 |
342 |
Starting actions
343 |
Each table row should have a link with id table-action-(ACTION NAME) that will start the action.
344 |
Other examples
345 |
359 |
360 |
365 |
366 |
367 |
368 |
369 |
370 |
--------------------------------------------------------------------------------
/custom-edit-events.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
Using DataTable with Editable plugin - Custom Column Editors
9 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
52 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
Home
73 |
Wiki
74 |
75 |
76 | Editable DataTable example - custom edit events
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
Live example
86 |
87 |
88 |
89 |
90 |
91 |
92 | Select
93 | Browser
94 | Platform(s)
95 | Engine version
96 | CSS grade
97 |
98 |
99 |
100 |
101 |
102 | Browser
104 | Platform(s)
105 | Engine version
106 | CSS grade
107 |
108 |
109 |
110 |
111 |
112 | Internet Explorer 4.0
114 | Win 95+ (Entity: &)
115 | 4
116 |
117 | X
118 |
119 |
120 | Internet Explorer 5.0
122 | Win 95+
123 | 5
124 |
125 | C
126 |
127 |
128 | Internet Explorer 5.5
130 | Win 95+
131 | 5.5
132 |
133 | A
134 |
135 |
136 | Internet Explorer 6
138 | Win 98+
139 | 6
140 |
141 | A
142 |
143 |
144 | Internet Explorer 7
146 | Win XP SP2+
147 | 7
148 |
149 | A
150 |
151 |
152 | AOL browser (AOL desktop)
154 | Win XP
155 | 6
156 |
157 | A
158 |
159 |
160 | Firefox 1.0
162 | Win 98+ / OSX.2+
163 | 1.7
164 |
165 | A
166 |
167 |
168 | Firefox 1.5
170 | Win 98+ / OSX.2+
171 | 1.8
172 |
173 | A
174 |
175 |
176 | Firefox 2.0
178 | Win 98+ / OSX.2+
179 | 1.8
180 |
181 | A
182 |
183 |
184 | Firefox 3.0
186 | Win 2k+ / OSX.3+
187 | 1.9
188 |
189 | A
190 |
191 |
192 | Camino 1.0
194 | OSX.2+
195 | 1.8
196 |
197 | A
198 |
199 |
200 | Camino 1.5
202 | OSX.3+
203 | 1.8
204 |
205 | A
206 |
207 |
208 | Netscape 7.2
210 | Win 95+ / Mac OS 8.6-9.2
211 | 1.7
212 |
213 | A
214 |
215 |
216 | Netscape Browser 8
218 | Win 98SE+
219 | 1.7
220 |
221 | A
222 |
223 |
224 | Netscape Navigator 9
226 | Win 98+ / OSX.2+
227 | 1.8
228 |
229 | A
230 |
231 |
232 | Mozilla 1.0
234 | Win 95+ / OSX.1+
235 | 1
236 |
237 | A
238 |
239 |
240 | Mozilla 1.1
242 | Win 95+ / OSX.1+
243 | 1.1
244 |
245 | A
246 |
247 |
248 | Mozilla 1.2
250 | Win 95+ / OSX.1+
251 | 1.2
252 |
253 | A
254 |
255 |
256 | Mozilla 1.3
258 | Win 95+ / OSX.1+
259 | 1.3
260 |
261 | A
262 |
263 |
264 | Mozilla 1.4
266 | Win 95+ / OSX.1+
267 | 1.4
268 |
269 | A
270 |
271 |
272 | Mozilla 1.5
274 | Win 95+ / OSX.1+
275 | 1.5
276 |
277 | A
278 |
279 |
280 | Mozilla 1.6
282 | Win 95+ / OSX.1+
283 | 1.6
284 |
285 | A
286 |
287 |
288 | Mozilla 1.7
290 | Win 98+ / OSX.1+
291 | 1.7
292 |
293 | A
294 |
295 |
296 | Mozilla 1.8
298 | Win 98+ / OSX.1+
299 | 1.8
300 |
301 | A
302 |
303 |
304 | Seamonkey 1.1
306 | Win 98+ / OSX.2+
307 | 1.8
308 |
309 | A
310 |
311 |
312 | Epiphany 2.20
314 | Gnome
315 | 1.8
316 |
317 | A
318 |
319 |
320 | Safari 1.2
322 | OSX.3
323 | 125.5
324 |
325 | A
326 |
327 |
328 | Safari 1.3
330 | OSX.3
331 | 312.8
332 |
333 | A
334 |
335 |
336 | Safari 2.0
338 | OSX.4+
339 | 419.3
340 |
341 | A
342 |
343 |
344 | Safari 3.0
346 | OSX.4+
347 | 522.1
348 |
349 | A
350 |
351 |
352 | OmniWeb 5.5
354 | OSX.4+
355 | 420
356 |
357 | A
358 |
359 |
360 | iPod Touch / iPhone
362 | iPod
363 | 420.1
364 |
365 | A
366 |
367 |
368 | S60
370 | S60
371 | 413
372 |
373 | A
374 |
375 |
376 | Opera 7.0
378 | Win 95+ / OSX.1+
379 | -
380 |
381 | A
382 |
383 |
384 | Opera 7.5
386 | Win 95+ / OSX.2+
387 | -
388 |
389 | A
390 |
391 |
392 | Opera 8.0
394 | Win 95+ / OSX.2+
395 | -
396 |
397 | A
398 |
399 |
400 | Opera 8.5
402 | Win 95+ / OSX.2+
403 | -
404 |
405 | A
406 |
407 |
408 | Opera 9.0
410 | Win 95+ / OSX.3+
411 | -
412 |
413 | A
414 |
415 |
416 | Opera 9.2
418 | Win 88+ / OSX.3+
419 | -
420 |
421 | A
422 |
423 |
424 | Opera 9.5
426 | Win 88+ / OSX.3+
427 | -
428 |
429 | A
430 |
431 |
432 | Opera for Wii
434 | Wii
435 | -
436 |
437 | A
438 |
439 |
440 | Nokia N800
442 | N800
443 | -
444 |
445 | A
446 |
447 |
448 | Nintendo DS browser
450 | Nintendo DS
451 | 8.5
452 |
453 | C/A1
454 |
455 |
456 | Konqureror 3.1
458 | KDE 3.1
459 |
460 | 3.1
461 | C
462 |
463 |
464 | Konqureror 3.3
466 | KDE 3.3
467 |
468 | 3.3
469 | A
470 |
471 |
472 | Konqureror 3.5
474 | KDE 3.5
475 |
476 | 3.5
477 | A
478 |
479 |
480 | Internet Explorer 4.5
482 | Mac OS 8-9
483 |
484 | -
485 | X
486 |
487 |
488 | Internet Explorer 5.1
490 | Mac OS 7.6-9
491 |
492 | 1
493 | C
494 |
495 |
496 | Internet Explorer 5.2
498 | Mac OS 8-X
499 |
500 | 1
501 | C
502 |
503 |
504 | NetFront 3.1
506 | Embedded devices
507 |
508 | -
509 | C
510 |
511 |
512 | NetFront 3.4
514 | Embedded devices
515 |
516 | -
517 | A
518 |
519 |
520 | Dillo 0.8
522 | Embedded devices
523 |
524 | -
525 | X
526 |
527 |
528 | Links
530 | Text only
531 |
532 | -
533 | X
534 |
535 |
536 | Lynx
538 | Text only
539 |
540 | -
541 | X
542 |
543 |
544 | IE Mobile
546 | Windows Mobile 6
547 |
548 | -
549 | C
550 |
551 |
552 | PSP browser
554 | PSP
555 |
556 | -
557 | C
558 |
559 |
560 | Other browsers
561 | All others
562 | -
563 |
564 | -
565 | U
566 |
567 |
568 |
569 |
570 |
571 |
572 |
573 |
Other examples
574 |
588 |
589 |
594 |
595 |
596 |
597 |
598 |
--------------------------------------------------------------------------------