Ajax Loader
×

Untitled

HTML
<script src="https://www.datatables.net/release-datatables/media/js/jquery.js"></script>
1
<script src="https://www.datatables.net/release-datatables/media/js/jquery.js"></script>
2
<script src="https://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
3
<script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
4
<script src="https://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.min.js"></script>
5
<script src="http://datatables.net/release-datatables/extensions/ColVis/js/dataTables.colVis.js"></script>
6
<script src="https://datatables.net/release-datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
7
 
8
 
9
 
10
<link rel="stylesheet" type="text/css" href="https://www.datatables.net/release-datatables/media/css/jquery.dataTables.css" />
11
<link rel="stylesheet" type="text/css" href="https://www.datatables.net/release-datatables/extensions/ColReorder/css/dataTables.colReorder.css" />
12
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css" />
13
<link rel="stylesheet" type="text/css" href="http://datatables.net/release-datatables/extensions/ColVis/css/dataTables.colVis.css" />
14
<link rel="stylesheet" type="text/css" href="https://datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css" />
15
 
16
 
17
<table id="example" class="display responsive no-wrap" cellspacing="0" width="100%">
18
    <thead>
19
        <tr>
20
            <th>Name</th>
21
            <th>Position</th>
22
            <th>Office</th>
23
            <th>Age</th>
24
            <th>Start date</th>
25
            <th>Salary</th>
26
        </tr>
27
    </thead>
28
 
29
    <tbody>
30
        <tr>
31
            <td>Tiger Nixon</td>
32
            <td>System Architect</td>
33
            <td>Edinburgh</td>
34
            <td>61</td>
35
            <td>2011/04/25</td>
36
            <td>$320,800</td>
37
        </tr>
38
        <tr>
39
            <td>Garrett Winters</td>
40
            <td>Accountant</td>
41
            <td>Tokyo</td>
42
            <td>63</td>
43
            <td>2011/07/25</td>
44
            <td>$170,750</td>
45
        </tr>
46
        <tr>
47
            <td>Ashton Cox</td>
48
            <td>Junior Technical Author</td>
49
            <td>San Francisco</td>
50
            <td>66</td>
51
            <td>2009/01/12</td>
52
            <td>$86,000</td>
53
        </tr>
54
        <tr>
55
            <td>Cedric Kelly</td>
56
            <td>Senior Javascript Developer</td>
57
            <td>Edinburgh</td>
58
            <td>22</td>
59
            <td>2012/03/29</td>
60
            <td>$433,060</td>
61
        </tr>
62
        <tr>
63
            <td>Airi Satou</td>
64
            <td>Accountant</td>
65
            <td>Tokyo</td>
66
            <td>33</td>
67
            <td>2008/11/28</td>
68
            <td>$162,700</td>
69
        </tr>
70
        <tr>
71
            <td>Brielle Williamson</td>
72
            <td>Integration Specialist</td>
73
            <td>New York</td>
74
            <td>61</td>
75
            <td>2012/12/02</td>
76
            <td>$372,000</td>
77
        </tr>
78
        <tr>
79
            <td>Herrod Chandler</td>
80
            <td>Sales Assistant</td>
81
            <td>San Francisco</td>
82
            <td>59</td>
83
            <td>2012/08/06</td>
84
            <td>$137,500</td>
85
        </tr>
86
        <tr>
87
            <td>Rhona Davidson</td>
88
            <td>Integration Specialist</td>
89
            <td>Tokyo</td>
90
            <td>55</td>
91
            <td>2010/10/14</td>
92
            <td>$327,900</td>
93
        </tr>
94
        <tr>
95
            <td>Colleen Hurst</td>
96
            <td>Javascript Developer</td>
97
            <td>San Francisco</td>
98
            <td>39</td>
99
            <td>2009/09/15</td>
100
            <td>$205,500</td>
101
        </tr>
102
        <tr>
103
            <td>Sonya Frost</td>
104
            <td>Software Engineer</td>
105
            <td>Edinburgh</td>
106
            <td>23</td>
107
            <td>2008/12/13</td>
108
            <td>$103,600</td>
109
        </tr>
110
        <tr>
111
            <td>Jena Gaines</td>
112
            <td>Office Manager</td>
113
            <td>London</td>
114
            <td>30</td>
115
            <td>2008/12/19</td>
116
            <td>$90,560</td>
117
        </tr>
