· 6 years ago · Jan 27, 2020, 07:02 AM
1
2<!doctype html>
3<html lang="en">
4 <head>
5 <meta charset="utf-8" />
6 <title>Highdmin - Responsive Bootstrap 4 Admin Dashboard</title>
7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8 <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
9 <meta content="Coderthemes" name="author" />
10 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
11
12 <!-- App favicon -->
13 <link rel="shortcut icon" href="assets/images/favicon.ico">
14
15 <!-- DataTables -->
16 <link href="../plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
17 <link href="../plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
18 <!-- Responsive datatable examples -->
19 <link href="../plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
20
21 <!-- Multi Item Selection examples -->
22 <link href="../plugins/datatables/select.bootstrap4.min.css" rel="stylesheet" type="text/css" />
23
24 <!-- App css -->
25 <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
26 <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
27 <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
28
29 <script src="assets/js/modernizr.min.js"></script>
30
31 </head>
32
33 <body>
34
35 <!-- Navigation Bar-->
36 <header id="topnav">
37 <div class="topbar-main">
38 <div class="container-fluid">
39
40 <!-- Logo container-->
41 <div class="logo">
42 <!-- Text Logo -->
43 <!-- <a href="index.php" class="logo">
44 <span class="logo-small"><i class="mdi mdi-radar"></i></span>
45 <span class="logo-large"><i class="mdi mdi-radar"></i> Highdmin</span>
46 </a> -->
47 <!-- Image Logo -->
48 <a href="index.php" class="logo">
49 <img src="assets/images/logo_sm.png" alt="" height="26" class="logo-small">
50 <img src="assets/images/logo.png" alt="" height="22" class="logo-large">
51 </a>
52
53 </div>
54 <!-- End Logo container-->
55
56
57 <div class="menu-extras topbar-custom">
58
59 <ul class="list-unstyled topbar-right-menu float-right mb-0">
60
61 <li class="menu-item">
62 <!-- Mobile menu toggle-->
63 <a class="navbar-toggle nav-link">
64 <div class="lines">
65 <span></span>
66 <span></span>
67 <span></span>
68 </div>
69 </a>
70 <!-- End mobile menu toggle-->
71 </li>
72 <li class="dropdown notification-list hide-phone">
73 <a class="nav-link dropdown-toggle waves-effect nav-user" data-toggle="dropdown" href="#" role="button"
74 aria-haspopup="false" aria-expanded="false">
75 <i class="mdi mdi-earth"></i> English <i class="mdi mdi-chevron-down"></i>
76 </a>
77 <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated">
78
79 <!-- item-->
80 <a href="javascript:void(0);" class="dropdown-item">
81 Spanish
82 </a>
83
84 <!-- item-->
85 <a href="javascript:void(0);" class="dropdown-item">
86 Italian
87 </a>
88
89 <!-- item-->
90 <a href="javascript:void(0);" class="dropdown-item">
91 French
92 </a>
93
94 <!-- item-->
95 <a href="javascript:void(0);" class="dropdown-item">
96 Russian
97 </a>
98
99 </div>
100 </li>
101
102 <li class="dropdown notification-list">
103 <a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button"
104 aria-haspopup="false" aria-expanded="false">
105 <i class="fi-bell noti-icon"></i>
106 <span class="badge badge-danger badge-pill noti-icon-badge">4</span>
107 </a>
108 <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
109
110 <!-- item-->
111 <div class="dropdown-item noti-title">
112 <h6 class="m-0"><span class="float-right"><a href="" class="text-dark"><small>Clear All</small></a> </span>Notification</h6>
113 </div>
114
115 <div class="slimscroll" style="max-height: 230px;">
116 <!-- item-->
117 <a href="javascript:void(0);" class="dropdown-item notify-item">
118 <div class="notify-icon bg-success"><i class="mdi mdi-comment-account-outline"></i></div>
119 <p class="notify-details">Caleb Flakelar commented on Admin<small class="text-muted">1 min ago</small></p>
120 </a>
121
122 <!-- item-->
123 <a href="javascript:void(0);" class="dropdown-item notify-item">
124 <div class="notify-icon bg-info"><i class="mdi mdi-account-plus"></i></div>
125 <p class="notify-details">New user registered.<small class="text-muted">5 hours ago</small></p>
126 </a>
127
128 <!-- item-->
129 <a href="javascript:void(0);" class="dropdown-item notify-item">
130 <div class="notify-icon bg-danger"><i class="mdi mdi-heart"></i></div>
131 <p class="notify-details">Carlos Crouch liked <b>Admin</b><small class="text-muted">3 days ago</small></p>
132 </a>
133
134 <!-- item-->
135 <a href="javascript:void(0);" class="dropdown-item notify-item">
136 <div class="notify-icon bg-warning"><i class="mdi mdi-comment-account-outline"></i></div>
137 <p class="notify-details">Caleb Flakelar commented on Admin<small class="text-muted">4 days ago</small></p>
138 </a>
139
140 <!-- item-->
141 <a href="javascript:void(0);" class="dropdown-item notify-item">
142 <div class="notify-icon bg-purple"><i class="mdi mdi-account-plus"></i></div>
143 <p class="notify-details">New user registered.<small class="text-muted">7 days ago</small></p>
144 </a>
145
146 <!-- item-->
147 <a href="javascript:void(0);" class="dropdown-item notify-item">
148 <div class="notify-icon bg-custom"><i class="mdi mdi-heart"></i></div>
149 <p class="notify-details">Carlos Crouch liked <b>Admin</b><small class="text-muted">13 days ago</small></p>
150 </a>
151 </div>
152
153 <!-- All-->
154 <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
155 View all <i class="fi-arrow-right"></i>
156 </a>
157
158 </div>
159 </li>
160
161 <li class="dropdown notification-list">
162 <a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button"
163 aria-haspopup="false" aria-expanded="false">
164 <i class="fi-speech-bubble noti-icon"></i>
165 <span class="badge badge-dark badge-pill noti-icon-badge">6</span>
166 </a>
167 <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated dropdown-lg">
168
169 <!-- item-->
170 <div class="dropdown-item noti-title">
171 <h6 class="m-0"><span class="float-right"><a href="" class="text-dark"><small>Clear All</small></a> </span>Chat</h6>
172 </div>
173
174 <div class="slimscroll" style="max-height: 230px;">
175 <!-- item-->
176 <a href="javascript:void(0);" class="dropdown-item notify-item">
177 <div class="notify-icon"><img src="assets/images/users/avatar-2.jpg" class="img-fluid rounded-circle" alt="" /> </div>
178 <p class="notify-details">Cristina Pride</p>
179 <p class="text-muted font-13 mb-0 user-msg">Hi, How are you? What about our next meeting</p>
180 </a>
181
182 <!-- item-->
183 <a href="javascript:void(0);" class="dropdown-item notify-item">
184 <div class="notify-icon"><img src="assets/images/users/avatar-3.jpg" class="img-fluid rounded-circle" alt="" /> </div>
185 <p class="notify-details">Sam Garret</p>
186 <p class="text-muted font-13 mb-0 user-msg">Yeah everything is fine</p>
187 </a>
188
189 <!-- item-->
190 <a href="javascript:void(0);" class="dropdown-item notify-item">
191 <div class="notify-icon"><img src="assets/images/users/avatar-4.jpg" class="img-fluid rounded-circle" alt="" /> </div>
192 <p class="notify-details">Karen Robinson</p>
193 <p class="text-muted font-13 mb-0 user-msg">Wow that's great</p>
194 </a>
195
196 <!-- item-->
197 <a href="javascript:void(0);" class="dropdown-item notify-item">
198 <div class="notify-icon"><img src="assets/images/users/avatar-5.jpg" class="img-fluid rounded-circle" alt="" /> </div>
199 <p class="notify-details">Sherry Marshall</p>
200 <p class="text-muted font-13 mb-0 user-msg">Hi, How are you? What about our next meeting</p>
201 </a>
202
203 <!-- item-->
204 <a href="javascript:void(0);" class="dropdown-item notify-item">
205 <div class="notify-icon"><img src="assets/images/users/avatar-6.jpg" class="img-fluid rounded-circle" alt="" /> </div>
206 <p class="notify-details">Shawn Millard</p>
207 <p class="text-muted font-13 mb-0 user-msg">Yeah everything is fine</p>
208 </a>
209 </div>
210
211 <!-- All-->
212 <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
213 View all <i class="fi-arrow-right"></i>
214 </a>
215
216 </div>
217 </li>
218
219 <li class="dropdown notification-list">
220 <a class="nav-link dropdown-toggle waves-effect nav-user" data-toggle="dropdown" href="#" role="button"
221 aria-haspopup="false" aria-expanded="false">
222 <img src="assets/images/users/avatar-1.jpg" alt="user" class="rounded-circle"> <span class="ml-1 pro-user-name">Maxine K <i class="mdi mdi-chevron-down"></i> </span>
223 </a>
224 <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
225 <!-- item-->
226 <div class="dropdown-item noti-title">
227 <h6 class="text-overflow m-0">Welcome !</h6>
228 </div>
229
230 <!-- item-->
231 <a href="javascript:void(0);" class="dropdown-item notify-item">
232 <i class="fi-head"></i> <span>My Account</span>
233 </a>
234
235 <!-- item-->
236 <a href="javascript:void(0);" class="dropdown-item notify-item">
237 <i class="fi-cog"></i> <span>Settings</span>
238 </a>
239
240 <!-- item-->
241 <a href="javascript:void(0);" class="dropdown-item notify-item">
242 <i class="fi-help"></i> <span>Support</span>
243 </a>
244
245 <!-- item-->
246 <a href="javascript:void(0);" class="dropdown-item notify-item">
247 <i class="fi-lock"></i> <span>Lock Screen</span>
248 </a>
249
250 <!-- item-->
251 <a href="javascript:void(0);" class="dropdown-item notify-item">
252 <i class="fi-power"></i> <span>Logout</span>
253 </a>
254
255 </div>
256 </li>
257 </ul>
258 </div>
259 <!-- end menu-extras -->
260
261 <div class="clearfix"></div>
262
263 </div> <!-- end container -->
264 </div>
265 <!-- end topbar-main -->
266
267 <div class="navbar-custom">
268 <div class="container-fluid">
269 <div id="navigation">
270 <!-- Navigation Menu-->
271 <ul class="navigation-menu">
272
273 <li class="has-submenu">
274 <a href="index.php"><i class="icon-speedometer"></i>Dashboard</a>
275 </li>
276
277 <li class="has-submenu">
278 <a href="#"><i class="icon-layers"></i>Apps</a>
279 <ul class="submenu">
280 <li><a href="apps-calendar.php">Calendar</a></li>
281 <li><a href="apps-tickets.php">Tickets</a></li>
282 <li><a href="apps-taskboard.php">Task Board</a></li>
283 <li><a href="apps-task-detail.php">Task Detail</a></li>
284 <li><a href="apps-contacts.php">Contacts</a></li>
285 <li><a href="apps-projects.php">Projects</a></li>
286 <li><a href="apps-companies.php">Companies</a></li>
287 <li><a href="apps-file-manager.php">File Manager</a></li>
288 </ul>
289 </li>
290
291 <li class="has-submenu">
292 <a href="#"><i class="icon-briefcase"></i>UI Elements</a>
293 <ul class="submenu megamenu">
294 <li>
295 <ul>
296 <li><a href="ui-typography.php">Typography</a></li>
297 <li><a href="ui-cards.php">Cards</a></li>
298 <li><a href="ui-buttons.php">Buttons</a></li>
299 <li><a href="ui-modals.php">Modals</a></li>
300 <li><a href="ui-spinners.php">Spinners</a></li>
301 </ul>
302 </li>
303 <li>
304 <ul>
305 <li><a href="ui-ribbons.php">Ribbons</a></li>
306 <li><a href="ui-tooltips-popovers.php">Tooltips & Popover</a></li>
307 <li><a href="ui-checkbox-radio.php">Checkboxs-Radios</a></li>
308 <li><a href="ui-tabs.php">Tabs</a></li>
309 <li><a href="ui-progressbars.php">Progress Bars</a></li>
310 </ul>
311 </li>
312 <li>
313 <ul>
314 <li><a href="ui-notifications.php">Notification</a></li>
315 <li><a href="ui-grid.php">Grid</a></li>
316 <li><a href="ui-sweet-alert.php">Sweet Alert</a></li>
317 <li><a href="ui-bootstrap.php">Bootstrap UI</a></li>
318 <li><a href="ui-range-slider.php">Range Slider</a></li>
319 </ul>
320 </li>
321 </ul>
322 </li>
323
324 <li class="has-submenu">
325 <a href="#"><i class="icon-fire"></i>Components</a>
326 <ul class="submenu">
327 <li class="has-submenu">
328 <a href="#">Email</a>
329 <ul class="submenu">
330 <li><a href="email-inbox.php">Inbox</a></li>
331 <li><a href="email-read.php">Read Email</a></li>
332 <li><a href="email-compose.php">Compose Email</a></li>
333 </ul>
334 </li>
335 <li>
336 <a href="widgets.php">Widgets</a>
337 </li>
338 <li class="has-submenu">
339 <a href="#">Charts</a>
340 <ul class="submenu">
341 <li><a href="chart-flot.php">Flot Chart</a></li>
342 <li><a href="chart-morris.php">Morris Chart</a></li>
343 <li><a href="chart-google.php">Google Chart</a></li>
344 <li><a href="chart-chartist.php">Chartist Chart</a></li>
345 <li><a href="chart-chartjs.php">Chartjs Chart</a></li>
346 <li><a href="chart-sparkline.php">Sparkline Chart</a></li>
347 <li><a href="chart-knob.php">Jquery Knob</a></li>
348 </ul>
349 </li>
350 <li class="has-submenu">
351 <a href="#">Forms</a>
352 <ul class="submenu">
353 <li><a href="form-elements.php">Form Elements</a></li>
354 <li><a href="form-advanced.php">Form Advanced</a></li>
355 <li><a href="form-validation.php">Form Validation</a></li>
356 <li><a href="form-pickers.php">Form Pickers</a></li>
357 <li><a href="form-wizard.php">Form Wizard</a></li>
358 <li><a href="form-mask.php">Form Masks</a></li>
359 <li><a href="form-summernote.php">Summernote</a></li>
360 <li><a href="form-wysiwig.php">Wysiwig Editors</a></li>
361 <li><a href="form-x-editable.php">X Editable</a></li>
362 <li><a href="form-uploads.php">Multiple File Upload</a></li>
363 </ul>
364 </li>
365 <li class="has-submenu">
366 <a href="#">Icons</a>
367 <ul class="submenu">
368 <li><a href="icons-materialdesign.php">Material Design</a></li>
369 <li><a href="icons-dripicons.php">Dripicons</a></li>
370 <li><a href="icons-fontawesome.php">Font awesome</a></li>
371 <li><a href="icons-feather.php">Feather Icons</a></li>
372 <li><a href="icons-simpleline.php">Simple Line Icons</a></li>
373 </ul>
374 </li>
375
376 <li class="has-submenu">
377 <a href="#">Tables</a>
378 <ul class="submenu">
379 <li><a href="tables-basic.php">Basic Tables</a></li>
380 <li><a href="tables-datatable.php">Data Tables</a></li>
381 <li><a href="tables-responsive.php">Responsive Table</a></li>
382 <li><a href="tables-tablesaw.php">Tablesaw Tables</a></li>
383 <li><a href="tables-foo.php">Foo Tables</a></li>
384 </ul>
385 </li>
386
387 <li class="has-submenu">
388 <a href="#">Maps</a>
389 <ul class="submenu">
390 <li><a href="maps-google.php">Google Maps</a></li>
391 <li><a href="maps-vector.php">Vector Maps</a></li>
392 <li><a href="maps-mapael.php">Mapael Maps</a></li>
393 </ul>
394 </li>
395 </ul>
396 </li>
397
398 <li class="has-submenu">
399 <a href="#"><i class="icon-docs"></i>Pages</a>
400 <ul class="submenu megamenu">
401 <li>
402 <ul>
403 <li><a href="page-starter.php">Starter Page</a></li>
404 <li><a href="page-login.php">Login</a></li>
405 <li><a href="page-register.php">Register</a></li>
406 <li><a href="page-logout.php">Logout</a></li>
407 <li><a href="page-recoverpw.php">Recover Password</a></li>
408 </ul>
409 </li>
410 <li>
411 <ul>
412 <li><a href="page-lock-screen.php">Lock Screen</a></li>
413 <li><a href="page-confirm-mail.php">Confirm Mail</a></li>
414 <li><a href="page-404.php">Error 404</a></li>
415 <li><a href="page-404-alt.php">Error 404-alt</a></li>
416 <li><a href="page-500.php">Error 500</a></li>
417 </ul>
418 </li>
419 </ul>
420 </li>
421
422 <li class="has-submenu">
423 <a href="#"><i class="icon-present"></i>Extra Pages</a>
424 <ul class="submenu megamenu">
425 <li>
426 <ul>
427 <li><a href="extras-timeline.php">Timeline</a></li>
428 <li><a href="extras-profile.php">Profile</a></li>
429 <li><a href="extras-invoice.php">Invoice</a></li>
430 <li><a href="extras-faq.php">FAQ</a></li>
431 <li><a href="extras-pricing.php">Pricing</a></li>
432 <li><a href="extras-email-template.php">Email Templates</a></li>
433 </ul>
434 </li>
435 <li>
436 <ul>
437 <li><a href="extras-ratings.php">Ratings</a></li>
438 <li><a href="extras-search-results.php">Search Results</a></li>
439 <li><a href="extras-gallery.php">Gallery</a></li>
440 <li><a href="extras-maintenance.php">Maintenance</a></li>
441 <li><a href="extras-coming-soon.php">Coming Soon</a></li>
442 </ul>
443 </li>
444 </ul>
445 </li>
446
447 </ul>
448 <!-- End navigation menu -->
449 </div> <!-- end #navigation -->
450 </div> <!-- end container -->
451 </div> <!-- end navbar-custom -->
452 </header>
453 <!-- End Navigation Bar-->
454
455
456 <div class="wrapper">
457 <div class="container-fluid">
458
459 <!-- Page-Title -->
460 <div class="row">
461 <div class="col-sm-12">
462 <div class="page-title-box">
463 <div class="btn-group float-right">
464 <ol class="breadcrumb hide-phone p-0 m-0">
465 <li class="breadcrumb-item"><a href="#">Highdmin</a></li>
466 <li class="breadcrumb-item"><a href="#">Components</a></li>
467 <li class="breadcrumb-item"><a href="#">Tables</a></li>
468 <li class="breadcrumb-item active">Datatable</li>
469 </ol>
470 </div>
471 <h4 class="page-title">Datatable</h4>
472 </div>
473 </div>
474 </div>
475 <!-- end page title end breadcrumb -->
476
477 <div class="row">
478 <div class="col-12">
479 <div class="card-box">
480 <h4 class="m-t-0 header-title">Default Example</h4>
481 <p class="text-muted font-14 m-b-30">
482 DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>.
483 </p>
484
485 <table id="datatable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
486 <thead>
487 <tr>
488 <th>Name</th>
489 <th>Position</th>
490 <th>Office</th>
491 <th>Age</th>
492 <th>Start date</th>
493 <th>Salary</th>
494 </tr>
495 </thead>
496
497
498 <tbody>
499 <tr>
500 <td>Tiger Nixon</td>
501 <td>System Architect</td>
502 <td>Edinburgh</td>
503 <td>61</td>
504 <td>2011/04/25</td>
505 <td>$320,800</td>
506 </tr>
507 <tr>
508 <td>Garrett Winters</td>
509 <td>Accountant</td>
510 <td>Tokyo</td>
511 <td>63</td>
512 <td>2011/07/25</td>
513 <td>$170,750</td>
514 </tr>
515 <tr>
516 <td>Ashton Cox</td>
517 <td>Junior Technical Author</td>
518 <td>San Francisco</td>
519 <td>66</td>
520 <td>2009/01/12</td>
521 <td>$86,000</td>
522 </tr>
523 <tr>
524 <td>Cedric Kelly</td>
525 <td>Senior Javascript Developer</td>
526 <td>Edinburgh</td>
527 <td>22</td>
528 <td>2012/03/29</td>
529 <td>$433,060</td>
530 </tr>
531 <tr>
532 <td>Airi Satou</td>
533 <td>Accountant</td>
534 <td>Tokyo</td>
535 <td>33</td>
536 <td>2008/11/28</td>
537 <td>$162,700</td>
538 </tr>
539 <tr>
540 <td>Brielle Williamson</td>
541 <td>Integration Specialist</td>
542 <td>New York</td>
543 <td>61</td>
544 <td>2012/12/02</td>
545 <td>$372,000</td>
546 </tr>
547 <tr>
548 <td>Herrod Chandler</td>
549 <td>Sales Assistant</td>
550 <td>San Francisco</td>
551 <td>59</td>
552 <td>2012/08/06</td>
553 <td>$137,500</td>
554 </tr>
555 <tr>
556 <td>Rhona Davidson</td>
557 <td>Integration Specialist</td>
558 <td>Tokyo</td>
559 <td>55</td>
560 <td>2010/10/14</td>
561 <td>$327,900</td>
562 </tr>
563 <tr>
564 <td>Colleen Hurst</td>
565 <td>Javascript Developer</td>
566 <td>San Francisco</td>
567 <td>39</td>
568 <td>2009/09/15</td>
569 <td>$205,500</td>
570 </tr>
571 <tr>
572 <td>Sonya Frost</td>
573 <td>Software Engineer</td>
574 <td>Edinburgh</td>
575 <td>23</td>
576 <td>2008/12/13</td>
577 <td>$103,600</td>
578 </tr>
579 <tr>
580 <td>Jena Gaines</td>
581 <td>Office Manager</td>
582 <td>London</td>
583 <td>30</td>
584 <td>2008/12/19</td>
585 <td>$90,560</td>
586 </tr>
587 <tr>
588 <td>Quinn Flynn</td>
589 <td>Support Lead</td>
590 <td>Edinburgh</td>
591 <td>22</td>
592 <td>2013/03/03</td>
593 <td>$342,000</td>
594 </tr>
595 <tr>
596 <td>Charde Marshall</td>
597 <td>Regional Director</td>
598 <td>San Francisco</td>
599 <td>36</td>
600 <td>2008/10/16</td>
601 <td>$470,600</td>
602 </tr>
603 <tr>
604 <td>Haley Kennedy</td>
605 <td>Senior Marketing Designer</td>
606 <td>London</td>
607 <td>43</td>
608 <td>2012/12/18</td>
609 <td>$313,500</td>
610 </tr>
611 <tr>
612 <td>Tatyana Fitzpatrick</td>
613 <td>Regional Director</td>
614 <td>London</td>
615 <td>19</td>
616 <td>2010/03/17</td>
617 <td>$385,750</td>
618 </tr>
619 <tr>
620 <td>Michael Silva</td>
621 <td>Marketing Designer</td>
622 <td>London</td>
623 <td>66</td>
624 <td>2012/11/27</td>
625 <td>$198,500</td>
626 </tr>
627 <tr>
628 <td>Paul Byrd</td>
629 <td>Chief Financial Officer (CFO)</td>
630 <td>New York</td>
631 <td>64</td>
632 <td>2010/06/09</td>
633 <td>$725,000</td>
634 </tr>
635 <tr>
636 <td>Gloria Little</td>
637 <td>Systems Administrator</td>
638 <td>New York</td>
639 <td>59</td>
640 <td>2009/04/10</td>
641 <td>$237,500</td>
642 </tr>
643 <tr>
644 <td>Bradley Greer</td>
645 <td>Software Engineer</td>
646 <td>London</td>
647 <td>41</td>
648 <td>2012/10/13</td>
649 <td>$132,000</td>
650 </tr>
651 <tr>
652 <td>Dai Rios</td>
653 <td>Personnel Lead</td>
654 <td>Edinburgh</td>
655 <td>35</td>
656 <td>2012/09/26</td>
657 <td>$217,500</td>
658 </tr>
659 <tr>
660 <td>Jenette Caldwell</td>
661 <td>Development Lead</td>
662 <td>New York</td>
663 <td>30</td>
664 <td>2011/09/03</td>
665 <td>$345,000</td>
666 </tr>
667 <tr>
668 <td>Yuri Berry</td>
669 <td>Chief Marketing Officer (CMO)</td>
670 <td>New York</td>
671 <td>40</td>
672 <td>2009/06/25</td>
673 <td>$675,000</td>
674 </tr>
675 <tr>
676 <td>Caesar Vance</td>
677 <td>Pre-Sales Support</td>
678 <td>New York</td>
679 <td>21</td>
680 <td>2011/12/12</td>
681 <td>$106,450</td>
682 </tr>
683 <tr>
684 <td>Doris Wilder</td>
685 <td>Sales Assistant</td>
686 <td>Sidney</td>
687 <td>23</td>
688 <td>2010/09/20</td>
689 <td>$85,600</td>
690 </tr>
691 <tr>
692 <td>Angelica Ramos</td>
693 <td>Chief Executive Officer (CEO)</td>
694 <td>London</td>
695 <td>47</td>
696 <td>2009/10/09</td>
697 <td>$1,200,000</td>
698 </tr>
699 <tr>
700 <td>Gavin Joyce</td>
701 <td>Developer</td>
702 <td>Edinburgh</td>
703 <td>42</td>
704 <td>2010/12/22</td>
705 <td>$92,575</td>
706 </tr>
707 <tr>
708 <td>Jennifer Chang</td>
709 <td>Regional Director</td>
710 <td>Singapore</td>
711 <td>28</td>
712 <td>2010/11/14</td>
713 <td>$357,650</td>
714 </tr>
715 <tr>
716 <td>Brenden Wagner</td>
717 <td>Software Engineer</td>
718 <td>San Francisco</td>
719 <td>28</td>
720 <td>2011/06/07</td>
721 <td>$206,850</td>
722 </tr>
723 <tr>
724 <td>Fiona Green</td>
725 <td>Chief Operating Officer (COO)</td>
726 <td>San Francisco</td>
727 <td>48</td>
728 <td>2010/03/11</td>
729 <td>$850,000</td>
730 </tr>
731 <tr>
732 <td>Shou Itou</td>
733 <td>Regional Marketing</td>
734 <td>Tokyo</td>
735 <td>20</td>
736 <td>2011/08/14</td>
737 <td>$163,000</td>
738 </tr>
739 <tr>
740 <td>Michelle House</td>
741 <td>Integration Specialist</td>
742 <td>Sidney</td>
743 <td>37</td>
744 <td>2011/06/02</td>
745 <td>$95,400</td>
746 </tr>
747 <tr>
748 <td>Suki Burks</td>
749 <td>Developer</td>
750 <td>London</td>
751 <td>53</td>
752 <td>2009/10/22</td>
753 <td>$114,500</td>
754 </tr>
755 <tr>
756 <td>Prescott Bartlett</td>
757 <td>Technical Author</td>
758 <td>London</td>
759 <td>27</td>
760 <td>2011/05/07</td>
761 <td>$145,000</td>
762 </tr>
763 <tr>
764 <td>Gavin Cortez</td>
765 <td>Team Leader</td>
766 <td>San Francisco</td>
767 <td>22</td>
768 <td>2008/10/26</td>
769 <td>$235,500</td>
770 </tr>
771 <tr>
772 <td>Martena Mccray</td>
773 <td>Post-Sales support</td>
774 <td>Edinburgh</td>
775 <td>46</td>
776 <td>2011/03/09</td>
777 <td>$324,050</td>
778 </tr>
779 <tr>
780 <td>Unity Butler</td>
781 <td>Marketing Designer</td>
782 <td>San Francisco</td>
783 <td>47</td>
784 <td>2009/12/09</td>
785 <td>$85,675</td>
786 </tr>
787 <tr>
788 <td>Howard Hatfield</td>
789 <td>Office Manager</td>
790 <td>San Francisco</td>
791 <td>51</td>
792 <td>2008/12/16</td>
793 <td>$164,500</td>
794 </tr>
795 <tr>
796 <td>Hope Fuentes</td>
797 <td>Secretary</td>
798 <td>San Francisco</td>
799 <td>41</td>
800 <td>2010/02/12</td>
801 <td>$109,850</td>
802 </tr>
803 <tr>
804 <td>Vivian Harrell</td>
805 <td>Financial Controller</td>
806 <td>San Francisco</td>
807 <td>62</td>
808 <td>2009/02/14</td>
809 <td>$452,500</td>
810 </tr>
811 <tr>
812 <td>Timothy Mooney</td>
813 <td>Office Manager</td>
814 <td>London</td>
815 <td>37</td>
816 <td>2008/12/11</td>
817 <td>$136,200</td>
818 </tr>
819 <tr>
820 <td>Jackson Bradshaw</td>
821 <td>Director</td>
822 <td>New York</td>
823 <td>65</td>
824 <td>2008/09/26</td>
825 <td>$645,750</td>
826 </tr>
827 <tr>
828 <td>Olivia Liang</td>
829 <td>Support Engineer</td>
830 <td>Singapore</td>
831 <td>64</td>
832 <td>2011/02/03</td>
833 <td>$234,500</td>
834 </tr>
835 <tr>
836 <td>Bruno Nash</td>
837 <td>Software Engineer</td>
838 <td>London</td>
839 <td>38</td>
840 <td>2011/05/03</td>
841 <td>$163,500</td>
842 </tr>
843 <tr>
844 <td>Sakura Yamamoto</td>
845 <td>Support Engineer</td>
846 <td>Tokyo</td>
847 <td>37</td>
848 <td>2009/08/19</td>
849 <td>$139,575</td>
850 </tr>
851 <tr>
852 <td>Thor Walton</td>
853 <td>Developer</td>
854 <td>New York</td>
855 <td>61</td>
856 <td>2013/08/11</td>
857 <td>$98,540</td>
858 </tr>
859 <tr>
860 <td>Finn Camacho</td>
861 <td>Support Engineer</td>
862 <td>San Francisco</td>
863 <td>47</td>
864 <td>2009/07/07</td>
865 <td>$87,500</td>
866 </tr>
867 <tr>
868 <td>Serge Baldwin</td>
869 <td>Data Coordinator</td>
870 <td>Singapore</td>
871 <td>64</td>
872 <td>2012/04/09</td>
873 <td>$138,575</td>
874 </tr>
875 <tr>
876 <td>Zenaida Frank</td>
877 <td>Software Engineer</td>
878 <td>New York</td>
879 <td>63</td>
880 <td>2010/01/04</td>
881 <td>$125,250</td>
882 </tr>
883 <tr>
884 <td>Zorita Serrano</td>
885 <td>Software Engineer</td>
886 <td>San Francisco</td>
887 <td>56</td>
888 <td>2012/06/01</td>
889 <td>$115,000</td>
890 </tr>
891 <tr>
892 <td>Jennifer Acosta</td>
893 <td>Junior Javascript Developer</td>
894 <td>Edinburgh</td>
895 <td>43</td>
896 <td>2013/02/01</td>
897 <td>$75,650</td>
898 </tr>
899 <tr>
900 <td>Cara Stevens</td>
901 <td>Sales Assistant</td>
902 <td>New York</td>
903 <td>46</td>
904 <td>2011/12/06</td>
905 <td>$145,600</td>
906 </tr>
907 <tr>
908 <td>Hermione Butler</td>
909 <td>Regional Director</td>
910 <td>London</td>
911 <td>47</td>
912 <td>2011/03/21</td>
913 <td>$356,250</td>
914 </tr>
915 <tr>
916 <td>Lael Greer</td>
917 <td>Systems Administrator</td>
918 <td>London</td>
919 <td>21</td>
920 <td>2009/02/27</td>
921 <td>$103,500</td>
922 </tr>
923 <tr>
924 <td>Jonas Alexander</td>
925 <td>Developer</td>
926 <td>San Francisco</td>
927 <td>30</td>
928 <td>2010/07/14</td>
929 <td>$86,500</td>
930 </tr>
931 <tr>
932 <td>Shad Decker</td>
933 <td>Regional Director</td>
934 <td>Edinburgh</td>
935 <td>51</td>
936 <td>2008/11/13</td>
937 <td>$183,000</td>
938 </tr>
939 <tr>
940 <td>Michael Bruce</td>
941 <td>Javascript Developer</td>
942 <td>Singapore</td>
943 <td>29</td>
944 <td>2011/06/27</td>
945 <td>$183,000</td>
946 </tr>
947 <tr>
948 <td>Donna Snider</td>
949 <td>Customer Support</td>
950 <td>New York</td>
951 <td>27</td>
952 <td>2011/01/25</td>
953 <td>$112,000</td>
954 </tr>
955 </tbody>
956 </table>
957 </div>
958 </div>
959 </div> <!-- end row -->
960
961
962 <div class="row">
963 <div class="col-12">
964 <div class="card-box table-responsive">
965 <h4 class="m-t-0 header-title">Buttons example</h4>
966 <p class="text-muted font-14 m-b-30">
967 The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. The core library provides the based framework upon which plug-ins can built.
968 </p>
969
970 <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
971 <thead>
972 <tr>
973 <th>Name</th>
974 <th>Position</th>
975 <th>Office</th>
976 <th>Age</th>
977 <th>Start date</th>
978 <th>Salary</th>
979 </tr>
980 </thead>
981
982
983 <tbody>
984 <tr>
985 <td>Tiger Nixon</td>
986 <td>System Architect</td>
987 <td>Edinburgh</td>
988 <td>61</td>
989 <td>2011/04/25</td>
990 <td>$320,800</td>
991 </tr>
992 <tr>
993 <td>Garrett Winters</td>
994 <td>Accountant</td>
995 <td>Tokyo</td>
996 <td>63</td>
997 <td>2011/07/25</td>
998 <td>$170,750</td>
999 </tr>
1000 <tr>
1001 <td>Ashton Cox</td>
1002 <td>Junior Technical Author</td>
1003 <td>San Francisco</td>
1004 <td>66</td>
1005 <td>2009/01/12</td>
1006 <td>$86,000</td>
1007 </tr>
1008 <tr>
1009 <td>Cedric Kelly</td>
1010 <td>Senior Javascript Developer</td>
1011 <td>Edinburgh</td>
1012 <td>22</td>
1013 <td>2012/03/29</td>
1014 <td>$433,060</td>
1015 </tr>
1016 <tr>
1017 <td>Airi Satou</td>
1018 <td>Accountant</td>
1019 <td>Tokyo</td>
1020 <td>33</td>
1021 <td>2008/11/28</td>
1022 <td>$162,700</td>
1023 </tr>
1024 <tr>
1025 <td>Brielle Williamson</td>
1026 <td>Integration Specialist</td>
1027 <td>New York</td>
1028 <td>61</td>
1029 <td>2012/12/02</td>
1030 <td>$372,000</td>
1031 </tr>
1032 <tr>
1033 <td>Herrod Chandler</td>
1034 <td>Sales Assistant</td>
1035 <td>San Francisco</td>
1036 <td>59</td>
1037 <td>2012/08/06</td>
1038 <td>$137,500</td>
1039 </tr>
1040 <tr>
1041 <td>Rhona Davidson</td>
1042 <td>Integration Specialist</td>
1043 <td>Tokyo</td>
1044 <td>55</td>
1045 <td>2010/10/14</td>
1046 <td>$327,900</td>
1047 </tr>
1048 <tr>
1049 <td>Colleen Hurst</td>
1050 <td>Javascript Developer</td>
1051 <td>San Francisco</td>
1052 <td>39</td>
1053 <td>2009/09/15</td>
1054 <td>$205,500</td>
1055 </tr>
1056 <tr>
1057 <td>Sonya Frost</td>
1058 <td>Software Engineer</td>
1059 <td>Edinburgh</td>
1060 <td>23</td>
1061 <td>2008/12/13</td>
1062 <td>$103,600</td>
1063 </tr>
1064 <tr>
1065 <td>Jena Gaines</td>
1066 <td>Office Manager</td>
1067 <td>London</td>
1068 <td>30</td>
1069 <td>2008/12/19</td>
1070 <td>$90,560</td>
1071 </tr>
1072 <tr>
1073 <td>Quinn Flynn</td>
1074 <td>Support Lead</td>
1075 <td>Edinburgh</td>
1076 <td>22</td>
1077 <td>2013/03/03</td>
1078 <td>$342,000</td>
1079 </tr>
1080 <tr>
1081 <td>Charde Marshall</td>
1082 <td>Regional Director</td>
1083 <td>San Francisco</td>
1084 <td>36</td>
1085 <td>2008/10/16</td>
1086 <td>$470,600</td>
1087 </tr>
1088 <tr>
1089 <td>Haley Kennedy</td>
1090 <td>Senior Marketing Designer</td>
1091 <td>London</td>
1092 <td>43</td>
1093 <td>2012/12/18</td>
1094 <td>$313,500</td>
1095 </tr>
1096 <tr>
1097 <td>Tatyana Fitzpatrick</td>
1098 <td>Regional Director</td>
1099 <td>London</td>
1100 <td>19</td>
1101 <td>2010/03/17</td>
1102 <td>$385,750</td>
1103 </tr>
1104 <tr>
1105 <td>Michael Silva</td>
1106 <td>Marketing Designer</td>
1107 <td>London</td>
1108 <td>66</td>
1109 <td>2012/11/27</td>
1110 <td>$198,500</td>
1111 </tr>
1112 <tr>
1113 <td>Paul Byrd</td>
1114 <td>Chief Financial Officer (CFO)</td>
1115 <td>New York</td>
1116 <td>64</td>
1117 <td>2010/06/09</td>
1118 <td>$725,000</td>
1119 </tr>
1120 <tr>
1121 <td>Gloria Little</td>
1122 <td>Systems Administrator</td>
1123 <td>New York</td>
1124 <td>59</td>
1125 <td>2009/04/10</td>
1126 <td>$237,500</td>
1127 </tr>
1128 <tr>
1129 <td>Bradley Greer</td>
1130 <td>Software Engineer</td>
1131 <td>London</td>
1132 <td>41</td>
1133 <td>2012/10/13</td>
1134 <td>$132,000</td>
1135 </tr>
1136 <tr>
1137 <td>Dai Rios</td>
1138 <td>Personnel Lead</td>
1139 <td>Edinburgh</td>
1140 <td>35</td>
1141 <td>2012/09/26</td>
1142 <td>$217,500</td>
1143 </tr>
1144 <tr>
1145 <td>Jenette Caldwell</td>
1146 <td>Development Lead</td>
1147 <td>New York</td>
1148 <td>30</td>
1149 <td>2011/09/03</td>
1150 <td>$345,000</td>
1151 </tr>
1152 <tr>
1153 <td>Yuri Berry</td>
1154 <td>Chief Marketing Officer (CMO)</td>
1155 <td>New York</td>
1156 <td>40</td>
1157 <td>2009/06/25</td>
1158 <td>$675,000</td>
1159 </tr>
1160 <tr>
1161 <td>Caesar Vance</td>
1162 <td>Pre-Sales Support</td>
1163 <td>New York</td>
1164 <td>21</td>
1165 <td>2011/12/12</td>
1166 <td>$106,450</td>
1167 </tr>
1168 <tr>
1169 <td>Doris Wilder</td>
1170 <td>Sales Assistant</td>
1171 <td>Sidney</td>
1172 <td>23</td>
1173 <td>2010/09/20</td>
1174 <td>$85,600</td>
1175 </tr>
1176 <tr>
1177 <td>Angelica Ramos</td>
1178 <td>Chief Executive Officer (CEO)</td>
1179 <td>London</td>
1180 <td>47</td>
1181 <td>2009/10/09</td>
1182 <td>$1,200,000</td>
1183 </tr>
1184 <tr>
1185 <td>Gavin Joyce</td>
1186 <td>Developer</td>
1187 <td>Edinburgh</td>
1188 <td>42</td>
1189 <td>2010/12/22</td>
1190 <td>$92,575</td>
1191 </tr>
1192 <tr>
1193 <td>Jennifer Chang</td>
1194 <td>Regional Director</td>
1195 <td>Singapore</td>
1196 <td>28</td>
1197 <td>2010/11/14</td>
1198 <td>$357,650</td>
1199 </tr>
1200 <tr>
1201 <td>Brenden Wagner</td>
1202 <td>Software Engineer</td>
1203 <td>San Francisco</td>
1204 <td>28</td>
1205 <td>2011/06/07</td>
1206 <td>$206,850</td>
1207 </tr>
1208 <tr>
1209 <td>Fiona Green</td>
1210 <td>Chief Operating Officer (COO)</td>
1211 <td>San Francisco</td>
1212 <td>48</td>
1213 <td>2010/03/11</td>
1214 <td>$850,000</td>
1215 </tr>
1216 <tr>
1217 <td>Shou Itou</td>
1218 <td>Regional Marketing</td>
1219 <td>Tokyo</td>
1220 <td>20</td>
1221 <td>2011/08/14</td>
1222 <td>$163,000</td>
1223 </tr>
1224 <tr>
1225 <td>Michelle House</td>
1226 <td>Integration Specialist</td>
1227 <td>Sidney</td>
1228 <td>37</td>
1229 <td>2011/06/02</td>
1230 <td>$95,400</td>
1231 </tr>
1232 <tr>
1233 <td>Suki Burks</td>
1234 <td>Developer</td>
1235 <td>London</td>
1236 <td>53</td>
1237 <td>2009/10/22</td>
1238 <td>$114,500</td>
1239 </tr>
1240 <tr>
1241 <td>Prescott Bartlett</td>
1242 <td>Technical Author</td>
1243 <td>London</td>
1244 <td>27</td>
1245 <td>2011/05/07</td>
1246 <td>$145,000</td>
1247 </tr>
1248 <tr>
1249 <td>Gavin Cortez</td>
1250 <td>Team Leader</td>
1251 <td>San Francisco</td>
1252 <td>22</td>
1253 <td>2008/10/26</td>
1254 <td>$235,500</td>
1255 </tr>
1256 <tr>
1257 <td>Martena Mccray</td>
1258 <td>Post-Sales support</td>
1259 <td>Edinburgh</td>
1260 <td>46</td>
1261 <td>2011/03/09</td>
1262 <td>$324,050</td>
1263 </tr>
1264 <tr>
1265 <td>Unity Butler</td>
1266 <td>Marketing Designer</td>
1267 <td>San Francisco</td>
1268 <td>47</td>
1269 <td>2009/12/09</td>
1270 <td>$85,675</td>
1271 </tr>
1272 <tr>
1273 <td>Howard Hatfield</td>
1274 <td>Office Manager</td>
1275 <td>San Francisco</td>
1276 <td>51</td>
1277 <td>2008/12/16</td>
1278 <td>$164,500</td>
1279 </tr>
1280 <tr>
1281 <td>Hope Fuentes</td>
1282 <td>Secretary</td>
1283 <td>San Francisco</td>
1284 <td>41</td>
1285 <td>2010/02/12</td>
1286 <td>$109,850</td>
1287 </tr>
1288 <tr>
1289 <td>Vivian Harrell</td>
1290 <td>Financial Controller</td>
1291 <td>San Francisco</td>
1292 <td>62</td>
1293 <td>2009/02/14</td>
1294 <td>$452,500</td>
1295 </tr>
1296 <tr>
1297 <td>Timothy Mooney</td>
1298 <td>Office Manager</td>
1299 <td>London</td>
1300 <td>37</td>
1301 <td>2008/12/11</td>
1302 <td>$136,200</td>
1303 </tr>
1304 <tr>
1305 <td>Jackson Bradshaw</td>
1306 <td>Director</td>
1307 <td>New York</td>
1308 <td>65</td>
1309 <td>2008/09/26</td>
1310 <td>$645,750</td>
1311 </tr>
1312 <tr>
1313 <td>Olivia Liang</td>
1314 <td>Support Engineer</td>
1315 <td>Singapore</td>
1316 <td>64</td>
1317 <td>2011/02/03</td>
1318 <td>$234,500</td>
1319 </tr>
1320 <tr>
1321 <td>Bruno Nash</td>
1322 <td>Software Engineer</td>
1323 <td>London</td>
1324 <td>38</td>
1325 <td>2011/05/03</td>
1326 <td>$163,500</td>
1327 </tr>
1328 <tr>
1329 <td>Sakura Yamamoto</td>
1330 <td>Support Engineer</td>
1331 <td>Tokyo</td>
1332 <td>37</td>
1333 <td>2009/08/19</td>
1334 <td>$139,575</td>
1335 </tr>
1336 <tr>
1337 <td>Thor Walton</td>
1338 <td>Developer</td>
1339 <td>New York</td>
1340 <td>61</td>
1341 <td>2013/08/11</td>
1342 <td>$98,540</td>
1343 </tr>
1344 <tr>
1345 <td>Finn Camacho</td>
1346 <td>Support Engineer</td>
1347 <td>San Francisco</td>
1348 <td>47</td>
1349 <td>2009/07/07</td>
1350 <td>$87,500</td>
1351 </tr>
1352 <tr>
1353 <td>Serge Baldwin</td>
1354 <td>Data Coordinator</td>
1355 <td>Singapore</td>
1356 <td>64</td>
1357 <td>2012/04/09</td>
1358 <td>$138,575</td>
1359 </tr>
1360 <tr>
1361 <td>Zenaida Frank</td>
1362 <td>Software Engineer</td>
1363 <td>New York</td>
1364 <td>63</td>
1365 <td>2010/01/04</td>
1366 <td>$125,250</td>
1367 </tr>
1368 <tr>
1369 <td>Zorita Serrano</td>
1370 <td>Software Engineer</td>
1371 <td>San Francisco</td>
1372 <td>56</td>
1373 <td>2012/06/01</td>
1374 <td>$115,000</td>
1375 </tr>
1376 <tr>
1377 <td>Jennifer Acosta</td>
1378 <td>Junior Javascript Developer</td>
1379 <td>Edinburgh</td>
1380 <td>43</td>
1381 <td>2013/02/01</td>
1382 <td>$75,650</td>
1383 </tr>
1384 <tr>
1385 <td>Cara Stevens</td>
1386 <td>Sales Assistant</td>
1387 <td>New York</td>
1388 <td>46</td>
1389 <td>2011/12/06</td>
1390 <td>$145,600</td>
1391 </tr>
1392 <tr>
1393 <td>Hermione Butler</td>
1394 <td>Regional Director</td>
1395 <td>London</td>
1396 <td>47</td>
1397 <td>2011/03/21</td>
1398 <td>$356,250</td>
1399 </tr>
1400 <tr>
1401 <td>Lael Greer</td>
1402 <td>Systems Administrator</td>
1403 <td>London</td>
1404 <td>21</td>
1405 <td>2009/02/27</td>
1406 <td>$103,500</td>
1407 </tr>
1408 <tr>
1409 <td>Jonas Alexander</td>
1410 <td>Developer</td>
1411 <td>San Francisco</td>
1412 <td>30</td>
1413 <td>2010/07/14</td>
1414 <td>$86,500</td>
1415 </tr>
1416 <tr>
1417 <td>Shad Decker</td>
1418 <td>Regional Director</td>
1419 <td>Edinburgh</td>
1420 <td>51</td>
1421 <td>2008/11/13</td>
1422 <td>$183,000</td>
1423 </tr>
1424 <tr>
1425 <td>Michael Bruce</td>
1426 <td>Javascript Developer</td>
1427 <td>Singapore</td>
1428 <td>29</td>
1429 <td>2011/06/27</td>
1430 <td>$183,000</td>
1431 </tr>
1432 <tr>
1433 <td>Donna Snider</td>
1434 <td>Customer Support</td>
1435 <td>New York</td>
1436 <td>27</td>
1437 <td>2011/01/25</td>
1438 <td>$112,000</td>
1439 </tr>
1440 </tbody>
1441 </table>
1442 </div>
1443 </div>
1444 </div>
1445 <!-- end row -->
1446
1447
1448 <div class="row">
1449 <div class="col-12">
1450 <div class="card-box table-responsive">
1451 <h4 class="m-t-0 header-title">KeyTable example</h4>
1452 <p class="text-muted font-14 m-b-30">
1453 KeyTable provides Excel like cell navigation on any table. Events (focus, blur, action etc) can be assigned to individual cells, columns, rows or all cells.
1454 </p>
1455
1456 <table id="key-table" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
1457 <thead>
1458 <tr>
1459 <th>Name</th>
1460 <th>Position</th>
1461 <th>Office</th>
1462 <th>Age</th>
1463 <th>Start date</th>
1464 <th>Salary</th>
1465 </tr>
1466 </thead>
1467
1468
1469 <tbody>
1470 <tr>
1471 <td>Tiger Nixon</td>
1472 <td>System Architect</td>
1473 <td>Edinburgh</td>
1474 <td>61</td>
1475 <td>2011/04/25</td>
1476 <td>$320,800</td>
1477 </tr>
1478 <tr>
1479 <td>Garrett Winters</td>
1480 <td>Accountant</td>
1481 <td>Tokyo</td>
1482 <td>63</td>
1483 <td>2011/07/25</td>
1484 <td>$170,750</td>
1485 </tr>
1486 <tr>
1487 <td>Ashton Cox</td>
1488 <td>Junior Technical Author</td>
1489 <td>San Francisco</td>
1490 <td>66</td>
1491 <td>2009/01/12</td>
1492 <td>$86,000</td>
1493 </tr>
1494 <tr>
1495 <td>Cedric Kelly</td>
1496 <td>Senior Javascript Developer</td>
1497 <td>Edinburgh</td>
1498 <td>22</td>
1499 <td>2012/03/29</td>
1500 <td>$433,060</td>
1501 </tr>
1502 <tr>
1503 <td>Airi Satou</td>
1504 <td>Accountant</td>
1505 <td>Tokyo</td>
1506 <td>33</td>
1507 <td>2008/11/28</td>
1508 <td>$162,700</td>
1509 </tr>
1510 <tr>
1511 <td>Brielle Williamson</td>
1512 <td>Integration Specialist</td>
1513 <td>New York</td>
1514 <td>61</td>
1515 <td>2012/12/02</td>
1516 <td>$372,000</td>
1517 </tr>
1518 <tr>
1519 <td>Herrod Chandler</td>
1520 <td>Sales Assistant</td>
1521 <td>San Francisco</td>
1522 <td>59</td>
1523 <td>2012/08/06</td>
1524 <td>$137,500</td>
1525 </tr>
1526 <tr>
1527 <td>Rhona Davidson</td>
1528 <td>Integration Specialist</td>
1529 <td>Tokyo</td>
1530 <td>55</td>
1531 <td>2010/10/14</td>
1532 <td>$327,900</td>
1533 </tr>
1534 <tr>
1535 <td>Colleen Hurst</td>
1536 <td>Javascript Developer</td>
1537 <td>San Francisco</td>
1538 <td>39</td>
1539 <td>2009/09/15</td>
1540 <td>$205,500</td>
1541 </tr>
1542 <tr>
1543 <td>Sonya Frost</td>
1544 <td>Software Engineer</td>
1545 <td>Edinburgh</td>
1546 <td>23</td>
1547 <td>2008/12/13</td>
1548 <td>$103,600</td>
1549 </tr>
1550 <tr>
1551 <td>Jena Gaines</td>
1552 <td>Office Manager</td>
1553 <td>London</td>
1554 <td>30</td>
1555 <td>2008/12/19</td>
1556 <td>$90,560</td>
1557 </tr>
1558 <tr>
1559 <td>Quinn Flynn</td>
1560 <td>Support Lead</td>
1561 <td>Edinburgh</td>
1562 <td>22</td>
1563 <td>2013/03/03</td>
1564 <td>$342,000</td>
1565 </tr>
1566 <tr>
1567 <td>Charde Marshall</td>
1568 <td>Regional Director</td>
1569 <td>San Francisco</td>
1570 <td>36</td>
1571 <td>2008/10/16</td>
1572 <td>$470,600</td>
1573 </tr>
1574 <tr>
1575 <td>Haley Kennedy</td>
1576 <td>Senior Marketing Designer</td>
1577 <td>London</td>
1578 <td>43</td>
1579 <td>2012/12/18</td>
1580 <td>$313,500</td>
1581 </tr>
1582 <tr>
1583 <td>Tatyana Fitzpatrick</td>
1584 <td>Regional Director</td>
1585 <td>London</td>
1586 <td>19</td>
1587 <td>2010/03/17</td>
1588 <td>$385,750</td>
1589 </tr>
1590 <tr>
1591 <td>Michael Silva</td>
1592 <td>Marketing Designer</td>
1593 <td>London</td>
1594 <td>66</td>
1595 <td>2012/11/27</td>
1596 <td>$198,500</td>
1597 </tr>
1598 <tr>
1599 <td>Paul Byrd</td>
1600 <td>Chief Financial Officer (CFO)</td>
1601 <td>New York</td>
1602 <td>64</td>
1603 <td>2010/06/09</td>
1604 <td>$725,000</td>
1605 </tr>
1606 <tr>
1607 <td>Gloria Little</td>
1608 <td>Systems Administrator</td>
1609 <td>New York</td>
1610 <td>59</td>
1611 <td>2009/04/10</td>
1612 <td>$237,500</td>
1613 </tr>
1614 <tr>
1615 <td>Bradley Greer</td>
1616 <td>Software Engineer</td>
1617 <td>London</td>
1618 <td>41</td>
1619 <td>2012/10/13</td>
1620 <td>$132,000</td>
1621 </tr>
1622 <tr>
1623 <td>Dai Rios</td>
1624 <td>Personnel Lead</td>
1625 <td>Edinburgh</td>
1626 <td>35</td>
1627 <td>2012/09/26</td>
1628 <td>$217,500</td>
1629 </tr>
1630 <tr>
1631 <td>Jenette Caldwell</td>
1632 <td>Development Lead</td>
1633 <td>New York</td>
1634 <td>30</td>
1635 <td>2011/09/03</td>
1636 <td>$345,000</td>
1637 </tr>
1638 <tr>
1639 <td>Yuri Berry</td>
1640 <td>Chief Marketing Officer (CMO)</td>
1641 <td>New York</td>
1642 <td>40</td>
1643 <td>2009/06/25</td>
1644 <td>$675,000</td>
1645 </tr>
1646 <tr>
1647 <td>Caesar Vance</td>
1648 <td>Pre-Sales Support</td>
1649 <td>New York</td>
1650 <td>21</td>
1651 <td>2011/12/12</td>
1652 <td>$106,450</td>
1653 </tr>
1654 <tr>
1655 <td>Doris Wilder</td>
1656 <td>Sales Assistant</td>
1657 <td>Sidney</td>
1658 <td>23</td>
1659 <td>2010/09/20</td>
1660 <td>$85,600</td>
1661 </tr>
1662 <tr>
1663 <td>Angelica Ramos</td>
1664 <td>Chief Executive Officer (CEO)</td>
1665 <td>London</td>
1666 <td>47</td>
1667 <td>2009/10/09</td>
1668 <td>$1,200,000</td>
1669 </tr>
1670 <tr>
1671 <td>Gavin Joyce</td>
1672 <td>Developer</td>
1673 <td>Edinburgh</td>
1674 <td>42</td>
1675 <td>2010/12/22</td>
1676 <td>$92,575</td>
1677 </tr>
1678 <tr>
1679 <td>Jennifer Chang</td>
1680 <td>Regional Director</td>
1681 <td>Singapore</td>
1682 <td>28</td>
1683 <td>2010/11/14</td>
1684 <td>$357,650</td>
1685 </tr>
1686 <tr>
1687 <td>Brenden Wagner</td>
1688 <td>Software Engineer</td>
1689 <td>San Francisco</td>
1690 <td>28</td>
1691 <td>2011/06/07</td>
1692 <td>$206,850</td>
1693 </tr>
1694 <tr>
1695 <td>Fiona Green</td>
1696 <td>Chief Operating Officer (COO)</td>
1697 <td>San Francisco</td>
1698 <td>48</td>
1699 <td>2010/03/11</td>
1700 <td>$850,000</td>
1701 </tr>
1702 <tr>
1703 <td>Shou Itou</td>
1704 <td>Regional Marketing</td>
1705 <td>Tokyo</td>
1706 <td>20</td>
1707 <td>2011/08/14</td>
1708 <td>$163,000</td>
1709 </tr>
1710 <tr>
1711 <td>Michelle House</td>
1712 <td>Integration Specialist</td>
1713 <td>Sidney</td>
1714 <td>37</td>
1715 <td>2011/06/02</td>
1716 <td>$95,400</td>
1717 </tr>
1718 <tr>
1719 <td>Suki Burks</td>
1720 <td>Developer</td>
1721 <td>London</td>
1722 <td>53</td>
1723 <td>2009/10/22</td>
1724 <td>$114,500</td>
1725 </tr>
1726 <tr>
1727 <td>Prescott Bartlett</td>
1728 <td>Technical Author</td>
1729 <td>London</td>
1730 <td>27</td>
1731 <td>2011/05/07</td>
1732 <td>$145,000</td>
1733 </tr>
1734 <tr>
1735 <td>Gavin Cortez</td>
1736 <td>Team Leader</td>
1737 <td>San Francisco</td>
1738 <td>22</td>
1739 <td>2008/10/26</td>
1740 <td>$235,500</td>
1741 </tr>
1742 <tr>
1743 <td>Martena Mccray</td>
1744 <td>Post-Sales support</td>
1745 <td>Edinburgh</td>
1746 <td>46</td>
1747 <td>2011/03/09</td>
1748 <td>$324,050</td>
1749 </tr>
1750 <tr>
1751 <td>Unity Butler</td>
1752 <td>Marketing Designer</td>
1753 <td>San Francisco</td>
1754 <td>47</td>
1755 <td>2009/12/09</td>
1756 <td>$85,675</td>
1757 </tr>
1758 <tr>
1759 <td>Howard Hatfield</td>
1760 <td>Office Manager</td>
1761 <td>San Francisco</td>
1762 <td>51</td>
1763 <td>2008/12/16</td>
1764 <td>$164,500</td>
1765 </tr>
1766 <tr>
1767 <td>Hope Fuentes</td>
1768 <td>Secretary</td>
1769 <td>San Francisco</td>
1770 <td>41</td>
1771 <td>2010/02/12</td>
1772 <td>$109,850</td>
1773 </tr>
1774 <tr>
1775 <td>Vivian Harrell</td>
1776 <td>Financial Controller</td>
1777 <td>San Francisco</td>
1778 <td>62</td>
1779 <td>2009/02/14</td>
1780 <td>$452,500</td>
1781 </tr>
1782 <tr>
1783 <td>Timothy Mooney</td>
1784 <td>Office Manager</td>
1785 <td>London</td>
1786 <td>37</td>
1787 <td>2008/12/11</td>
1788 <td>$136,200</td>
1789 </tr>
1790 <tr>
1791 <td>Jackson Bradshaw</td>
1792 <td>Director</td>
1793 <td>New York</td>
1794 <td>65</td>
1795 <td>2008/09/26</td>
1796 <td>$645,750</td>
1797 </tr>
1798 <tr>
1799 <td>Olivia Liang</td>
1800 <td>Support Engineer</td>
1801 <td>Singapore</td>
1802 <td>64</td>
1803 <td>2011/02/03</td>
1804 <td>$234,500</td>
1805 </tr>
1806 <tr>
1807 <td>Bruno Nash</td>
1808 <td>Software Engineer</td>
1809 <td>London</td>
1810 <td>38</td>
1811 <td>2011/05/03</td>
1812 <td>$163,500</td>
1813 </tr>
1814 <tr>
1815 <td>Sakura Yamamoto</td>
1816 <td>Support Engineer</td>
1817 <td>Tokyo</td>
1818 <td>37</td>
1819 <td>2009/08/19</td>
1820 <td>$139,575</td>
1821 </tr>
1822 <tr>
1823 <td>Thor Walton</td>
1824 <td>Developer</td>
1825 <td>New York</td>
1826 <td>61</td>
1827 <td>2013/08/11</td>
1828 <td>$98,540</td>
1829 </tr>
1830 <tr>
1831 <td>Finn Camacho</td>
1832 <td>Support Engineer</td>
1833 <td>San Francisco</td>
1834 <td>47</td>
1835 <td>2009/07/07</td>
1836 <td>$87,500</td>
1837 </tr>
1838 <tr>
1839 <td>Serge Baldwin</td>
1840 <td>Data Coordinator</td>
1841 <td>Singapore</td>
1842 <td>64</td>
1843 <td>2012/04/09</td>
1844 <td>$138,575</td>
1845 </tr>
1846 <tr>
1847 <td>Zenaida Frank</td>
1848 <td>Software Engineer</td>
1849 <td>New York</td>
1850 <td>63</td>
1851 <td>2010/01/04</td>
1852 <td>$125,250</td>
1853 </tr>
1854 <tr>
1855 <td>Zorita Serrano</td>
1856 <td>Software Engineer</td>
1857 <td>San Francisco</td>
1858 <td>56</td>
1859 <td>2012/06/01</td>
1860 <td>$115,000</td>
1861 </tr>
1862 <tr>
1863 <td>Jennifer Acosta</td>
1864 <td>Junior Javascript Developer</td>
1865 <td>Edinburgh</td>
1866 <td>43</td>
1867 <td>2013/02/01</td>
1868 <td>$75,650</td>
1869 </tr>
1870 <tr>
1871 <td>Cara Stevens</td>
1872 <td>Sales Assistant</td>
1873 <td>New York</td>
1874 <td>46</td>
1875 <td>2011/12/06</td>
1876 <td>$145,600</td>
1877 </tr>
1878 <tr>
1879 <td>Hermione Butler</td>
1880 <td>Regional Director</td>
1881 <td>London</td>
1882 <td>47</td>
1883 <td>2011/03/21</td>
1884 <td>$356,250</td>
1885 </tr>
1886 <tr>
1887 <td>Lael Greer</td>
1888 <td>Systems Administrator</td>
1889 <td>London</td>
1890 <td>21</td>
1891 <td>2009/02/27</td>
1892 <td>$103,500</td>
1893 </tr>
1894 <tr>
1895 <td>Jonas Alexander</td>
1896 <td>Developer</td>
1897 <td>San Francisco</td>
1898 <td>30</td>
1899 <td>2010/07/14</td>
1900 <td>$86,500</td>
1901 </tr>
1902 <tr>
1903 <td>Shad Decker</td>
1904 <td>Regional Director</td>
1905 <td>Edinburgh</td>
1906 <td>51</td>
1907 <td>2008/11/13</td>
1908 <td>$183,000</td>
1909 </tr>
1910 <tr>
1911 <td>Michael Bruce</td>
1912 <td>Javascript Developer</td>
1913 <td>Singapore</td>
1914 <td>29</td>
1915 <td>2011/06/27</td>
1916 <td>$183,000</td>
1917 </tr>
1918 <tr>
1919 <td>Donna Snider</td>
1920 <td>Customer Support</td>
1921 <td>New York</td>
1922 <td>27</td>
1923 <td>2011/01/25</td>
1924 <td>$112,000</td>
1925 </tr>
1926 </tbody>
1927 </table>
1928 </div>
1929 </div>
1930 </div> <!-- end row -->
1931
1932
1933
1934 <div class="row">
1935 <div class="col-12">
1936 <div class="card-box table-responsive">
1937 <h4 class="m-t-0 header-title">Responsive example</h4>
1938 <p class="text-muted font-14 m-b-30">
1939 Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.
1940 </p>
1941
1942 <table id="responsive-datatable" class="table table-bordered table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
1943 <thead>
1944 <tr>
1945 <th>Name</th>
1946 <th>Position</th>
1947 <th>Office</th>
1948 <th>Age</th>
1949 <th>Start date</th>
1950 <th>Salary</th>
1951 </tr>
1952 </thead>
1953
1954
1955 <tbody>
1956 <tr>
1957 <td>Tiger Nixon</td>
1958 <td>System Architect</td>
1959 <td>Edinburgh</td>
1960 <td>61</td>
1961 <td>2011/04/25</td>
1962 <td>$320,800</td>
1963 </tr>
1964 <tr>
1965 <td>Garrett Winters</td>
1966 <td>Accountant</td>
1967 <td>Tokyo</td>
1968 <td>63</td>
1969 <td>2011/07/25</td>
1970 <td>$170,750</td>
1971 </tr>
1972 <tr>
1973 <td>Ashton Cox</td>
1974 <td>Junior Technical Author</td>
1975 <td>San Francisco</td>
1976 <td>66</td>
1977 <td>2009/01/12</td>
1978 <td>$86,000</td>
1979 </tr>
1980 <tr>
1981 <td>Cedric Kelly</td>
1982 <td>Senior Javascript Developer</td>
1983 <td>Edinburgh</td>
1984 <td>22</td>
1985 <td>2012/03/29</td>
1986 <td>$433,060</td>
1987 </tr>
1988 <tr>
1989 <td>Airi Satou</td>
1990 <td>Accountant</td>
1991 <td>Tokyo</td>
1992 <td>33</td>
1993 <td>2008/11/28</td>
1994 <td>$162,700</td>
1995 </tr>
1996 <tr>
1997 <td>Brielle Williamson</td>
1998 <td>Integration Specialist</td>
1999 <td>New York</td>
2000 <td>61</td>
2001 <td>2012/12/02</td>
2002 <td>$372,000</td>
2003 </tr>
2004 <tr>
2005 <td>Herrod Chandler</td>
2006 <td>Sales Assistant</td>
2007 <td>San Francisco</td>
2008 <td>59</td>
2009 <td>2012/08/06</td>
2010 <td>$137,500</td>
2011 </tr>
2012 <tr>
2013 <td>Rhona Davidson</td>
2014 <td>Integration Specialist</td>
2015 <td>Tokyo</td>
2016 <td>55</td>
2017 <td>2010/10/14</td>
2018 <td>$327,900</td>
2019 </tr>
2020 <tr>
2021 <td>Colleen Hurst</td>
2022 <td>Javascript Developer</td>
2023 <td>San Francisco</td>
2024 <td>39</td>
2025 <td>2009/09/15</td>
2026 <td>$205,500</td>
2027 </tr>
2028 <tr>
2029 <td>Sonya Frost</td>
2030 <td>Software Engineer</td>
2031 <td>Edinburgh</td>
2032 <td>23</td>
2033 <td>2008/12/13</td>
2034 <td>$103,600</td>
2035 </tr>
2036 <tr>
2037 <td>Jena Gaines</td>
2038 <td>Office Manager</td>
2039 <td>London</td>
2040 <td>30</td>
2041 <td>2008/12/19</td>
2042 <td>$90,560</td>
2043 </tr>
2044 <tr>
2045 <td>Quinn Flynn</td>
2046 <td>Support Lead</td>
2047 <td>Edinburgh</td>
2048 <td>22</td>
2049 <td>2013/03/03</td>
2050 <td>$342,000</td>
2051 </tr>
2052 <tr>
2053 <td>Charde Marshall</td>
2054 <td>Regional Director</td>
2055 <td>San Francisco</td>
2056 <td>36</td>
2057 <td>2008/10/16</td>
2058 <td>$470,600</td>
2059 </tr>
2060 <tr>
2061 <td>Haley Kennedy</td>
2062 <td>Senior Marketing Designer</td>
2063 <td>London</td>
2064 <td>43</td>
2065 <td>2012/12/18</td>
2066 <td>$313,500</td>
2067 </tr>
2068 <tr>
2069 <td>Tatyana Fitzpatrick</td>
2070 <td>Regional Director</td>
2071 <td>London</td>
2072 <td>19</td>
2073 <td>2010/03/17</td>
2074 <td>$385,750</td>
2075 </tr>
2076 <tr>
2077 <td>Michael Silva</td>
2078 <td>Marketing Designer</td>
2079 <td>London</td>
2080 <td>66</td>
2081 <td>2012/11/27</td>
2082 <td>$198,500</td>
2083 </tr>
2084 <tr>
2085 <td>Paul Byrd</td>
2086 <td>Chief Financial Officer (CFO)</td>
2087 <td>New York</td>
2088 <td>64</td>
2089 <td>2010/06/09</td>
2090 <td>$725,000</td>
2091 </tr>
2092 <tr>
2093 <td>Gloria Little</td>
2094 <td>Systems Administrator</td>
2095 <td>New York</td>
2096 <td>59</td>
2097 <td>2009/04/10</td>
2098 <td>$237,500</td>
2099 </tr>
2100 <tr>
2101 <td>Bradley Greer</td>
2102 <td>Software Engineer</td>
2103 <td>London</td>
2104 <td>41</td>
2105 <td>2012/10/13</td>
2106 <td>$132,000</td>
2107 </tr>
2108 <tr>
2109 <td>Dai Rios</td>
2110 <td>Personnel Lead</td>
2111 <td>Edinburgh</td>
2112 <td>35</td>
2113 <td>2012/09/26</td>
2114 <td>$217,500</td>
2115 </tr>
2116 <tr>
2117 <td>Jenette Caldwell</td>
2118 <td>Development Lead</td>
2119 <td>New York</td>
2120 <td>30</td>
2121 <td>2011/09/03</td>
2122 <td>$345,000</td>
2123 </tr>
2124 <tr>
2125 <td>Yuri Berry</td>
2126 <td>Chief Marketing Officer (CMO)</td>
2127 <td>New York</td>
2128 <td>40</td>
2129 <td>2009/06/25</td>
2130 <td>$675,000</td>
2131 </tr>
2132 <tr>
2133 <td>Caesar Vance</td>
2134 <td>Pre-Sales Support</td>
2135 <td>New York</td>
2136 <td>21</td>
2137 <td>2011/12/12</td>
2138 <td>$106,450</td>
2139 </tr>
2140 <tr>
2141 <td>Doris Wilder</td>
2142 <td>Sales Assistant</td>
2143 <td>Sidney</td>
2144 <td>23</td>
2145 <td>2010/09/20</td>
2146 <td>$85,600</td>
2147 </tr>
2148 <tr>
2149 <td>Angelica Ramos</td>
2150 <td>Chief Executive Officer (CEO)</td>
2151 <td>London</td>
2152 <td>47</td>
2153 <td>2009/10/09</td>
2154 <td>$1,200,000</td>
2155 </tr>
2156 <tr>
2157 <td>Gavin Joyce</td>
2158 <td>Developer</td>
2159 <td>Edinburgh</td>
2160 <td>42</td>
2161 <td>2010/12/22</td>
2162 <td>$92,575</td>
2163 </tr>
2164 <tr>
2165 <td>Jennifer Chang</td>
2166 <td>Regional Director</td>
2167 <td>Singapore</td>
2168 <td>28</td>
2169 <td>2010/11/14</td>
2170 <td>$357,650</td>
2171 </tr>
2172 <tr>
2173 <td>Brenden Wagner</td>
2174 <td>Software Engineer</td>
2175 <td>San Francisco</td>
2176 <td>28</td>
2177 <td>2011/06/07</td>
2178 <td>$206,850</td>
2179 </tr>
2180 <tr>
2181 <td>Fiona Green</td>
2182 <td>Chief Operating Officer (COO)</td>
2183 <td>San Francisco</td>
2184 <td>48</td>
2185 <td>2010/03/11</td>
2186 <td>$850,000</td>
2187 </tr>
2188 <tr>
2189 <td>Shou Itou</td>
2190 <td>Regional Marketing</td>
2191 <td>Tokyo</td>
2192 <td>20</td>
2193 <td>2011/08/14</td>
2194 <td>$163,000</td>
2195 </tr>
2196 <tr>
2197 <td>Michelle House</td>
2198 <td>Integration Specialist</td>
2199 <td>Sidney</td>
2200 <td>37</td>
2201 <td>2011/06/02</td>
2202 <td>$95,400</td>
2203 </tr>
2204 <tr>
2205 <td>Suki Burks</td>
2206 <td>Developer</td>
2207 <td>London</td>
2208 <td>53</td>
2209 <td>2009/10/22</td>
2210 <td>$114,500</td>
2211 </tr>
2212 <tr>
2213 <td>Prescott Bartlett</td>
2214 <td>Technical Author</td>
2215 <td>London</td>
2216 <td>27</td>
2217 <td>2011/05/07</td>
2218 <td>$145,000</td>
2219 </tr>
2220 <tr>
2221 <td>Gavin Cortez</td>
2222 <td>Team Leader</td>
2223 <td>San Francisco</td>
2224 <td>22</td>
2225 <td>2008/10/26</td>
2226 <td>$235,500</td>
2227 </tr>
2228 <tr>
2229 <td>Martena Mccray</td>
2230 <td>Post-Sales support</td>
2231 <td>Edinburgh</td>
2232 <td>46</td>
2233 <td>2011/03/09</td>
2234 <td>$324,050</td>
2235 </tr>
2236 <tr>
2237 <td>Unity Butler</td>
2238 <td>Marketing Designer</td>
2239 <td>San Francisco</td>
2240 <td>47</td>
2241 <td>2009/12/09</td>
2242 <td>$85,675</td>
2243 </tr>
2244 <tr>
2245 <td>Howard Hatfield</td>
2246 <td>Office Manager</td>
2247 <td>San Francisco</td>
2248 <td>51</td>
2249 <td>2008/12/16</td>
2250 <td>$164,500</td>
2251 </tr>
2252 <tr>
2253 <td>Hope Fuentes</td>
2254 <td>Secretary</td>
2255 <td>San Francisco</td>
2256 <td>41</td>
2257 <td>2010/02/12</td>
2258 <td>$109,850</td>
2259 </tr>
2260 <tr>
2261 <td>Vivian Harrell</td>
2262 <td>Financial Controller</td>
2263 <td>San Francisco</td>
2264 <td>62</td>
2265 <td>2009/02/14</td>
2266 <td>$452,500</td>
2267 </tr>
2268 <tr>
2269 <td>Timothy Mooney</td>
2270 <td>Office Manager</td>
2271 <td>London</td>
2272 <td>37</td>
2273 <td>2008/12/11</td>
2274 <td>$136,200</td>
2275 </tr>
2276 <tr>
2277 <td>Jackson Bradshaw</td>
2278 <td>Director</td>
2279 <td>New York</td>
2280 <td>65</td>
2281 <td>2008/09/26</td>
2282 <td>$645,750</td>
2283 </tr>
2284 <tr>
2285 <td>Olivia Liang</td>
2286 <td>Support Engineer</td>
2287 <td>Singapore</td>
2288 <td>64</td>
2289 <td>2011/02/03</td>
2290 <td>$234,500</td>
2291 </tr>
2292 <tr>
2293 <td>Bruno Nash</td>
2294 <td>Software Engineer</td>
2295 <td>London</td>
2296 <td>38</td>
2297 <td>2011/05/03</td>
2298 <td>$163,500</td>
2299 </tr>
2300 <tr>
2301 <td>Sakura Yamamoto</td>
2302 <td>Support Engineer</td>
2303 <td>Tokyo</td>
2304 <td>37</td>
2305 <td>2009/08/19</td>
2306 <td>$139,575</td>
2307 </tr>
2308 <tr>
2309 <td>Thor Walton</td>
2310 <td>Developer</td>
2311 <td>New York</td>
2312 <td>61</td>
2313 <td>2013/08/11</td>
2314 <td>$98,540</td>
2315 </tr>
2316 <tr>
2317 <td>Finn Camacho</td>
2318 <td>Support Engineer</td>
2319 <td>San Francisco</td>
2320 <td>47</td>
2321 <td>2009/07/07</td>
2322 <td>$87,500</td>
2323 </tr>
2324 <tr>
2325 <td>Serge Baldwin</td>
2326 <td>Data Coordinator</td>
2327 <td>Singapore</td>
2328 <td>64</td>
2329 <td>2012/04/09</td>
2330 <td>$138,575</td>
2331 </tr>
2332 <tr>
2333 <td>Zenaida Frank</td>
2334 <td>Software Engineer</td>
2335 <td>New York</td>
2336 <td>63</td>
2337 <td>2010/01/04</td>
2338 <td>$125,250</td>
2339 </tr>
2340 <tr>
2341 <td>Zorita Serrano</td>
2342 <td>Software Engineer</td>
2343 <td>San Francisco</td>
2344 <td>56</td>
2345 <td>2012/06/01</td>
2346 <td>$115,000</td>
2347 </tr>
2348 <tr>
2349 <td>Jennifer Acosta</td>
2350 <td>Junior Javascript Developer</td>
2351 <td>Edinburgh</td>
2352 <td>43</td>
2353 <td>2013/02/01</td>
2354 <td>$75,650</td>
2355 </tr>
2356 <tr>
2357 <td>Cara Stevens</td>
2358 <td>Sales Assistant</td>
2359 <td>New York</td>
2360 <td>46</td>
2361 <td>2011/12/06</td>
2362 <td>$145,600</td>
2363 </tr>
2364 <tr>
2365 <td>Hermione Butler</td>
2366 <td>Regional Director</td>
2367 <td>London</td>
2368 <td>47</td>
2369 <td>2011/03/21</td>
2370 <td>$356,250</td>
2371 </tr>
2372 <tr>
2373 <td>Lael Greer</td>
2374 <td>Systems Administrator</td>
2375 <td>London</td>
2376 <td>21</td>
2377 <td>2009/02/27</td>
2378 <td>$103,500</td>
2379 </tr>
2380 <tr>
2381 <td>Jonas Alexander</td>
2382 <td>Developer</td>
2383 <td>San Francisco</td>
2384 <td>30</td>
2385 <td>2010/07/14</td>
2386 <td>$86,500</td>
2387 </tr>
2388 <tr>
2389 <td>Shad Decker</td>
2390 <td>Regional Director</td>
2391 <td>Edinburgh</td>
2392 <td>51</td>
2393 <td>2008/11/13</td>
2394 <td>$183,000</td>
2395 </tr>
2396 <tr>
2397 <td>Michael Bruce</td>
2398 <td>Javascript Developer</td>
2399 <td>Singapore</td>
2400 <td>29</td>
2401 <td>2011/06/27</td>
2402 <td>$183,000</td>
2403 </tr>
2404 <tr>
2405 <td>Donna Snider</td>
2406 <td>Customer Support</td>
2407 <td>New York</td>
2408 <td>27</td>
2409 <td>2011/01/25</td>
2410 <td>$112,000</td>
2411 </tr>
2412 </tbody>
2413 </table>
2414 </div>
2415 </div>
2416 </div> <!-- end row -->
2417
2418
2419 <div class="row">
2420 <div class="col-12">
2421 <div class="card-box table-responsive">
2422 <h4 class="m-t-0 header-title">Multi item selection</h4>
2423 <p class="text-muted font-14 m-b-30">
2424 This example shows the multi option. Note how a click on a row will toggle its selected state without effecting other rows, unlike the os and single options shown in other examples.
2425 </p>
2426
2427 <table id="selection-datatable" class="table table-bordered dt-responsive nowrap" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
2428 <thead>
2429 <tr>
2430 <th>Name</th>
2431 <th>Position</th>
2432 <th>Office</th>
2433 <th>Age</th>
2434 <th>Start date</th>
2435 <th>Salary</th>
2436 </tr>
2437 </thead>
2438
2439
2440 <tbody>
2441 <tr>
2442 <td>Tiger Nixon</td>
2443 <td>System Architect</td>
2444 <td>Edinburgh</td>
2445 <td>61</td>
2446 <td>2011/04/25</td>
2447 <td>$320,800</td>
2448 </tr>
2449 <tr>
2450 <td>Garrett Winters</td>
2451 <td>Accountant</td>
2452 <td>Tokyo</td>
2453 <td>63</td>
2454 <td>2011/07/25</td>
2455 <td>$170,750</td>
2456 </tr>
2457 <tr>
2458 <td>Ashton Cox</td>
2459 <td>Junior Technical Author</td>
2460 <td>San Francisco</td>
2461 <td>66</td>
2462 <td>2009/01/12</td>
2463 <td>$86,000</td>
2464 </tr>
2465 <tr>
2466 <td>Cedric Kelly</td>
2467 <td>Senior Javascript Developer</td>
2468 <td>Edinburgh</td>
2469 <td>22</td>
2470 <td>2012/03/29</td>
2471 <td>$433,060</td>
2472 </tr>
2473 <tr>
2474 <td>Airi Satou</td>
2475 <td>Accountant</td>
2476 <td>Tokyo</td>
2477 <td>33</td>
2478 <td>2008/11/28</td>
2479 <td>$162,700</td>
2480 </tr>
2481 <tr>
2482 <td>Brielle Williamson</td>
2483 <td>Integration Specialist</td>
2484 <td>New York</td>
2485 <td>61</td>
2486 <td>2012/12/02</td>
2487 <td>$372,000</td>
2488 </tr>
2489 <tr>
2490 <td>Herrod Chandler</td>
2491 <td>Sales Assistant</td>
2492 <td>San Francisco</td>
2493 <td>59</td>
2494 <td>2012/08/06</td>
2495 <td>$137,500</td>
2496 </tr>
2497 <tr>
2498 <td>Rhona Davidson</td>
2499 <td>Integration Specialist</td>
2500 <td>Tokyo</td>
2501 <td>55</td>
2502 <td>2010/10/14</td>
2503 <td>$327,900</td>
2504 </tr>
2505 <tr>
2506 <td>Colleen Hurst</td>
2507 <td>Javascript Developer</td>
2508 <td>San Francisco</td>
2509 <td>39</td>
2510 <td>2009/09/15</td>
2511 <td>$205,500</td>
2512 </tr>
2513 <tr>
2514 <td>Sonya Frost</td>
2515 <td>Software Engineer</td>
2516 <td>Edinburgh</td>
2517 <td>23</td>
2518 <td>2008/12/13</td>
2519 <td>$103,600</td>
2520 </tr>
2521 <tr>
2522 <td>Jena Gaines</td>
2523 <td>Office Manager</td>
2524 <td>London</td>
2525 <td>30</td>
2526 <td>2008/12/19</td>
2527 <td>$90,560</td>
2528 </tr>
2529 <tr>
2530 <td>Quinn Flynn</td>
2531 <td>Support Lead</td>
2532 <td>Edinburgh</td>
2533 <td>22</td>
2534 <td>2013/03/03</td>
2535 <td>$342,000</td>
2536 </tr>
2537 <tr>
2538 <td>Charde Marshall</td>
2539 <td>Regional Director</td>
2540 <td>San Francisco</td>
2541 <td>36</td>
2542 <td>2008/10/16</td>
2543 <td>$470,600</td>
2544 </tr>
2545 <tr>
2546 <td>Haley Kennedy</td>
2547 <td>Senior Marketing Designer</td>
2548 <td>London</td>
2549 <td>43</td>
2550 <td>2012/12/18</td>
2551 <td>$313,500</td>
2552 </tr>
2553 <tr>
2554 <td>Tatyana Fitzpatrick</td>
2555 <td>Regional Director</td>
2556 <td>London</td>
2557 <td>19</td>
2558 <td>2010/03/17</td>
2559 <td>$385,750</td>
2560 </tr>
2561 <tr>
2562 <td>Michael Silva</td>
2563 <td>Marketing Designer</td>
2564 <td>London</td>
2565 <td>66</td>
2566 <td>2012/11/27</td>
2567 <td>$198,500</td>
2568 </tr>
2569 <tr>
2570 <td>Paul Byrd</td>
2571 <td>Chief Financial Officer (CFO)</td>
2572 <td>New York</td>
2573 <td>64</td>
2574 <td>2010/06/09</td>
2575 <td>$725,000</td>
2576 </tr>
2577 <tr>
2578 <td>Gloria Little</td>
2579 <td>Systems Administrator</td>
2580 <td>New York</td>
2581 <td>59</td>
2582 <td>2009/04/10</td>
2583 <td>$237,500</td>
2584 </tr>
2585 <tr>
2586 <td>Bradley Greer</td>
2587 <td>Software Engineer</td>
2588 <td>London</td>
2589 <td>41</td>
2590 <td>2012/10/13</td>
2591 <td>$132,000</td>
2592 </tr>
2593 <tr>
2594 <td>Dai Rios</td>
2595 <td>Personnel Lead</td>
2596 <td>Edinburgh</td>
2597 <td>35</td>
2598 <td>2012/09/26</td>
2599 <td>$217,500</td>
2600 </tr>
2601 <tr>
2602 <td>Jenette Caldwell</td>
2603 <td>Development Lead</td>
2604 <td>New York</td>
2605 <td>30</td>
2606 <td>2011/09/03</td>
2607 <td>$345,000</td>
2608 </tr>
2609 <tr>
2610 <td>Yuri Berry</td>
2611 <td>Chief Marketing Officer (CMO)</td>
2612 <td>New York</td>
2613 <td>40</td>
2614 <td>2009/06/25</td>
2615 <td>$675,000</td>
2616 </tr>
2617 <tr>
2618 <td>Caesar Vance</td>
2619 <td>Pre-Sales Support</td>
2620 <td>New York</td>
2621 <td>21</td>
2622 <td>2011/12/12</td>
2623 <td>$106,450</td>
2624 </tr>
2625 <tr>
2626 <td>Doris Wilder</td>
2627 <td>Sales Assistant</td>
2628 <td>Sidney</td>
2629 <td>23</td>
2630 <td>2010/09/20</td>
2631 <td>$85,600</td>
2632 </tr>
2633 <tr>
2634 <td>Angelica Ramos</td>
2635 <td>Chief Executive Officer (CEO)</td>
2636 <td>London</td>
2637 <td>47</td>
2638 <td>2009/10/09</td>
2639 <td>$1,200,000</td>
2640 </tr>
2641 <tr>
2642 <td>Gavin Joyce</td>
2643 <td>Developer</td>
2644 <td>Edinburgh</td>
2645 <td>42</td>
2646 <td>2010/12/22</td>
2647 <td>$92,575</td>
2648 </tr>
2649 <tr>
2650 <td>Jennifer Chang</td>
2651 <td>Regional Director</td>
2652 <td>Singapore</td>
2653 <td>28</td>
2654 <td>2010/11/14</td>
2655 <td>$357,650</td>
2656 </tr>
2657 <tr>
2658 <td>Brenden Wagner</td>
2659 <td>Software Engineer</td>
2660 <td>San Francisco</td>
2661 <td>28</td>
2662 <td>2011/06/07</td>
2663 <td>$206,850</td>
2664 </tr>
2665 <tr>
2666 <td>Fiona Green</td>
2667 <td>Chief Operating Officer (COO)</td>
2668 <td>San Francisco</td>
2669 <td>48</td>
2670 <td>2010/03/11</td>
2671 <td>$850,000</td>
2672 </tr>
2673 <tr>
2674 <td>Shou Itou</td>
2675 <td>Regional Marketing</td>
2676 <td>Tokyo</td>
2677 <td>20</td>
2678 <td>2011/08/14</td>
2679 <td>$163,000</td>
2680 </tr>
2681 <tr>
2682 <td>Michelle House</td>
2683 <td>Integration Specialist</td>
2684 <td>Sidney</td>
2685 <td>37</td>
2686 <td>2011/06/02</td>
2687 <td>$95,400</td>
2688 </tr>
2689 <tr>
2690 <td>Suki Burks</td>
2691 <td>Developer</td>
2692 <td>London</td>
2693 <td>53</td>
2694 <td>2009/10/22</td>
2695 <td>$114,500</td>
2696 </tr>
2697 <tr>
2698 <td>Prescott Bartlett</td>
2699 <td>Technical Author</td>
2700 <td>London</td>
2701 <td>27</td>
2702 <td>2011/05/07</td>
2703 <td>$145,000</td>
2704 </tr>
2705 <tr>
2706 <td>Gavin Cortez</td>
2707 <td>Team Leader</td>
2708 <td>San Francisco</td>
2709 <td>22</td>
2710 <td>2008/10/26</td>
2711 <td>$235,500</td>
2712 </tr>
2713 <tr>
2714 <td>Martena Mccray</td>
2715 <td>Post-Sales support</td>
2716 <td>Edinburgh</td>
2717 <td>46</td>
2718 <td>2011/03/09</td>
2719 <td>$324,050</td>
2720 </tr>
2721 <tr>
2722 <td>Unity Butler</td>
2723 <td>Marketing Designer</td>
2724 <td>San Francisco</td>
2725 <td>47</td>
2726 <td>2009/12/09</td>
2727 <td>$85,675</td>
2728 </tr>
2729 <tr>
2730 <td>Howard Hatfield</td>
2731 <td>Office Manager</td>
2732 <td>San Francisco</td>
2733 <td>51</td>
2734 <td>2008/12/16</td>
2735 <td>$164,500</td>
2736 </tr>
2737 <tr>
2738 <td>Hope Fuentes</td>
2739 <td>Secretary</td>
2740 <td>San Francisco</td>
2741 <td>41</td>
2742 <td>2010/02/12</td>
2743 <td>$109,850</td>
2744 </tr>
2745 <tr>
2746 <td>Vivian Harrell</td>
2747 <td>Financial Controller</td>
2748 <td>San Francisco</td>
2749 <td>62</td>
2750 <td>2009/02/14</td>
2751 <td>$452,500</td>
2752 </tr>
2753 <tr>
2754 <td>Timothy Mooney</td>
2755 <td>Office Manager</td>
2756 <td>London</td>
2757 <td>37</td>
2758 <td>2008/12/11</td>
2759 <td>$136,200</td>
2760 </tr>
2761 <tr>
2762 <td>Jackson Bradshaw</td>
2763 <td>Director</td>
2764 <td>New York</td>
2765 <td>65</td>
2766 <td>2008/09/26</td>
2767 <td>$645,750</td>
2768 </tr>
2769 <tr>
2770 <td>Olivia Liang</td>
2771 <td>Support Engineer</td>
2772 <td>Singapore</td>
2773 <td>64</td>
2774 <td>2011/02/03</td>
2775 <td>$234,500</td>
2776 </tr>
2777 <tr>
2778 <td>Bruno Nash</td>
2779 <td>Software Engineer</td>
2780 <td>London</td>
2781 <td>38</td>
2782 <td>2011/05/03</td>
2783 <td>$163,500</td>
2784 </tr>
2785 <tr>
2786 <td>Sakura Yamamoto</td>
2787 <td>Support Engineer</td>
2788 <td>Tokyo</td>
2789 <td>37</td>
2790 <td>2009/08/19</td>
2791 <td>$139,575</td>
2792 </tr>
2793 <tr>
2794 <td>Thor Walton</td>
2795 <td>Developer</td>
2796 <td>New York</td>
2797 <td>61</td>
2798 <td>2013/08/11</td>
2799 <td>$98,540</td>
2800 </tr>
2801 <tr>
2802 <td>Finn Camacho</td>
2803 <td>Support Engineer</td>
2804 <td>San Francisco</td>
2805 <td>47</td>
2806 <td>2009/07/07</td>
2807 <td>$87,500</td>
2808 </tr>
2809 <tr>
2810 <td>Serge Baldwin</td>
2811 <td>Data Coordinator</td>
2812 <td>Singapore</td>
2813 <td>64</td>
2814 <td>2012/04/09</td>
2815 <td>$138,575</td>
2816 </tr>
2817 <tr>
2818 <td>Zenaida Frank</td>
2819 <td>Software Engineer</td>
2820 <td>New York</td>
2821 <td>63</td>
2822 <td>2010/01/04</td>
2823 <td>$125,250</td>
2824 </tr>
2825 <tr>
2826 <td>Zorita Serrano</td>
2827 <td>Software Engineer</td>
2828 <td>San Francisco</td>
2829 <td>56</td>
2830 <td>2012/06/01</td>
2831 <td>$115,000</td>
2832 </tr>
2833 <tr>
2834 <td>Jennifer Acosta</td>
2835 <td>Junior Javascript Developer</td>
2836 <td>Edinburgh</td>
2837 <td>43</td>
2838 <td>2013/02/01</td>
2839 <td>$75,650</td>
2840 </tr>
2841 <tr>
2842 <td>Cara Stevens</td>
2843 <td>Sales Assistant</td>
2844 <td>New York</td>
2845 <td>46</td>
2846 <td>2011/12/06</td>
2847 <td>$145,600</td>
2848 </tr>
2849 <tr>
2850 <td>Hermione Butler</td>
2851 <td>Regional Director</td>
2852 <td>London</td>
2853 <td>47</td>
2854 <td>2011/03/21</td>
2855 <td>$356,250</td>
2856 </tr>
2857 <tr>
2858 <td>Lael Greer</td>
2859 <td>Systems Administrator</td>
2860 <td>London</td>
2861 <td>21</td>
2862 <td>2009/02/27</td>
2863 <td>$103,500</td>
2864 </tr>
2865 <tr>
2866 <td>Jonas Alexander</td>
2867 <td>Developer</td>
2868 <td>San Francisco</td>
2869 <td>30</td>
2870 <td>2010/07/14</td>
2871 <td>$86,500</td>
2872 </tr>
2873 <tr>
2874 <td>Shad Decker</td>
2875 <td>Regional Director</td>
2876 <td>Edinburgh</td>
2877 <td>51</td>
2878 <td>2008/11/13</td>
2879 <td>$183,000</td>
2880 </tr>
2881 <tr>
2882 <td>Michael Bruce</td>
2883 <td>Javascript Developer</td>
2884 <td>Singapore</td>
2885 <td>29</td>
2886 <td>2011/06/27</td>
2887 <td>$183,000</td>
2888 </tr>
2889 <tr>
2890 <td>Donna Snider</td>
2891 <td>Customer Support</td>
2892 <td>New York</td>
2893 <td>27</td>
2894 <td>2011/01/25</td>
2895 <td>$112,000</td>
2896 </tr>
2897 </tbody>
2898 </table>
2899 </div>
2900 </div>
2901 </div> <!-- end row -->
2902
2903 </div> <!-- end container-fluid -->
2904 </div>
2905 <!-- end wrapper -->
2906
2907
2908 <!-- Footer -->
2909 <footer class="footer">
2910 <div class="container">
2911 <div class="row">
2912 <div class="col-12 text-center">
2913 2018 © Highdmin. - Coderthemes.com
2914 </div>
2915 </div>
2916 </div>
2917 </footer>
2918 <!-- End Footer -->
2919
2920 <!-- jQuery -->
2921 <script src="assets/js/jquery.min.js"></script>
2922 <script src="assets/js/bootstrap.bundle.min.js"></script>
2923 <script src="assets/js/waves.js"></script>
2924 <script src="assets/js/jquery.slimscroll.js"></script>
2925
2926 <!-- Required datatable js -->
2927 <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
2928 <script src="../plugins/datatables/dataTables.bootstrap4.min.js"></script>
2929 <!-- Buttons examples -->
2930 <script src="../plugins/datatables/dataTables.buttons.min.js"></script>
2931 <script src="../plugins/datatables/buttons.bootstrap4.min.js"></script>
2932 <script src="../plugins/datatables/jszip.min.js"></script>
2933 <script src="../plugins/datatables/pdfmake.min.js"></script>
2934 <script src="../plugins/datatables/vfs_fonts.js"></script>
2935 <script src="../plugins/datatables/buttons.html5.min.js"></script>
2936 <script src="../plugins/datatables/buttons.print.min.js"></script>
2937
2938 <!-- Key Tables -->
2939 <script src="../plugins/datatables/dataTables.keyTable.min.js"></script>
2940
2941 <!-- Responsive examples -->
2942 <script src="../plugins/datatables/dataTables.responsive.min.js"></script>
2943 <script src="../plugins/datatables/responsive.bootstrap4.min.js"></script>
2944
2945 <!-- Selection table -->
2946 <script src="../plugins/datatables/dataTables.select.min.js"></script>
2947 <script>
2948 $(document).ready(function() {
2949
2950 // Default Datatable
2951 $('#datatable').DataTable();
2952
2953 //Buttons examples
2954 var table = $('#datatable-buttons').DataTable({
2955 lengthChange: false,
2956 buttons: ['copy', 'excel', 'pdf']
2957 });
2958
2959 // Key Tables
2960
2961 $('#key-table').DataTable({
2962 keys: true
2963 });
2964
2965 // Responsive Datatable
2966 $('#responsive-datatable').DataTable();
2967
2968 // Multi Selection Datatable
2969 $('#selection-datatable').DataTable({
2970 select: {
2971 style: 'multi'
2972 }
2973 });
2974
2975 table.buttons().container()
2976 .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
2977 } );
2978
2979 </script>
2980 <!-- App js -->
2981 <script src="assets/js/jquery.core.js"></script>
2982 <script src="assets/js/jquery.app.js"></script>
2983
2984 </body>
2985</html>