This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Table Data Grids

Organize data in a sortable data grid.

Local: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
<!-- DC DataGrid CSS -->
<link rel="stylesheet" href="dcodes/datagrid/css/dc_datagrid.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC DataGrid JS -->
<script type="text/javascript" src="dcodes/datagrid/js/dc_datagrid.js"></script>

Hosted: CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
<!-- DC DataGrid CSS -->
<link rel="stylesheet" href="http://cdn.dcodes.net/2/datagrid/css/dc_datagrid.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC DataGrid JS -->
<script type="text/javascript" src="http://cdn.dcodes.net/2/datagrid/js/dc_datagrid.js"></script>

Sortable DataGrid

Features: Global/Field Search, Sort Any Data, Auto Pagination, Calculate Averages, Calculate Totals (real-time).

Records 1-10 of 15
reset
ID
Name
Phone
Birthdate
Last Access
Rating
Done
Salary
Score
10 Baker Osborn (378) 371-0559 03/29/1970 July 23, 2011 -7 61% $2,868 0.1
9 Caldwell Larson (850) 562-3177 07/20/1985 June 15, 2012 -3 81% $63,736 7.5
12 Fletcher Briggs (992) 962-9419 08/12/1971 December 12, 2006 7 23% $142,448 8.9
15 Ginger Bell (934) 692-7294 06/10/1957 April 13, 2003 -10 74% $112,997 4.5
8 Harper Bowen (810) 652-6704 10/26/1973 May 29, 2011 5 49% $73,197 4.5
6 Imani Murphy (771) 294-6690 10/23/1970 December 08, 1996 -1 30% $113,763 4.9
2 Jaquelyn Pace (921) 943-5780 06/03/1957 October 20, 2010 -7 33% $130,752 4.9
1 John Hart (627) 536-4760 12/02/1962 March 26, 2012 -7 7% $73,229 6.9
4 Keane Raymond (605) 803-1561 07/30/1982 July 24, 1996 5 20% $7,023 9.5
3 Lois Pickett (835) 361-5993 10/15/1983 June 01, 1999 4 44% $48,684 5.5
        88.7
      44%$82,3495.91