118
        <tr>
119
            <td>Quinn Flynn</td>
120
            <td>Support Lead</td>
121
            <td>Edinburgh</td>
122
            <td>22</td>
123
            <td>2013/03/03</td>
124
            <td>$342,000</td>
125
        </tr>
126
        <tr>
127
            <td>Charde Marshall</td>
128
            <td>Regional Director</td>
129
            <td>San Francisco</td>
130
            <td>36</td>
131
            <td>2008/10/16</td>
132
            <td>$470,600</td>
133
        </tr>
134
        <tr>
135
            <td>Haley Kennedy</td>
136
            <td>Senior Marketing Designer</td>
137
            <td>London</td>
138
            <td>43</td>
139
            <td>2012/12/18</td>
140
            <td>$313,500</td>
141
        </tr>
142
        <tr>
143
            <td>Tatyana Fitzpatrick</td>
144
            <td>Regional Director</td>
145
            <td>London</td>
146
            <td>19</td>
147
            <td>2010/03/17</td>
148
            <td>$385,750</td>
149
        </tr>
150
        <tr>
151
            <td>Michael Silva</td>
152
            <td>Marketing Designer</td>
153
            <td>London</td>
154
            <td>66</td>
155
            <td>2012/11/27</td>
156
            <td>$198,500</td>
157
        </tr>
158
        <tr>
159
            <td>Paul Byrd</td>
160
            <td>Chief Financial Officer (CFO)</td>
161
            <td>New York</td>
162
            <td>64</td>
163
            <td>2010/06/09</td>
164
            <td>$725,000</td>
165
        </tr>
166
        <tr>
167
            <td>Gloria Little</td>
168
            <td>Systems Administrator</td>
169
            <td>New York</td>
170
            <td>59</td>
171
            <td>2009/04/10</td>
172
            <td>$237,500</td>
173
        </tr>
174
        <tr>
175
            <td>Bradley Greer</td>
176
            <td>Software Engineer</td>
177
            <td>London</td>
178
            <td>41</td>
179
            <td>2012/10/13</td>
180
            <td>$132,000</td>
181
        </tr>
182
        <tr>
183
            <td>Dai Rios</td>
184
            <td>Personnel Lead</td>
185
            <td>Edinburgh</td>
186
            <td>35</td>
187
            <td>2012/09/26</td>
188
            <td>$217,500</td>
189
        </tr>
190
        <tr>
191
            <td>Jenette Caldwell</td>
192
            <td>Development Lead</td>
193
            <td>New York</td>
194
            <td>30</td>
195
            <td>2011/09/03</td>
196
            <td>$345,000</td>
197
        </tr>
198
        <tr>
199
            <td>Yuri Berry</td>
200
            <td>Chief Marketing Officer (CMO)</td>
201
            <td>New York</td>
202
            <td>40</td>
203
            <td>2009/06/25</td>
204
            <td>$675,000</td>
205
        </tr>
206
        <tr>
207
            <td>Caesar Vance</td>
208
            <td>Pre-Sales Support</td>
209
            <td>New York</td>
210
            <td>21</td>
211
            <td>2011/12/12</td>
212
            <td>$106,450</td>
213
        </tr>
214
        <tr>
215
            <td>Doris Wilder</td>
216
            <td>Sales Assistant</td>
217
            <td>Sidney</td>
218
            <td>23</td>
219
            <td>2010/09/20</td>
220
            <td>$85,600</td>
221
        </tr>
222
        <tr>
223
            <td>Angelica Ramos</td>
224
            <td>Chief Executive Officer (CEO)</td>
225
            <td>London</td>
226
            <td>47</td>
227
            <td>2009/10/09</td>
228
            <td>$1,200,000</td>
229
        </tr>
230
        <tr>
231
            <td>Gavin Joyce</td>
232
            <td>Developer</td>
233
            <td>Edinburgh</td>
234
            <td>42</td>
235
            <td>2010/12/22</td>
236
            <td>$92,575</td>
237
        </tr>
238
        <tr>
239
            <td>Jennifer Chang</td>
240
            <td>Regional Director</td>
241
            <td>Singapore</td>
242
            <td>28</td>
243
            <td>2010/11/14</td>
244
            <td>$357,650</td>
245
        </tr>
246
        <tr>
247
            <td>Brenden Wagner</td>
248
            <td>Software Engineer</td>
249
            <td>San Francisco</td>
250
            <td>28</td>
251
            <td>2011/06/07</td>
252
            <td>$206,850</td>
253
        </tr>
254
        <tr>
255
            <td>Fiona Green</td>
256
            <td>Chief Operating Officer (COO)</td>
257
            <td>San Francisco</td>
258
            <td>48</td>
259
            <td>2010/03/11</td>
260
            <td>$850,000</td>
261
        </tr>
262
        <tr>
263
            <td>Shou Itou</td>
264
            <td>Regional Marketing</td>
265
            <td>Tokyo</td>
266
            <td>20</td>
267
            <td>2011/08/14</td>
268
            <td>$163,000</td>
269
        </tr>
270
        <tr>
271
            <td>Michelle House</td>
272
            <td>Integration Specialist</td>
273
            <td>Sidney</td>
274
            <td>37</td>
275
            <td>2011/06/02</td>
276
            <td>$95,400</td>
277
        </tr>
278
        <tr>
279
            <td>Suki Burks</td>
280
            <td>Developer</td>
281
            <td>London</td>
282
            <td>53</td>
283
            <td>2009/10/22</td>
284
            <td>$114,500</td>
285
        </tr>
286
        <tr>
287
            <td>Prescott Bartlett</td>
288
            <td>Technical Author</td>
289
            <td>London</td>
290
            <td>27</td>
291
            <td>2011/05/07</td>
292
            <td>$145,000</td>
293
        </tr>
294
        <tr>
295
            <td>Gavin Cortez</td>
296
            <td>Team Leader</td>
297
            <td>San Francisco</td>
298
            <td>22</td>
299
            <td>2008/10/26</td>
300
            <td>$235,500</td>
301
        </tr>
302
        <tr>
303
            <td>Martena Mccray</td>
304
            <td>Post-Sales support</td>
305
            <td>Edinburgh</td>
306
            <td>46</td>
307
            <td>2011/03/09</td>
308
            <td>$324,050</td>
309
        </tr>
310
        <tr>
311
            <td>Unity Butler</td>
312
            <td>Marketing Designer</td>
313
            <td>San Francisco</td>
314
            <td>47</td>
315
            <td>2009/12/09</td>
316
            <td>$85,675</td>
317
        </tr>
318
        <tr>
319
            <td>Howard Hatfield</td>
320
            <td>Office Manager</td>
321
            <td>San Francisco</td>
322
            <td>51</td>
323
            <td>2008/12/16</td>
324
            <td>$164,500</td>
325
        </tr>
326
        <tr>
327
            <td>Hope Fuentes</td>
328
            <td>Secretary</td>
329
            <td>San Francisco</td>
330
            <td>41</td>
331
            <td>2010/02/12</td>
332
            <td>$109,850</td>
333
        </tr>
334
        <tr>
335
            <td>Vivian Harrell</td>
336
            <td>Financial Controller</td>
337
            <td>San Francisco</td>
338
            <td>62</td>
339
            <td>2009/02/14</td>
340
            <td>$452,500</td>
341
        </tr>
342
        <tr>
343
            <td>Timothy Mooney</td>
344
            <td>Office Manager</td>
345
            <td>London</td>
346
            <td>37</td>
347
            <td>2008/12/11</td>
348
            <td>$136,200</td>
349
        </tr>
350
        <tr>
351
            <td>Jackson Bradshaw</td>
352
            <td>Director</td>
353
            <td>New York</td>
354
            <td>65</td>
355
            <td>2008/09/26</td>
356
            <td>$645,750</td>
357
        </tr>
358
        <tr>
359
            <td>Olivia Liang</td>
360
            <td>Support Engineer</td>
361
            <td>Singapore</td>
362
            <td>64</td>
363
            <td>2011/02/03</td>
364
            <td>$234,500</td>
365
        </tr>
366
        <tr>
367
            <td>Bruno Nash</td>
368
            <td>Software Engineer</td>
369
            <td>London</td>
370
            <td>38</td>
371
            <td>2011/05/03</td>
372
            <td>$163,500</td>
373
        </tr>
374
        <tr>
375
            <td>Sakura Yamamoto</td>
376
            <td>Support Engineer</td>
377
            <td>Tokyo</td>
378
            <td>37</td>
379
            <td>2009/08/19</td>
380
            <td>$139,575</td>
381
        </tr>
382
        <tr>