Entries Per Page
Page 1 of 2

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!-- DC DataGrid Start -->
<div id="tsort-tablewrapper" style="width:90%;">
  <div id="tsort-tableheader">
    <div class="tsort-search">
      <select id="tsort-columns" onchange="sorter.search('query')">
      </select>
      <input type="text" id="query" onkeyup="sorter.search('query')" />
    </div>
    <span class="tsort-details">
    <div>Records <span id="tsort-startrecord"></span>-<span id="tsort-endrecord"></span> of <span id="tsort-totalrecords"></span></div>
    <div><a href="javascript:sorter.reset()">reset</a></div>
    </span> </div>
  <table cellpadding="0" cellspacing="0" border="0" id="tsctablesort1" class="tinytable">
    <thead>
      <tr>
        <th class="nosort"><h5>ID</h5></th>
        <th><h5>Name</h5></th>
        <th><h5>Phone</h5></th>
        <th><h5>Birthdate</h5></th>
        <th><h5>Last Access</h5></th>
        <th><h5>Rating</h5></th>
        <th><h5>Done</h5></th>
        <th><h5>Salary</h5></th>
        <th><h5>Score</h5></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Hart</td>
        <td>(627) 536-4760</td>
        <td>12/02/1962</td>
        <td>March 26, 2012</td>
        <td>-7</td>
        <td>7%</td>
        <td>$73,229</td>
        <td>6.9</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jaquelyn Pace</td>
        <td>(921) 943-5780</td>
        <td>06/03/1957</td>
        <td>October 20, 2010</td>
        <td>-7</td>
        <td>33%</td>
        <td>$130,752</td>
        <td>4.9</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Lois Pickett</td>
        <td>(835) 361-5993</td>
        <td>10/15/1983</td>
        <td>June 01, 1999</td>
        <td>4</td>
        <td>44%</td>
        <td>$48,684</td>
        <td>5.5</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Keane Raymond</td>
        <td>(605) 803-1561</td>
        <td>07/30/1982</td>
        <td>July 24, 1996</td>
        <td>5</td>
        <td>20%</td>
        <td>$7,023</td>
        <td>9.5</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Porter Thomas</td>
        <td>(666) 569-9894</td>
        <td>09/27/1986</td>
        <td>December 05, 2007</td>
        <td>1</td>
        <td>66%</td>
        <td>$69,875</td>
        <td>0.9</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Imani Murphy</td>
        <td>(771) 294-6690</td>
        <td>10/23/1970</td>
        <td>December 08, 1996</td>
        <td>-1</td>
        <td>30%</td>
        <td>$113,763</td>
        <td>4.9</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Zachery Guthrie</td>
        <td>(851) 784-4129</td>
        <td>12/22/1972</td>
        <td>September 20, 2002</td>
        <td>-5</td>
        <td>24%</td>
        <td>$130,248</td>
        <td>6.9</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Harper Bowen</td>
        <td>(810) 652-6704</td>
        <td>10/26/1973</td>
        <td>May 29, 2011</td>
        <td>5</td>
        <td>49%</td>
        <td>$73,197</td>
        <td>4.5</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Caldwell Larson</td>
        <td>(850) 562-3177</td>
        <td>07/20/1985</td>
        <td>June 15, 2012</td>
        <td>-3</td>
        <td>81%</td>
        <td>$63,736</td>
        <td>7.5</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Baker Osborn</td>
        <td>(378) 371-0559</td>
        <td>03/29/1970</td>
        <td>July 23, 2011</td>
        <td>-7</td>
        <td>61%</td>
        <td>$2,868</td>
        <td>0.1</td>
      </tr>
      <tr>
        <td>11</td>
        <td>Yael Owens</td>
        <td>(465) 520-1801</td>
        <td>08/10/1963</td>
        <td>April 09, 1997</td>
        <td>10</td>
        <td>85%</td>
        <td>$126,469</td>
        <td>8.9</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Fletcher Briggs</td>
        <td>(992) 962-9419</td>
        <td>08/12/1971</td>
        <td>December 12, 2006</td>
        <td>7</td>
        <td>23%</td>
        <td>$142,448</td>
        <td>8.9</td>
      </tr>
      <tr>
        <td>13</td>
        <td>Maggy Murphy</td>
        <td>(585) 210-0390</td>
        <td>07/11/1968</td>
        <td>April 02, 2007</td>
        <td>9</td>
        <td>31%</td>
        <td>$40,267</td>
        <td>6.9</td>
      </tr>
      <tr>
        <td>14</td>
        <td>Maggie Blake</td>
        <td>(489) 101-5447</td>
        <td>04/11/1970</td>
        <td>May 24, 2008</td>
        <td>-2</td>
        <td>32%</td>
        <td>$99,686</td>
        <td>7.9</td>
      </tr>
      <tr>
        <td>15</td>
        <td>Ginger Bell</td>
        <td>(934) 692-7294</td>
        <td>06/10/1957</td>
        <td>April 13, 2003</td>
        <td>-10</td>
        <td>74%</td>
        <td>$112,997</td>
        <td>4.5</td>
      </tr>
    </tbody>
  </table>
  <div id="tsort-tablefooter">
    <div id="tsort-tablenav">
      <div> <img src="dcodes/datagrid/images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" /> <img src="dcodes/datagrid/images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" /> <img src="dcodes/datagrid/images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" /> <img src="dcodes/datagrid/images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" /> </div>
      <div>
        <select id="tsort-pagedropdown">
        </select>
      </div>
      <div> <a href="javascript:sorter.showall()">view all</a> </div>
    </div>
    <div id="tsort-tablelocation">
      <div>
        <select onchange="sorter.size(this.value)">
          <option value="5">5</option>
          <option value="10" selected="selected">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
        <span>Entries Per Page</span> </div>
      <div class="tsort-page">Page <span id="tsort-currentpage"></span> of <span id="tsort-totalpages"></span></div>
    </div>
  </div>