383
            <td>Thor Walton</td>
384
            <td>Developer</td>
385
            <td>New York</td>
386
            <td>61</td>
387
            <td>2013/08/11</td>
388
            <td>$98,540</td>
389
        </tr>
390
        <tr>
391
            <td>Finn Camacho</td>
392
            <td>Support Engineer</td>
393
            <td>San Francisco</td>
394
            <td>47</td>
395
            <td>2009/07/07</td>
396
            <td>$87,500</td>
397
        </tr>
398
        <tr>
399
            <td>Serge Baldwin</td>
400
            <td>Data Coordinator</td>
401
            <td>Singapore</td>
402
            <td>64</td>
403
            <td>2012/04/09</td>
404
            <td>$138,575</td>
405
        </tr>
406
        <tr>
407
            <td>Zenaida Frank</td>
408
            <td>Software Engineer</td>
409
            <td>New York</td>
410
            <td>63</td>
411
            <td>2010/01/04</td>
412
            <td>$125,250</td>
413
        </tr>
414
        <tr>
415
            <td>Zorita Serrano</td>
416
            <td>Software Engineer</td>
417
            <td>San Francisco</td>
418
            <td>56</td>
419
            <td>2012/06/01</td>
420
            <td>$115,000</td>
421
        </tr>
422
        <tr>
423
            <td>Jennifer Acosta</td>
424
            <td>Junior Javascript Developer</td>
425
            <td>Edinburgh</td>
426
            <td>43</td>
427
            <td>2013/02/01</td>
428
            <td>$75,650</td>
429
        </tr>
430
        <tr>
431
            <td>Cara Stevens</td>
432
            <td>Sales Assistant</td>
433
            <td>New York</td>
434
            <td>46</td>
435
            <td>2011/12/06</td>
436
            <td>$145,600</td>
437
        </tr>
438
        <tr>
439
            <td>Hermione Butler</td>
440
            <td>Regional Director</td>
441
            <td>London</td>
442
            <td>47</td>
443
            <td>2011/03/21</td>
444
            <td>$356,250</td>
445
        </tr>
446
        <tr>
447
            <td>Lael Greer</td>
448
            <td>Systems Administrator</td>
449
            <td>London</td>
450
            <td>21</td>
451
            <td>2009/02/27</td>
452
            <td>$103,500</td>
453
        </tr>
454
        <tr>
455
            <td>Jonas Alexander</td>
456
            <td>Developer</td>
457
            <td>San Francisco</td>
458
            <td>30</td>
459
            <td>2010/07/14</td>
460
            <td>$86,500</td>
461
        </tr>
462
        <tr>
463
            <td>Shad Decker</td>
464
            <td>Regional Director</td>
465
            <td>Edinburgh</td>
466
            <td>51</td>
467
            <td>2008/11/13</td>
468
            <td>$183,000</td>
469
        </tr>
470
        <tr>
471
            <td>Michael Bruce</td>
472
            <td>Javascript Developer</td>
473
            <td>Singapore</td>
474
            <td>29</td>
475
            <td>2011/06/27</td>
476
            <td>$183,000</td>
477
        </tr>
478
        <tr>
479
            <td>Donna Snider</td>
480
            <td>Customer Support</td>
481
            <td>New York</td>
482
            <td>27</td>
483
            <td>2011/01/25</td>
484
            <td>$112,000</td>
485
        </tr>
486
    </tbody>
487
</table>
 
CSS
body{margin:50px;max-width:700px;}
1
body{margin:50px;max-width:700px;}
2
th,td{white-space:nowrap;}
 
JavaScript
$(document).ready(function() {
1
$(document).ready(function() {
2
  
3
  
4
  var table = $('#example').DataTable( {
5
    //dom: 'RC<"clear">lfrtip',
6
    //dom: 'T<"clear">lfrtip',
7
    dom: 'RCT<"clear">lfrtip',
8
    
9
    scrollY: 200,
10
    scrollX: false,
11
    
12
    columnDefs: [
13
      { targets: 1 }
14
    ],
15
    
16
    "tableTools": {
17
      "sRowSelect": "multi",
18
      "aButtons": [
19
        {
20
          "sExtends": "print",
21
          "sButtonText": "Print"
22
        }
23
      ]
24
    }
25
    
26
    
27
    
28
    
29
    
30
    
31
    
32
  } );
33
} );
 

Untitled

CSSDeck G+