</div>
<!-- DC DataGrid Settings -->
<script type="text/javascript">
    var sorter = new TINY.table.sorter('sorter','tsctablesort1',{
        headclass:'head',
        ascclass:'asc',
        descclass:'desc',
        evenclass:'tsort-evenrow',
        oddclass:'tsort-oddrow',
        evenselclass:'tsort-evenselected',
        oddselclass:'tsort-oddselected',
        paginate:true, // pagination (true,false)
        size:10, // show 10 results per page
        colddid:'tsort-columns',
        currentid:'tsort-currentpage',
        totalid:'tsort-totalpages',
        startingrecid:'tsort-startrecord',
        endingrecid:'tsort-endrecord',
        totalrecid:'tsort-totalrecords',
        hoverid:'tsort-selectedrow',
        pageddid:'tsort-pagedropdown',
        navid:'tsort-tablenav',
        sortcolumn:1, // sort column 1
        sortdir:1, // sort direction
        sum:[8], // create totalsum for column 8
        avg:[6,7,8,9], // create averages for column 6,7,8,9
        columns:[{index:6, format:'%', decimals:1},{index:7, format:'$', decimals:0}], // classify for proper sorting
        init:true // activate datagrid (true,false)
    });
  </script>
<!-- DC DataGrid End -->
<div class="dc_clear"></div> <!-- line break/clear line -->

Fixed Table Header

Scroll document to see static header in effect.

Country Military Spending ($) Army Size
Country Military Spending ($) Army Size
All Countries $1,546,529,200,000 60,000,000
United States $711,000,000,000 2,927,754
China $228,000,000,000 4,585,000
Russia $93,700,000,000 2,230,000
UK $57,500,000,000 410,180
France $50,100,000,000 469,461
Japan $59,300,000,000 284,350
Saudi Arabia $48,200,000,000 249,000
India $46,800,000,000 4,768,407
Germany $46,700,000,000 451,425
Brazil $35,400,000,000 1,667,710
Italy $34,500,000,000 478,002
North Korea $10,000,000,000 9,495,000
South Korea $30,800,000,000 8,691,500

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!-- DC Fixed Table Header Settings -->
<script type="text/javascript">
    $(document).ready(function(){
     
        $("#fixed-table1").chromatable({
         
                width: "600px", // specify 100%, auto, or a fixed pixel amount
                height: "200px",
                scrolling: "yes" // must have the jquery-1.3.2.min.js script installed to use
                 
            });
             
    });
     
</script>
<!-- DC Fixed Table Header Start -->
<table id="fixed-table1" class="dc_fixed_tables" width="100%" border="0" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th>Country</th>
      <th>Military Spending ($)</th>
      <th>Army Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>All Countries</td>
      <td>$1,546,529,200,000</td>
      <td>60,000,000</td>
    </tr>
    <tr>
      <td>United States</td>
      <td>$711,000,000,000</td>
      <td>2,927,754</td>
    </tr>
    <tr>
      <td>China</td>
      <td>$228,000,000,000</td>
      <td>4,585,000</td>
    </tr>
    <tr>
      <td>Russia</td>
      <td>$93,700,000,000</td>
      <td>2,230,000</td>
    </tr>
    <tr>
      <td>UK</td>
      <td>$57,500,000,000</td>
      <td>410,180</td>
    </tr>
    <tr>
      <td>France</td>
      <td>$50,100,000,000</td>
      <td>469,461</td>
    </tr>
    <tr>
      <td>Japan</td>
      <td>$59,300,000,000</td>
      <td>284,350</td>
    </tr>
    <tr>
      <td>Saudi Arabia</td>
      <td>$48,200,000,000</td>
      <td>249,000</td>
    </tr>
    <tr>
      <td>India</td>
      <td>$46,800,000,000</td>
      <td>4,768,407 </td>
    </tr>
    <tr>
      <td>Germany</td>
      <td>$46,700,000,000</td>
      <td>451,425</td>
    </tr>
    <tr>
      <td>Brazil</td>
      <td>$35,400,000,000</td>
      <td>1,667,710</td>
    </tr>
    <tr>
      <td>Italy</td>
      <td>$34,500,000,000</td>
      <td>478,002</td>
    </tr>
    <tr>
      <td>North Korea</td>
      <td>$10,000,000,000</td>
      <td>9,495,000</td>
    </tr>
    <tr>
      <td>South Korea</td>
      <td>$30,800,000,000</td>
      <td>8,691,500</td>
    </tr>
  </tbody>
</table>
<!-- DC Fixed Table Header End -->
<div class="dc_clear"></div> <!-- line break/clear line -->


© TemplateAccess