Last active
May 3, 2024 13:41
-
-
Save arvindsvt/9862634729b2a5e7a6a5d98692b209dc to your computer and use it in GitHub Desktop.
dark admin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| https://techzaa.getappui.com/velonic/index.html | |
| https://techzaa.getappui.com/velonic/layouts/tables-datatable.html | |
| file:///C:/Users/Dell/Desktop/New%20folder/New%20folder/New%20folder/techzaa.getappui.comveloniclayoutstables-datatable.html | |
| <html lang="en" data-bs-theme="dark" data-layout-mode="fluid" data-menu-color="dark" data-topbar-color="light" | |
| data-layout-position="fixed" data-sidenav-size="default" class="menuitem-active"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Datatables | Velonic - Bootstrap 5 Admin & Dashboard Template</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta content="A fully responsive admin theme which can be used to build CRM, CMS,ERP etc." name="description"> | |
| <meta content="Techzaa" name="author"> | |
| <!-- App favicon --> | |
| <link rel="shortcut icon" href="https://techzaa.getappui.com/velonic/layouts/assets/images/favicon.ico"> | |
| <!-- Datatables css --> | |
| <link | |
| href="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-bs5/css/dataTables.bootstrap5.min.css" | |
| rel="stylesheet" type="text/css"> | |
| <link | |
| href="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css" | |
| rel="stylesheet" type="text/css"> | |
| <link | |
| href="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css" | |
| rel="stylesheet" type="text/css"> | |
| <link | |
| href="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css" | |
| rel="stylesheet" type="text/css"> | |
| <link | |
| href="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css" | |
| rel="stylesheet" type="text/css"> | |
| <link | |
| href="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-select-bs5/css/select.bootstrap5.min.css" | |
| rel="stylesheet" type="text/css"> | |
| <!-- Theme Config Js --> | |
| <script src="https://techzaa.getappui.com/velonic/layouts/assets/js/config.js"></script> | |
| <!-- App css --> | |
| <link href="https://techzaa.getappui.com/velonic/layouts/assets/css/app.min.css" rel="stylesheet" type="text/css" | |
| id="app-style"> | |
| <!-- Icons css --> | |
| <link href="https://techzaa.getappui.com/velonic/layouts/assets/css/icons.min.css" rel="stylesheet" type="text/css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css" integrity="sha512-MqL4+Io386IOPMKKyplKII0pVW5e+kb+PI/I3N87G3fHIfrgNNsRpzIXEi+0MQC0sR9xZNqZqCYVcC61fL5+Vg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| </head> | |
| <body class="show"> | |
| <!-- Begin page --> | |
| <div class="wrapper"> | |
| <!-- ========== Topbar Start ========== --> | |
| <div class="navbar-custom"> | |
| <div class="topbar container-fluid"> | |
| <div class="d-flex align-items-center gap-1"> | |
| <!-- Topbar Brand Logo --> | |
| <div class="logo-topbar"> | |
| <!-- Logo light --> | |
| <a href="index.html" class="logo-light"> | |
| <span class="logo-lg"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/logo.png" | |
| alt="logo"> | |
| </span> | |
| <span class="logo-sm"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/logo-sm.png" | |
| alt="small logo"> | |
| </span> | |
| </a> | |
| <!-- Logo Dark --> | |
| <a href="index.html" class="logo-dark"> | |
| <span class="logo-lg"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/logo-dark.png" | |
| alt="dark logo"> | |
| </span> | |
| <span class="logo-sm"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/logo-sm.png" | |
| alt="small logo"> | |
| </span> | |
| </a> | |
| </div> | |
| <!-- Sidebar Menu Toggle Button --> | |
| <button class="button-toggle-menu"> | |
| <i class="ri-menu-line"></i> | |
| </button> | |
| <!-- Horizontal Menu Toggle Button --> | |
| <button class="navbar-toggle" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content"> | |
| <div class="lines"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </button> | |
| <!-- Topbar Search Form --> | |
| <div class="app-search d-none d-lg-block"> | |
| <form> | |
| <div class="input-group"> | |
| <input type="search" class="form-control" placeholder="Search..."> | |
| <span class="ri-search-line search-icon text-muted"></span> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <ul class="topbar-menu d-flex align-items-center gap-3"> | |
| <li class="dropdown d-lg-none"> | |
| <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" | |
| aria-haspopup="false" aria-expanded="false"> | |
| <i class="ri-search-line fs-22"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-animated dropdown-lg p-0"> | |
| <form class="p-3"> | |
| <input type="search" class="form-control" placeholder="Search ..." | |
| aria-label="Recipient's username"> | |
| </form> | |
| </div> | |
| </li> | |
| <li class="dropdown"> | |
| <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" | |
| aria-haspopup="false" aria-expanded="false"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/flags/us.jpg" | |
| alt="user-image" class="me-0 me-sm-1" height="12"> | |
| <span class="align-middle d-none d-lg-inline-block">English</span> <i | |
| class="ri-arrow-down-s-line d-none d-sm-inline-block align-middle"></i> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated"> | |
| <!-- item--> | |
| <a href="javascript:void(0);" class="dropdown-item"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/flags/germany.jpg" | |
| alt="user-image" class="me-1" height="12"> <span class="align-middle">German</span> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" class="dropdown-item"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/flags/italy.jpg" | |
| alt="user-image" class="me-1" height="12"> <span class="align-middle">Italian</span> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" class="dropdown-item"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/flags/spain.jpg" | |
| alt="user-image" class="me-1" height="12"> <span class="align-middle">Spanish</span> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" class="dropdown-item"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/flags/russia.jpg" | |
| alt="user-image" class="me-1" height="12"> <span class="align-middle">Russian</span> | |
| </a> | |
| </div> | |
| </li> | |
| <li class="dropdown notification-list"> | |
| <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" | |
| aria-haspopup="false" aria-expanded="false"> | |
| <i class="ri-mail-line fs-22"></i> | |
| <span class="noti-icon-badge badge text-bg-purple">4</span> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0"> | |
| <div class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border"> | |
| <div class="row align-items-center"> | |
| <div class="col"> | |
| <h6 class="m-0 fs-16 fw-semibold"> Messages</h6> | |
| </div> | |
| <div class="col-auto"> | |
| <a href="javascript: void(0);" class="text-dark text-decoration-underline"> | |
| <small>Clear All</small> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="max-height: 300px;" data-simplebar="init"> | |
| <div class="simplebar-wrapper" style="margin: 0px;"> | |
| <div class="simplebar-height-auto-observer-wrapper"> | |
| <div class="simplebar-height-auto-observer"></div> | |
| </div> | |
| <div class="simplebar-mask"> | |
| <div class="simplebar-offset" style="right: 0px; bottom: 0px;"> | |
| <div class="simplebar-content-wrapper" tabindex="0" role="region" | |
| aria-label="scrollable content" style="height: auto; overflow: hidden;"> | |
| <div class="simplebar-content" style="padding: 0px;"> | |
| <!-- item--> | |
| <a href="javascript:void(0);" | |
| class="dropdown-item p-0 notify-item read-noti card m-0 shadow-none"> | |
| <div class="card-body"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="notify-icon"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/users/avatar-1.jpg" | |
| class="img-fluid rounded-circle" alt=""> | |
| </div> | |
| </div> | |
| <div class="flex-grow-1 text-truncate ms-2"> | |
| <h5 class="noti-item-title fw-semibold fs-14"> | |
| Cristina Pride <small | |
| class="fw-normal text-muted float-end ms-1">1 | |
| day ago</small></h5> | |
| <small class="noti-item-subtitle text-muted">Hi, How | |
| are you? What about our | |
| next meeting</small> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" | |
| class="dropdown-item p-0 notify-item read-noti card m-0 shadow-none"> | |
| <div class="card-body"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="notify-icon"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/users/avatar-2.jpg" | |
| class="img-fluid rounded-circle" alt=""> | |
| </div> | |
| </div> | |
| <div class="flex-grow-1 text-truncate ms-2"> | |
| <h5 class="noti-item-title fw-semibold fs-14">Sam | |
| Garret <small | |
| class="fw-normal text-muted float-end ms-1">2 | |
| day ago</small></h5> | |
| <small class="noti-item-subtitle text-muted">Yeah | |
| everything is fine</small> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" | |
| class="dropdown-item p-0 notify-item read-noti card m-0 shadow-none"> | |
| <div class="card-body"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="notify-icon"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/users/avatar-3.jpg" | |
| class="img-fluid rounded-circle" alt=""> | |
| </div> | |
| </div> | |
| <div class="flex-grow-1 text-truncate ms-2"> | |
| <h5 class="noti-item-title fw-semibold fs-14">Karen | |
| Robinson <small | |
| class="fw-normal text-muted float-end ms-1">2 | |
| day ago</small></h5> | |
| <small class="noti-item-subtitle text-muted">Wow | |
| that's great</small> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" | |
| class="dropdown-item p-0 notify-item read-noti card m-0 shadow-none"> | |
| <div class="card-body"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="notify-icon"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/users/avatar-4.jpg" | |
| class="img-fluid rounded-circle" alt=""> | |
| </div> | |
| </div> | |
| <div class="flex-grow-1 text-truncate ms-2"> | |
| <h5 class="noti-item-title fw-semibold fs-14">Sherry | |
| Marshall <small | |
| class="fw-normal text-muted float-end ms-1">3 | |
| day ago</small></h5> | |
| <small class="noti-item-subtitle text-muted">Hi, How | |
| are you? What about our | |
| next meeting</small> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" | |
| class="dropdown-item p-0 notify-item read-noti card m-0 shadow-none"> | |
| <div class="card-body"> | |
| <div class="d-flex align-items-center"> | |
| <div class="flex-shrink-0"> | |
| <div class="notify-icon"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/users/avatar-5.jpg" | |
| class="img-fluid rounded-circle" alt=""> | |
| </div> | |
| </div> | |
| <div class="flex-grow-1 text-truncate ms-2"> | |
| <h5 class="noti-item-title fw-semibold fs-14">Shawn | |
| Millard <small | |
| class="fw-normal text-muted float-end ms-1">4 | |
| day ago</small></h5> | |
| <small class="noti-item-subtitle text-muted">Yeah | |
| everything is fine</small> | |
| </div> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="simplebar-placeholder" style="width: 0px; height: 0px;"></div> | |
| </div> | |
| <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;"> | |
| <div class="simplebar-scrollbar" style="width: 0px; display: none;"></div> | |
| </div> | |
| <div class="simplebar-track simplebar-vertical" style="visibility: hidden;"> | |
| <div class="simplebar-scrollbar" style="height: 0px; display: none;"></div> | |
| </div> | |
| </div> | |
| <!-- All--> | |
| <a href="javascript:void(0);" | |
| class="dropdown-item text-center text-primary text-decoration-underline fw-bold notify-item border-top border-light py-2"> | |
| View All | |
| </a> | |
| </div> | |
| </li> | |
| <li class="dropdown notification-list"> | |
| <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" | |
| aria-haspopup="false" aria-expanded="false"> | |
| <i class="ri-notification-3-line fs-22"></i> | |
| <span class="noti-icon-badge badge text-bg-pink">3</span> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg py-0"> | |
| <div class="p-2 border-top-0 border-start-0 border-end-0 border-dashed border"> | |
| <div class="row align-items-center"> | |
| <div class="col"> | |
| <h6 class="m-0 fs-16 fw-semibold"> Notification</h6> | |
| </div> | |
| <div class="col-auto"> | |
| <a href="javascript: void(0);" class="text-dark text-decoration-underline"> | |
| <small>Clear All</small> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="max-height: 300px;" data-simplebar="init"> | |
| <div class="simplebar-wrapper" style="margin: 0px;"> | |
| <div class="simplebar-height-auto-observer-wrapper"> | |
| <div class="simplebar-height-auto-observer"></div> | |
| </div> | |
| <div class="simplebar-mask"> | |
| <div class="simplebar-offset" style="right: 0px; bottom: 0px;"> | |
| <div class="simplebar-content-wrapper" tabindex="0" role="region" | |
| aria-label="scrollable content" style="height: auto; overflow: hidden;"> | |
| <div class="simplebar-content" style="padding: 0px;"> | |
| <!-- item--> | |
| <a href="javascript:void(0);" class="dropdown-item notify-item"> | |
| <div class="notify-icon bg-primary-subtle"> | |
| <i class="mdi mdi-comment-account-outline text-primary"></i> | |
| </div> | |
| <p class="notify-details">Caleb Flakelar commented on Admin | |
| <small class="noti-time">1 min ago</small> | |
| </p> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" class="dropdown-item notify-item"> | |
| <div class="notify-icon bg-warning-subtle"> | |
| <i class="mdi mdi-account-plus text-warning"></i> | |
| </div> | |
| <p class="notify-details">New user registered. | |
| <small class="noti-time">5 hours ago</small> | |
| </p> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" class="dropdown-item notify-item"> | |
| <div class="notify-icon bg-danger-subtle"> | |
| <i class="mdi mdi-heart text-danger"></i> | |
| </div> | |
| <p class="notify-details">Carlos Crouch liked | |
| <small class="noti-time">3 days ago</small> | |
| </p> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" class="dropdown-item notify-item"> | |
| <div class="notify-icon bg-pink-subtle"> | |
| <i class="mdi mdi-comment-account-outline text-pink"></i> | |
| </div> | |
| <p class="notify-details">Caleb Flakelar commented on Admi | |
| <small class="noti-time">4 days ago</small> | |
| </p> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" class="dropdown-item notify-item"> | |
| <div class="notify-icon bg-purple-subtle"> | |
| <i class="mdi mdi-account-plus text-purple"></i> | |
| </div> | |
| <p class="notify-details">New user registered. | |
| <small class="noti-time">7 days ago</small> | |
| </p> | |
| </a> | |
| <!-- item--> | |
| <a href="javascript:void(0);" class="dropdown-item notify-item"> | |
| <div class="notify-icon bg-success-subtle"> | |
| <i class="mdi mdi-heart text-success"></i> | |
| </div> | |
| <p class="notify-details">Carlos Crouch liked <b>Admin</b>. | |
| <small class="noti-time">Carlos Crouch liked</small> | |
| </p> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="simplebar-placeholder" style="width: 0px; height: 0px;"></div> | |
| </div> | |
| <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;"> | |
| <div class="simplebar-scrollbar" style="width: 0px; display: none;"></div> | |
| </div> | |
| <div class="simplebar-track simplebar-vertical" style="visibility: hidden;"> | |
| <div class="simplebar-scrollbar" style="height: 0px; display: none;"></div> | |
| </div> | |
| </div> | |
| <!-- All--> | |
| <a href="javascript:void(0);" | |
| class="dropdown-item text-center text-primary text-decoration-underline fw-bold notify-item border-top border-light py-2"> | |
| View All | |
| </a> | |
| </div> | |
| </li> | |
| <li class="d-none d-sm-inline-block"> | |
| <a class="nav-link" data-bs-toggle="offcanvas" href="#theme-settings-offcanvas"> | |
| <i class="ri-settings-3-line fs-22"></i> | |
| </a> | |
| </li> | |
| <li class="d-none d-sm-inline-block"> | |
| <div class="nav-link" id="light-dark-mode"> | |
| <i class="ri-moon-line fs-22"></i> | |
| </div> | |
| </li> | |
| <li class="dropdown"> | |
| <a class="nav-link dropdown-toggle arrow-none nav-user" data-bs-toggle="dropdown" href="#" | |
| role="button" aria-haspopup="false" aria-expanded="false"> | |
| <span class="account-user-avatar"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/users/avatar-1.jpg" | |
| alt="user-image" width="32" class="rounded-circle"> | |
| </span> | |
| <span class="d-lg-block d-none"> | |
| <h5 class="my-0 fw-normal">Thomson <i | |
| class="ri-arrow-down-s-line d-none d-sm-inline-block align-middle"></i></h5> | |
| </span> | |
| </a> | |
| <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated profile-dropdown"> | |
| <!-- item--> | |
| <div class=" dropdown-header noti-title"> | |
| <h6 class="text-overflow m-0">Welcome !</h6> | |
| </div> | |
| <!-- item--> | |
| <a href="pages-profile.html" class="dropdown-item"> | |
| <i class="ri-account-circle-line fs-18 align-middle me-1"></i> | |
| <span>My Account</span> | |
| </a> | |
| <!-- item--> | |
| <a href="pages-profile.html" class="dropdown-item"> | |
| <i class="ri-settings-4-line fs-18 align-middle me-1"></i> | |
| <span>Settings</span> | |
| </a> | |
| <!-- item--> | |
| <a href="pages-faq.html" class="dropdown-item"> | |
| <i class="ri-customer-service-2-line fs-18 align-middle me-1"></i> | |
| <span>Support</span> | |
| </a> | |
| <!-- item--> | |
| <a href="auth-lock-screen.html" class="dropdown-item"> | |
| <i class="ri-lock-password-line fs-18 align-middle me-1"></i> | |
| <span>Lock Screen</span> | |
| </a> | |
| <!-- item--> | |
| <a href="auth-logout-2.html" class="dropdown-item"> | |
| <i class="ri-logout-box-line fs-18 align-middle me-1"></i> | |
| <span>Logout</span> | |
| </a> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- ========== Topbar End ========== --> | |
| <!-- ========== Left Sidebar Start ========== --> | |
| <div class="leftside-menu menuitem-active"> | |
| <!-- Brand Logo Light --> | |
| <a href="index.html" class="logo logo-light" contextmenu="fcltHTML5Menu1"> | |
| <span class="logo-lg"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/logo.png" alt="logo"> | |
| </span> | |
| <span class="logo-sm"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/logo-sm.png" alt="small logo"> | |
| </span> | |
| </a> | |
| <!-- Brand Logo Dark --> | |
| <a href="index.html" class="logo logo-dark"> | |
| <span class="logo-lg"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/logo-dark.png" alt="dark logo"> | |
| </span> | |
| <span class="logo-sm"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/logo-sm.png" alt="small logo"> | |
| </span> | |
| </a> | |
| <!-- Sidebar -left --> | |
| <div class="h-100 show" id="leftside-menu-container" data-simplebar="init"> | |
| <div class="simplebar-wrapper" style="margin: 0px;"> | |
| <div class="simplebar-height-auto-observer-wrapper"> | |
| <div class="simplebar-height-auto-observer"></div> | |
| </div> | |
| <div class="simplebar-mask"> | |
| <div class="simplebar-offset" style="right: 0px; bottom: 0px;"> | |
| <div class="simplebar-content-wrapper" tabindex="0" role="region" | |
| aria-label="scrollable content" style="height: 100%; overflow: hidden scroll;"> | |
| <div class="simplebar-content" style="padding: 0px;"> | |
| <!--- Sidemenu --> | |
| <ul class="side-nav"> | |
| <li class="side-nav-title">Main</li> | |
| <li class="side-nav-item"> | |
| <a href="index.html" class="side-nav-link"> | |
| <i class="ri-dashboard-3-line"></i> | |
| <span class="badge bg-success float-end">9+</span> | |
| <span> Dashboard </span> | |
| </a> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarPages" aria-expanded="false" | |
| aria-controls="sidebarPages" class="side-nav-link"> | |
| <i class="ri-pages-line"></i> | |
| <span> Pages </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarPages"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="pages-starter.html">Starter Page</a> | |
| </li> | |
| <li> | |
| <a href="pages-contact-list.html">Contact List</a> | |
| </li> | |
| <li> | |
| <a href="pages-profile.html">Profile</a> | |
| </li> | |
| <li> | |
| <a href="pages-timeline.html">Timeline</a> | |
| </li> | |
| <li> | |
| <a href="pages-invoice.html">Invoice</a> | |
| </li> | |
| <li> | |
| <a href="pages-faq.html">FAQ</a> | |
| </li> | |
| <li> | |
| <a href="pages-pricing.html">Pricing</a> | |
| </li> | |
| <li> | |
| <a href="pages-maintenance.html">Maintenance</a> | |
| </li> | |
| <li> | |
| <a href="error-404.html">Error 404</a> | |
| </li> | |
| <li> | |
| <a href="error-404-alt.html">Error 404-alt</a> | |
| </li> | |
| <li> | |
| <a href="error-500.html">Error 500</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarPagesAuth" aria-expanded="false" | |
| aria-controls="sidebarPagesAuth" class="side-nav-link"> | |
| <i class="ri-group-2-line"></i> | |
| <span> Authentication </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarPagesAuth"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="auth-login.html">Login</a> | |
| </li> | |
| <li> | |
| <a href="auth-register.html">Register</a> | |
| </li> | |
| <li> | |
| <a href="auth-logout.html">Logout</a> | |
| </li> | |
| <li> | |
| <a href="auth-forgotpw.html">Forgot Password</a> | |
| </li> | |
| <li> | |
| <a href="auth-lock-screen.html">Lock Screen</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarLayouts" aria-expanded="false" | |
| aria-controls="sidebarLayouts" class="side-nav-link"> | |
| <i class="ri-layout-line"></i> | |
| <span class="badge bg-warning float-end">New</span> | |
| <span> Layouts </span> | |
| </a> | |
| <div class="collapse" id="sidebarLayouts"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="layouts-horizontal.html" target="_blank">Horizontal</a> | |
| </li> | |
| <li> | |
| <a href="layouts-light-sidebar.html" target="_blank">Light | |
| Sidebar</a> | |
| </li> | |
| <li> | |
| <a href="layouts-sm-sidebar.html" target="_blank">Small | |
| Sidebar</a> | |
| </li> | |
| <li> | |
| <a href="layouts-collapsed-sidebar.html" | |
| target="_blank">Collapsed Sidebar</a> | |
| </li> | |
| <li> | |
| <a href="layouts-unsticky-layout.html" target="_blank">Unsticky | |
| Layout</a> | |
| </li> | |
| <li> | |
| <a href="layouts-boxed.html" target="_blank">Boxed Layout</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-title">Components</li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarBaseUI" aria-expanded="false" | |
| aria-controls="sidebarBaseUI" class="side-nav-link"> | |
| <i class="ri-briefcase-line"></i> | |
| <span> Base UI </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarBaseUI"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="ui-accordions.html">Accordions</a> | |
| </li> | |
| <li> | |
| <a href="ui-alerts.html">Alerts</a> | |
| </li> | |
| <li> | |
| <a href="ui-avatars.html">Avatars</a> | |
| </li> | |
| <li> | |
| <a href="ui-buttons.html">Buttons</a> | |
| </li> | |
| <li> | |
| <a href="ui-badges.html">Badges</a> | |
| </li> | |
| <li> | |
| <a href="ui-breadcrumb.html">Breadcrumb</a> | |
| </li> | |
| <li> | |
| <a href="ui-cards.html">Cards</a> | |
| </li> | |
| <li> | |
| <a href="ui-carousel.html">Carousel</a> | |
| </li> | |
| <li> | |
| <a href="ui-collapse.html">Collapse</a> | |
| </li> | |
| <li> | |
| <a href="ui-dropdowns.html">Dropdowns</a> | |
| </li> | |
| <li> | |
| <a href="ui-embed-video.html">Embed Video</a> | |
| </li> | |
| <li> | |
| <a href="ui-grid.html">Grid</a> | |
| </li> | |
| <li> | |
| <a href="ui-links.html">Links</a> | |
| </li> | |
| <li> | |
| <a href="ui-list-group.html">List Group</a> | |
| </li> | |
| <li> | |
| <a href="ui-modals.html">Modals</a> | |
| </li> | |
| <li> | |
| <a href="ui-notifications.html">Notifications</a> | |
| </li> | |
| <li> | |
| <a href="ui-offcanvas.html">Offcanvas</a> | |
| </li> | |
| <li> | |
| <a href="ui-placeholders.html">Placeholders</a> | |
| </li> | |
| <li> | |
| <a href="ui-pagination.html">Pagination</a> | |
| </li> | |
| <li> | |
| <a href="ui-popovers.html">Popovers</a> | |
| </li> | |
| <li> | |
| <a href="ui-progress.html">Progress</a> | |
| </li> | |
| <li> | |
| <a href="ui-spinners.html">Spinners</a> | |
| </li> | |
| <li> | |
| <a href="ui-tabs.html">Tabs</a> | |
| </li> | |
| <li> | |
| <a href="ui-tooltips.html">Tooltips</a> | |
| </li> | |
| <li> | |
| <a href="ui-typography.html">Typography</a> | |
| </li> | |
| <li> | |
| <a href="ui-utilities.html">Utilities</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarExtendedUI" aria-expanded="false" | |
| aria-controls="sidebarExtendedUI" class="side-nav-link"> | |
| <i class="ri-compasses-2-line"></i> | |
| <span> Extended UI </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarExtendedUI"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="extended-portlets.html">Portlets</a> | |
| </li> | |
| <li> | |
| <a href="extended-scrollbar.html">Scrollbar</a> | |
| </li> | |
| <li> | |
| <a href="extended-range-slider.html">Range Slider</a> | |
| </li> | |
| <li> | |
| <a href="extended-scrollspy.html">Scrollspy</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarIcons" aria-expanded="false" | |
| aria-controls="sidebarIcons" class="side-nav-link"> | |
| <i class="ri-pencil-ruler-2-line"></i> | |
| <span> Icons </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarIcons"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="icons-remixicons.html">Remix Icons</a> | |
| </li> | |
| <li> | |
| <a href="icons-bootstrap.html">Bootstrap Icons</a> | |
| </li> | |
| <li> | |
| <a href="icons-mdi.html">Material Design Icons</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarCharts" aria-expanded="false" | |
| aria-controls="sidebarCharts" class="side-nav-link"> | |
| <i class="ri-donut-chart-fill"></i> | |
| <span> Charts </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarCharts"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="charts-apex.html">Apex Charts</a> | |
| </li> | |
| <li> | |
| <a href="charts-chartjs.html">Chartjs</a> | |
| </li> | |
| <li> | |
| <a href="charts-sparklines.html">Sparkline Charts</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarForms" aria-expanded="false" | |
| aria-controls="sidebarForms" class="side-nav-link"> | |
| <i class="ri-survey-line"></i> | |
| <span> Forms </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarForms"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="form-elements.html">Basic Elements</a> | |
| </li> | |
| <li> | |
| <a href="form-advanced.html">Form Advanced</a> | |
| </li> | |
| <li> | |
| <a href="form-validation.html">Form Validation</a> | |
| </li> | |
| <li> | |
| <a href="form-wizard.html">Form Wizard</a> | |
| </li> | |
| <li> | |
| <a href="form-fileuploads.html">File Uploads</a> | |
| </li> | |
| <li> | |
| <a href="form-editors.html">Form Editors</a> | |
| </li> | |
| <li> | |
| <a href="form-image-crop.html">Image Crop</a> | |
| </li> | |
| <li> | |
| <a href="form-x-editable.html">X Editable</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-item menuitem-active"> | |
| <a data-bs-toggle="collapse" href="#sidebarTables" aria-expanded="false" | |
| aria-controls="sidebarTables" class="side-nav-link"> | |
| <i class="ri-table-line"></i> | |
| <span> Tables </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse show" id="sidebarTables"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="tables-basic.html">Basic Tables</a> | |
| </li> | |
| <li class="menuitem-active"> | |
| <a href="tables-datatable.html" class="active">Data Tables</a> | |
| </li> | |
| <li> | |
| <a href="tables-editable.html">Editable Tables</a> | |
| </li> | |
| <li> | |
| <a href="tables-responsive.html">Responsive Table</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarMaps" aria-expanded="false" | |
| aria-controls="sidebarMaps" class="side-nav-link"> | |
| <i class="ri-map-pin-line"></i> | |
| <span> Maps </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarMaps"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="maps-google.html">Google Maps</a> | |
| </li> | |
| <li> | |
| <a href="maps-vector.html">Vector Maps</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarMultiLevel" aria-expanded="false" | |
| aria-controls="sidebarMultiLevel" class="side-nav-link"> | |
| <i class="ri-share-line"></i> | |
| <span> Multi Level </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarMultiLevel"> | |
| <ul class="side-nav-second-level"> | |
| <li> | |
| <a href="javascript: void(0);">Level 1.1</a> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarSecondLevel" | |
| aria-expanded="false" aria-controls="sidebarSecondLevel"> | |
| <span> Level 1.2 </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarSecondLevel"> | |
| <ul class="side-nav-third-level"> | |
| <li> | |
| <a href="javascript: void(0);">Item 1</a> | |
| </li> | |
| <li> | |
| <a href="javascript: void(0);">Item 2</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" href="#sidebarThirdLevel" | |
| aria-expanded="false" aria-controls="sidebarThirdLevel"> | |
| <span> Level 1.3 </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarThirdLevel"> | |
| <ul class="side-nav-third-level"> | |
| <li> | |
| <a href="javascript: void(0);">Item 1</a> | |
| </li> | |
| <li class="side-nav-item"> | |
| <a data-bs-toggle="collapse" | |
| href="#sidebarFourthLevel" aria-expanded="false" | |
| aria-controls="sidebarFourthLevel"> | |
| <span> Item 2 </span> | |
| <span class="menu-arrow"></span> | |
| </a> | |
| <div class="collapse" id="sidebarFourthLevel"> | |
| <ul class="side-nav-forth-level"> | |
| <li> | |
| <a href="javascript: void(0);">Item | |
| 2.1</a> | |
| </li> | |
| <li> | |
| <a href="javascript: void(0);">Item | |
| 2.2</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| </ul> | |
| <!--- End Sidemenu --> | |
| <div class="clearfix"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="simplebar-placeholder" style="width: auto; height: 812px;"></div> | |
| </div> | |
| <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;"> | |
| <div class="simplebar-scrollbar" style="width: 0px; display: none;"></div> | |
| </div> | |
| <div class="simplebar-track simplebar-vertical" style="visibility: visible;"> | |
| <div class="simplebar-scrollbar" | |
| style="height: 25px; transform: translate3d(0px, 12px, 0px); display: block;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========== Left Sidebar End ========== --> | |
| <!-- ============================================================== --> | |
| <!-- Start Page Content here --> | |
| <!-- ============================================================== --> | |
| <div class="content-page"> | |
| <div class="content"> | |
| <!-- Start Content--> | |
| <div class="container-fluid"> | |
| <!-- start page title --> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="page-title-box"> | |
| <div class="page-title-right"> | |
| <ol class="breadcrumb m-0"> | |
| <li class="breadcrumb-item"><a href="javascript: void(0);">Velonic</a></li> | |
| <li class="breadcrumb-item"><a href="javascript: void(0);">Tables</a></li> | |
| <li class="breadcrumb-item active">Data Tables</li> | |
| </ol> | |
| </div> | |
| <h4 class="page-title">Data Tables</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end page title --> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h4 class="header-title">Basic Data Table</h4> | |
| <p class="text-muted mb-0"> | |
| 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>. 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. | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div id="basic-datatable_wrapper" | |
| class="dataTables_wrapper dt-bootstrap5 no-footer"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <table id="basic-datatable" | |
| class="table table-striped dt-responsive nowrap w-100 dataTable no-footer dtr-inline" | |
| aria-describedby="basic-datatable_info" | |
| style="position: relative; width: 1110px;"> | |
| <thead> | |
| <tr> | |
| <th class="sorting sorting_asc" tabindex="0" | |
| aria-controls="basic-datatable" rowspan="1" colspan="1" | |
| style="width: 173.8px;" aria-sort="ascending" | |
| aria-label="Name: activate to sort column descending"> | |
| Name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="basic-datatable" rowspan="1" colspan="1" | |
| style="width: 261.8px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="basic-datatable" rowspan="1" colspan="1" | |
| style="width: 123.8px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="basic-datatable" rowspan="1" colspan="1" | |
| style="width: 58.8px;" | |
| aria-label="Age: activate to sort column ascending">Age | |
| </th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="basic-datatable" rowspan="1" colspan="1" | |
| style="width: 114.8px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| Start date</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="basic-datatable" rowspan="1" colspan="1" | |
| style="width: 105.8px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1"> | |
| <div | |
| style="position: absolute; height: 1px; width: 0px; overflow: hidden;"> | |
| <input type="text" tabindex="0"></div>Airi Satou | |
| </td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>33</td> | |
| <td>2008/11/28</td> | |
| <td>$162,700</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Angelica Ramos</td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2009/10/09</td> | |
| <td>$1,200,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Ashton Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>San Francisco</td> | |
| <td>66</td> | |
| <td>2009/01/12</td> | |
| <td>$86,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Bradley Greer</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>41</td> | |
| <td>2012/10/13</td> | |
| <td>$132,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Brenden Wagner</td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>28</td> | |
| <td>2011/06/07</td> | |
| <td>$206,850</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Brielle Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2012/12/02</td> | |
| <td>$372,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Bruno Nash</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>38</td> | |
| <td>2011/05/03</td> | |
| <td>$163,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Caesar Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>New York</td> | |
| <td>21</td> | |
| <td>2011/12/12</td> | |
| <td>$106,450</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Cara Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>New York</td> | |
| <td>46</td> | |
| <td>2011/12/06</td> | |
| <td>$145,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Cedric Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2012/03/29</td> | |
| <td>$433,060</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="basic-datatable_info" role="status" | |
| aria-live="polite">Showing 1 to 10 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"> | |
| <div class="dataTables_paginate paging_simple_numbers" | |
| id="basic-datatable_paginate"> | |
| <ul class="pagination pagination-rounded"> | |
| <li class="paginate_button page-item previous disabled" | |
| id="basic-datatable_previous"><a href="#" | |
| aria-controls="basic-datatable" data-dt-idx="0" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-left-s-line"></i></a></li> | |
| <li class="paginate_button page-item active"><a href="#" | |
| aria-controls="basic-datatable" data-dt-idx="1" | |
| tabindex="0" class="page-link">1</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="basic-datatable" data-dt-idx="2" | |
| tabindex="0" class="page-link">2</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="basic-datatable" data-dt-idx="3" | |
| tabindex="0" class="page-link">3</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="basic-datatable" data-dt-idx="4" | |
| tabindex="0" class="page-link">4</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="basic-datatable" data-dt-idx="5" | |
| tabindex="0" class="page-link">5</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="basic-datatable" data-dt-idx="6" | |
| tabindex="0" class="page-link">6</a></li> | |
| <li class="paginate_button page-item next" | |
| id="basic-datatable_next"><a href="#" | |
| aria-controls="basic-datatable" data-dt-idx="7" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-right-s-line"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div> <!-- end row--> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h4 class="header-title">Buttons example</h4> | |
| <p class="text-muted mb-0"> | |
| 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. | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div id="datatable-buttons_wrapper" | |
| class="dataTables_wrapper dt-bootstrap5 no-footer"> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-6"> | |
| <div class="dt-buttons btn-group flex-wrap"> <button | |
| class="btn btn-secondary buttons-copy buttons-html5" | |
| tabindex="0" aria-controls="datatable-buttons" | |
| type="button"><span>Copy</span></button> <button | |
| class="btn btn-secondary buttons-print" tabindex="0" | |
| aria-controls="datatable-buttons" | |
| type="button"><span>Print</span></button> </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <table id="datatable-buttons" | |
| class="table table-striped dt-responsive nowrap w-100 dataTable no-footer dtr-inline" | |
| aria-describedby="datatable-buttons_info" style="width: 1110px;"> | |
| <thead> | |
| <tr> | |
| <th class="sorting sorting_asc" tabindex="0" | |
| aria-controls="datatable-buttons" rowspan="1" | |
| colspan="1" style="width: 173.8px;" | |
| aria-sort="ascending" | |
| aria-label="Name: activate to sort column descending"> | |
| Name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="datatable-buttons" rowspan="1" | |
| colspan="1" style="width: 261.8px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="datatable-buttons" rowspan="1" | |
| colspan="1" style="width: 123.8px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="datatable-buttons" rowspan="1" | |
| colspan="1" style="width: 58.8px;" | |
| aria-label="Age: activate to sort column ascending">Age | |
| </th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="datatable-buttons" rowspan="1" | |
| colspan="1" style="width: 114.8px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| Start date</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="datatable-buttons" rowspan="1" | |
| colspan="1" style="width: 105.8px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Airi Satou</td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>33</td> | |
| <td>2008/11/28</td> | |
| <td>$162,700</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Angelica Ramos</td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2009/10/09</td> | |
| <td>$1,200,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Ashton Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>San Francisco</td> | |
| <td>66</td> | |
| <td>2009/01/12</td> | |
| <td>$86,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Bradley Greer</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>41</td> | |
| <td>2012/10/13</td> | |
| <td>$132,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Brenden Wagner</td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>28</td> | |
| <td>2011/06/07</td> | |
| <td>$206,850</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Brielle Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2012/12/02</td> | |
| <td>$372,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Bruno Nash</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>38</td> | |
| <td>2011/05/03</td> | |
| <td>$163,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Caesar Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>New York</td> | |
| <td>21</td> | |
| <td>2011/12/12</td> | |
| <td>$106,450</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Cara Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>New York</td> | |
| <td>46</td> | |
| <td>2011/12/06</td> | |
| <td>$145,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Cedric Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2012/03/29</td> | |
| <td>$433,060</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="datatable-buttons_info" role="status" | |
| aria-live="polite">Showing 1 to 10 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"> | |
| <div class="dataTables_paginate paging_simple_numbers" | |
| id="datatable-buttons_paginate"> | |
| <ul class="pagination pagination-rounded"> | |
| <li class="paginate_button page-item previous disabled" | |
| id="datatable-buttons_previous"><a href="#" | |
| aria-controls="datatable-buttons" data-dt-idx="0" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-left-s-line"></i></a></li> | |
| <li class="paginate_button page-item active"><a href="#" | |
| aria-controls="datatable-buttons" data-dt-idx="1" | |
| tabindex="0" class="page-link">1</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="datatable-buttons" data-dt-idx="2" | |
| tabindex="0" class="page-link">2</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="datatable-buttons" data-dt-idx="3" | |
| tabindex="0" class="page-link">3</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="datatable-buttons" data-dt-idx="4" | |
| tabindex="0" class="page-link">4</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="datatable-buttons" data-dt-idx="5" | |
| tabindex="0" class="page-link">5</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="datatable-buttons" data-dt-idx="6" | |
| tabindex="0" class="page-link">6</a></li> | |
| <li class="paginate_button page-item next" | |
| id="datatable-buttons_next"><a href="#" | |
| aria-controls="datatable-buttons" data-dt-idx="7" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-right-s-line"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div> <!-- end row--> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h4 class="header-title">Multi item selection</h4> | |
| <p class="text-muted mb-0"> | |
| 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. | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div id="selection-datatable_wrapper" | |
| class="dataTables_wrapper dt-bootstrap5 no-footer"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <table id="selection-datatable" | |
| class="table table-striped dt-responsive nowrap w-100 dataTable no-footer dtr-inline" | |
| aria-describedby="selection-datatable_info" style="width: 1110px;"> | |
| <thead> | |
| <tr> | |
| <th class="sorting sorting_asc" tabindex="0" | |
| aria-controls="selection-datatable" rowspan="1" | |
| colspan="1" style="width: 173.8px;" | |
| aria-sort="ascending" | |
| aria-label="Name: activate to sort column descending"> | |
| Name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="selection-datatable" rowspan="1" | |
| colspan="1" style="width: 261.8px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="selection-datatable" rowspan="1" | |
| colspan="1" style="width: 123.8px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="selection-datatable" rowspan="1" | |
| colspan="1" style="width: 58.8px;" | |
| aria-label="Age: activate to sort column ascending">Age | |
| </th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="selection-datatable" rowspan="1" | |
| colspan="1" style="width: 114.8px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| Start date</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="selection-datatable" rowspan="1" | |
| colspan="1" style="width: 105.8px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Airi Satou</td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>33</td> | |
| <td>2008/11/28</td> | |
| <td>$162,700</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Angelica Ramos</td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2009/10/09</td> | |
| <td>$1,200,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Ashton Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>San Francisco</td> | |
| <td>66</td> | |
| <td>2009/01/12</td> | |
| <td>$86,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Bradley Greer</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>41</td> | |
| <td>2012/10/13</td> | |
| <td>$132,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Brenden Wagner</td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>28</td> | |
| <td>2011/06/07</td> | |
| <td>$206,850</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Brielle Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2012/12/02</td> | |
| <td>$372,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Bruno Nash</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>38</td> | |
| <td>2011/05/03</td> | |
| <td>$163,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Caesar Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>New York</td> | |
| <td>21</td> | |
| <td>2011/12/12</td> | |
| <td>$106,450</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Cara Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>New York</td> | |
| <td>46</td> | |
| <td>2011/12/06</td> | |
| <td>$145,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Cedric Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2012/03/29</td> | |
| <td>$433,060</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="selection-datatable_info" role="status" | |
| aria-live="polite">Showing 1 to 10 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"> | |
| <div class="dataTables_paginate paging_simple_numbers" | |
| id="selection-datatable_paginate"> | |
| <ul class="pagination pagination-rounded"> | |
| <li class="paginate_button page-item previous disabled" | |
| id="selection-datatable_previous"><a href="#" | |
| aria-controls="selection-datatable" data-dt-idx="0" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-left-s-line"></i></a></li> | |
| <li class="paginate_button page-item active"><a href="#" | |
| aria-controls="selection-datatable" data-dt-idx="1" | |
| tabindex="0" class="page-link">1</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="selection-datatable" data-dt-idx="2" | |
| tabindex="0" class="page-link">2</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="selection-datatable" data-dt-idx="3" | |
| tabindex="0" class="page-link">3</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="selection-datatable" data-dt-idx="4" | |
| tabindex="0" class="page-link">4</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="selection-datatable" data-dt-idx="5" | |
| tabindex="0" class="page-link">5</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="selection-datatable" data-dt-idx="6" | |
| tabindex="0" class="page-link">6</a></li> | |
| <li class="paginate_button page-item next" | |
| id="selection-datatable_next"><a href="#" | |
| aria-controls="selection-datatable" data-dt-idx="7" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-right-s-line"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div> <!-- end row--> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h4 class="header-title">Alternative Pagination</h4> | |
| <p class="text-muted mb-0"> | |
| The default page control presented by DataTables (forward and backward buttons | |
| with up to 7 page numbers in-between) | |
| is fine for most situations, but there are cases where you may wish to customise | |
| the options presented to the end | |
| user. | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div id="alternative-page-datatable_wrapper" | |
| class="dataTables_wrapper dt-bootstrap5 no-footer"> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-6"> | |
| <div class="dataTables_length" id="alternative-page-datatable_length"> | |
| <label class="form-label">Show <select | |
| name="alternative-page-datatable_length" | |
| aria-controls="alternative-page-datatable" | |
| class="form-select form-select-sm"> | |
| <option value="10">10</option> | |
| <option value="25">25</option> | |
| <option value="50">50</option> | |
| <option value="100">100</option> | |
| </select> entries</label></div> | |
| </div> | |
| <div class="col-sm-12 col-md-6"> | |
| <div id="alternative-page-datatable_filter" class="dataTables_filter"> | |
| <label>Search:<input type="search" | |
| class="form-control form-control-sm" placeholder="" | |
| aria-controls="alternative-page-datatable"></label></div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <table id="alternative-page-datatable" | |
| class="table table-striped dt-responsive nowrap w-100 dataTable no-footer dtr-inline" | |
| aria-describedby="alternative-page-datatable_info" | |
| style="width: 1110px;"> | |
| <thead> | |
| <tr> | |
| <th class="sorting sorting_asc" tabindex="0" | |
| aria-controls="alternative-page-datatable" rowspan="1" | |
| colspan="1" style="width: 173.8px;" | |
| aria-sort="ascending" | |
| aria-label="Name: activate to sort column descending"> | |
| Name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="alternative-page-datatable" rowspan="1" | |
| colspan="1" style="width: 261.8px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="alternative-page-datatable" rowspan="1" | |
| colspan="1" style="width: 123.8px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="alternative-page-datatable" rowspan="1" | |
| colspan="1" style="width: 58.8px;" | |
| aria-label="Age: activate to sort column ascending">Age | |
| </th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="alternative-page-datatable" rowspan="1" | |
| colspan="1" style="width: 114.8px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| Start date</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="alternative-page-datatable" rowspan="1" | |
| colspan="1" style="width: 105.8px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Airi Satou</td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>33</td> | |
| <td>2008/11/28</td> | |
| <td>$162,700</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Angelica Ramos</td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2009/10/09</td> | |
| <td>$1,200,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Ashton Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>San Francisco</td> | |
| <td>66</td> | |
| <td>2009/01/12</td> | |
| <td>$86,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Bradley Greer</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>41</td> | |
| <td>2012/10/13</td> | |
| <td>$132,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Brenden Wagner</td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>28</td> | |
| <td>2011/06/07</td> | |
| <td>$206,850</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Brielle Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2012/12/02</td> | |
| <td>$372,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Bruno Nash</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>38</td> | |
| <td>2011/05/03</td> | |
| <td>$163,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Caesar Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>New York</td> | |
| <td>21</td> | |
| <td>2011/12/12</td> | |
| <td>$106,450</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Cara Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>New York</td> | |
| <td>46</td> | |
| <td>2011/12/06</td> | |
| <td>$145,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Cedric Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2012/03/29</td> | |
| <td>$433,060</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="alternative-page-datatable_info" | |
| role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"> | |
| <div class="dataTables_paginate paging_full_numbers" | |
| id="alternative-page-datatable_paginate"> | |
| <ul class="pagination pagination-rounded"> | |
| <li class="paginate_button page-item first disabled" | |
| id="alternative-page-datatable_first"><a href="#" | |
| aria-controls="alternative-page-datatable" | |
| data-dt-idx="0" tabindex="0" class="page-link">First</a> | |
| </li> | |
| <li class="paginate_button page-item previous disabled" | |
| id="alternative-page-datatable_previous"><a href="#" | |
| aria-controls="alternative-page-datatable" | |
| data-dt-idx="1" tabindex="0" | |
| class="page-link">Previous</a></li> | |
| <li class="paginate_button page-item active"><a href="#" | |
| aria-controls="alternative-page-datatable" | |
| data-dt-idx="2" tabindex="0" class="page-link">1</a> | |
| </li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="alternative-page-datatable" | |
| data-dt-idx="3" tabindex="0" class="page-link">2</a> | |
| </li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="alternative-page-datatable" | |
| data-dt-idx="4" tabindex="0" class="page-link">3</a> | |
| </li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="alternative-page-datatable" | |
| data-dt-idx="5" tabindex="0" class="page-link">4</a> | |
| </li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="alternative-page-datatable" | |
| data-dt-idx="6" tabindex="0" class="page-link">5</a> | |
| </li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="alternative-page-datatable" | |
| data-dt-idx="7" tabindex="0" class="page-link">6</a> | |
| </li> | |
| <li class="paginate_button page-item next" | |
| id="alternative-page-datatable_next"><a href="#" | |
| aria-controls="alternative-page-datatable" | |
| data-dt-idx="8" tabindex="0" class="page-link">Next</a> | |
| </li> | |
| <li class="paginate_button page-item last" | |
| id="alternative-page-datatable_last"><a href="#" | |
| aria-controls="alternative-page-datatable" | |
| data-dt-idx="9" tabindex="0" class="page-link">Last</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div> <!-- end row--> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h4 class="header-title">Scroll - Vertical</h4> | |
| <p class="text-muted mb-0"> | |
| This example shows the DataTables table body scrolling in the vertical | |
| direction. This can generally be seen as an | |
| alternative method to pagination for displaying a large table in a fairly small | |
| vertical area, and as such | |
| pagination has been disabled here (note that this is not mandatory, it will work | |
| just fine with pagination enabled | |
| as well!). | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div id="scroll-vertical-datatable_wrapper" | |
| class="dataTables_wrapper dt-bootstrap5 no-footer"> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-6"></div> | |
| <div class="col-sm-12 col-md-6"> | |
| <div id="scroll-vertical-datatable_filter" class="dataTables_filter"> | |
| <label>Search:<input type="search" | |
| class="form-control form-control-sm" placeholder="" | |
| aria-controls="scroll-vertical-datatable"></label></div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div class="dataTables_scroll"> | |
| <div class="dataTables_scrollHead" | |
| style="overflow: hidden; position: relative; border: 0px; width: 100%;"> | |
| <div class="dataTables_scrollHeadInner" | |
| style="box-sizing: content-box; width: 1108px; padding-right: 0px;"> | |
| <table | |
| class="table table-striped dt-responsive nowrap w-100 dataTable no-footer" | |
| style="margin-left: 0px; width: 1108px;"> | |
| <thead> | |
| <tr> | |
| <th class="sorting sorting_asc" tabindex="0" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 173.383px;" | |
| aria-sort="ascending" | |
| aria-label="Name: activate to sort column descending"> | |
| Name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 261.3px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 123.483px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 58.6px;" | |
| aria-label="Age: activate to sort column ascending"> | |
| Age</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 114.517px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| Start date</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 105.517px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| </tr> | |
| </thead> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="dataTables_scrollBody" | |
| style="position: relative; overflow: auto; max-height: 350px; width: 100%;"> | |
| <table id="scroll-vertical-datatable" | |
| class="table table-striped dt-responsive nowrap w-100 dataTable no-footer dtr-inline" | |
| aria-describedby="scroll-vertical-datatable_info" | |
| style="width: 100%;"> | |
| <thead> | |
| <tr style="height: 0px;"> | |
| <th class="sorting sorting_asc" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 173.383px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-sort="ascending" | |
| aria-label="Name: activate to sort column descending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Name | |
| </div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 261.3px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| Position</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 123.483px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| Office</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 58.6px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Age: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Age | |
| </div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 114.517px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Start | |
| date</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-vertical-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 105.517px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| Salary</div> | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Airi Satou</td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>33</td> | |
| <td>2008/11/28</td> | |
| <td>$162,700</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Angelica Ramos | |
| </td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2009/10/09</td> | |
| <td>$1,200,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Ashton Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>San Francisco</td> | |
| <td>66</td> | |
| <td>2009/01/12</td> | |
| <td>$86,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Bradley Greer | |
| </td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>41</td> | |
| <td>2012/10/13</td> | |
| <td>$132,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Brenden Wagner | |
| </td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>28</td> | |
| <td>2011/06/07</td> | |
| <td>$206,850</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Brielle | |
| Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2012/12/02</td> | |
| <td>$372,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Bruno Nash</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>38</td> | |
| <td>2011/05/03</td> | |
| <td>$163,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Caesar Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>New York</td> | |
| <td>21</td> | |
| <td>2011/12/12</td> | |
| <td>$106,450</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Cara Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>New York</td> | |
| <td>46</td> | |
| <td>2011/12/06</td> | |
| <td>$145,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Cedric Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2012/03/29</td> | |
| <td>$433,060</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Charde Marshall | |
| </td> | |
| <td>Regional Director</td> | |
| <td>San Francisco</td> | |
| <td>36</td> | |
| <td>2008/10/16</td> | |
| <td>$470,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Colleen Hurst | |
| </td> | |
| <td>Javascript Developer</td> | |
| <td>San Francisco</td> | |
| <td>39</td> | |
| <td>2009/09/15</td> | |
| <td>$205,500</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Dai Rios</td> | |
| <td>Personnel Lead</td> | |
| <td>Edinburgh</td> | |
| <td>35</td> | |
| <td>2012/09/26</td> | |
| <td>$217,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Donna Snider</td> | |
| <td>Customer Support</td> | |
| <td>New York</td> | |
| <td>27</td> | |
| <td>2011/01/25</td> | |
| <td>$112,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Doris Wilder</td> | |
| <td>Sales Assistant</td> | |
| <td>Sidney</td> | |
| <td>23</td> | |
| <td>2010/09/20</td> | |
| <td>$85,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Finn Camacho</td> | |
| <td>Support Engineer</td> | |
| <td>San Francisco</td> | |
| <td>47</td> | |
| <td>2009/07/07</td> | |
| <td>$87,500</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Fiona Green</td> | |
| <td>Chief Operating Officer (COO)</td> | |
| <td>San Francisco</td> | |
| <td>48</td> | |
| <td>2010/03/11</td> | |
| <td>$850,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Garrett Winters | |
| </td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>63</td> | |
| <td>2011/07/25</td> | |
| <td>$170,750</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Gavin Cortez</td> | |
| <td>Team Leader</td> | |
| <td>San Francisco</td> | |
| <td>22</td> | |
| <td>2008/10/26</td> | |
| <td>$235,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Gavin Joyce</td> | |
| <td>Developer</td> | |
| <td>Edinburgh</td> | |
| <td>42</td> | |
| <td>2010/12/22</td> | |
| <td>$92,575</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Gloria Little | |
| </td> | |
| <td>Systems Administrator</td> | |
| <td>New York</td> | |
| <td>59</td> | |
| <td>2009/04/10</td> | |
| <td>$237,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Haley Kennedy | |
| </td> | |
| <td>Senior Marketing Designer</td> | |
| <td>London</td> | |
| <td>43</td> | |
| <td>2012/12/18</td> | |
| <td>$313,500</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Hermione Butler | |
| </td> | |
| <td>Regional Director</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2011/03/21</td> | |
| <td>$356,250</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Herrod Chandler | |
| </td> | |
| <td>Sales Assistant</td> | |
| <td>San Francisco</td> | |
| <td>59</td> | |
| <td>2012/08/06</td> | |
| <td>$137,500</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Hope Fuentes</td> | |
| <td>Secretary</td> | |
| <td>San Francisco</td> | |
| <td>41</td> | |
| <td>2010/02/12</td> | |
| <td>$109,850</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Howard Hatfield | |
| </td> | |
| <td>Office Manager</td> | |
| <td>San Francisco</td> | |
| <td>51</td> | |
| <td>2008/12/16</td> | |
| <td>$164,500</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Jackson Bradshaw | |
| </td> | |
| <td>Director</td> | |
| <td>New York</td> | |
| <td>65</td> | |
| <td>2008/09/26</td> | |
| <td>$645,750</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Jena Gaines</td> | |
| <td>Office Manager</td> | |
| <td>London</td> | |
| <td>30</td> | |
| <td>2008/12/19</td> | |
| <td>$90,560</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Jenette Caldwell | |
| </td> | |
| <td>Development Lead</td> | |
| <td>New York</td> | |
| <td>30</td> | |
| <td>2011/09/03</td> | |
| <td>$345,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Jennifer Acosta | |
| </td> | |
| <td>Junior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>43</td> | |
| <td>2013/02/01</td> | |
| <td>$75,650</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Jennifer Chang | |
| </td> | |
| <td>Regional Director</td> | |
| <td>Singapore</td> | |
| <td>28</td> | |
| <td>2010/11/14</td> | |
| <td>$357,650</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Jonas Alexander | |
| </td> | |
| <td>Developer</td> | |
| <td>San Francisco</td> | |
| <td>30</td> | |
| <td>2010/07/14</td> | |
| <td>$86,500</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Lael Greer</td> | |
| <td>Systems Administrator</td> | |
| <td>London</td> | |
| <td>21</td> | |
| <td>2009/02/27</td> | |
| <td>$103,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Martena Mccray | |
| </td> | |
| <td>Post-Sales support</td> | |
| <td>Edinburgh</td> | |
| <td>46</td> | |
| <td>2011/03/09</td> | |
| <td>$324,050</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Michael Bruce | |
| </td> | |
| <td>Javascript Developer</td> | |
| <td>Singapore</td> | |
| <td>29</td> | |
| <td>2011/06/27</td> | |
| <td>$183,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Michael Silva | |
| </td> | |
| <td>Marketing Designer</td> | |
| <td>London</td> | |
| <td>66</td> | |
| <td>2012/11/27</td> | |
| <td>$198,500</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Michelle House | |
| </td> | |
| <td>Integration Specialist</td> | |
| <td>Sidney</td> | |
| <td>37</td> | |
| <td>2011/06/02</td> | |
| <td>$95,400</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Olivia Liang</td> | |
| <td>Support Engineer</td> | |
| <td>Singapore</td> | |
| <td>64</td> | |
| <td>2011/02/03</td> | |
| <td>$234,500</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Paul Byrd</td> | |
| <td>Chief Financial Officer (CFO)</td> | |
| <td>New York</td> | |
| <td>64</td> | |
| <td>2010/06/09</td> | |
| <td>$725,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Prescott Bartlett | |
| </td> | |
| <td>Technical Author</td> | |
| <td>London</td> | |
| <td>27</td> | |
| <td>2011/05/07</td> | |
| <td>$145,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Quinn Flynn</td> | |
| <td>Support Lead</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2013/03/03</td> | |
| <td>$342,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Rhona Davidson | |
| </td> | |
| <td>Integration Specialist</td> | |
| <td>Tokyo</td> | |
| <td>55</td> | |
| <td>2010/10/14</td> | |
| <td>$327,900</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Sakura Yamamoto | |
| </td> | |
| <td>Support Engineer</td> | |
| <td>Tokyo</td> | |
| <td>37</td> | |
| <td>2009/08/19</td> | |
| <td>$139,575</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Serge Baldwin | |
| </td> | |
| <td>Data Coordinator</td> | |
| <td>Singapore</td> | |
| <td>64</td> | |
| <td>2012/04/09</td> | |
| <td>$138,575</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Shad Decker</td> | |
| <td>Regional Director</td> | |
| <td>Edinburgh</td> | |
| <td>51</td> | |
| <td>2008/11/13</td> | |
| <td>$183,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Shou Itou</td> | |
| <td>Regional Marketing</td> | |
| <td>Tokyo</td> | |
| <td>20</td> | |
| <td>2011/08/14</td> | |
| <td>$163,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Sonya Frost</td> | |
| <td>Software Engineer</td> | |
| <td>Edinburgh</td> | |
| <td>23</td> | |
| <td>2008/12/13</td> | |
| <td>$103,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Suki Burks</td> | |
| <td>Developer</td> | |
| <td>London</td> | |
| <td>53</td> | |
| <td>2009/10/22</td> | |
| <td>$114,500</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Tatyana | |
| Fitzpatrick</td> | |
| <td>Regional Director</td> | |
| <td>London</td> | |
| <td>19</td> | |
| <td>2010/03/17</td> | |
| <td>$385,750</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Thor Walton</td> | |
| <td>Developer</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2013/08/11</td> | |
| <td>$98,540</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Tiger Nixon</td> | |
| <td>System Architect</td> | |
| <td>Edinburgh</td> | |
| <td>61</td> | |
| <td>2011/04/25</td> | |
| <td>$320,800</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Timothy Mooney | |
| </td> | |
| <td>Office Manager</td> | |
| <td>London</td> | |
| <td>37</td> | |
| <td>2008/12/11</td> | |
| <td>$136,200</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Unity Butler</td> | |
| <td>Marketing Designer</td> | |
| <td>San Francisco</td> | |
| <td>47</td> | |
| <td>2009/12/09</td> | |
| <td>$85,675</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Vivian Harrell | |
| </td> | |
| <td>Financial Controller</td> | |
| <td>San Francisco</td> | |
| <td>62</td> | |
| <td>2009/02/14</td> | |
| <td>$452,500</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Yuri Berry</td> | |
| <td>Chief Marketing Officer (CMO)</td> | |
| <td>New York</td> | |
| <td>40</td> | |
| <td>2009/06/25</td> | |
| <td>$675,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Zenaida Frank | |
| </td> | |
| <td>Software Engineer</td> | |
| <td>New York</td> | |
| <td>63</td> | |
| <td>2010/01/04</td> | |
| <td>$125,250</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Zorita Serrano | |
| </td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>56</td> | |
| <td>2012/06/01</td> | |
| <td>$115,000</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="scroll-vertical-datatable_info" | |
| role="status" aria-live="polite">Showing 1 to 57 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"></div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div><!-- end row--> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h4 class="header-title">Scroll - Horizontal</h4> | |
| <p class="text-muted mb-0"> | |
| DataTables has the ability to show tables with horizontal scrolling, which is | |
| very useful for when you have a wide | |
| table, but want to constrain it to a limited horizontal display area. | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div id="scroll-horizontal-datatable_wrapper" | |
| class="dataTables_wrapper dt-bootstrap5 no-footer"> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-6"> | |
| <div class="dataTables_length" id="scroll-horizontal-datatable_length"> | |
| <label class="form-label">Show <select | |
| name="scroll-horizontal-datatable_length" | |
| aria-controls="scroll-horizontal-datatable" | |
| class="form-select form-select-sm"> | |
| <option value="10">10</option> | |
| <option value="25">25</option> | |
| <option value="50">50</option> | |
| <option value="100">100</option> | |
| </select> entries</label></div> | |
| </div> | |
| <div class="col-sm-12 col-md-6"> | |
| <div id="scroll-horizontal-datatable_filter" class="dataTables_filter"> | |
| <label>Search:<input type="search" | |
| class="form-control form-control-sm" placeholder="" | |
| aria-controls="scroll-horizontal-datatable"></label></div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div class="dataTables_scroll"> | |
| <div class="dataTables_scrollHead" | |
| style="overflow: hidden; position: relative; border: 0px; width: 100%;"> | |
| <div class="dataTables_scrollHeadInner" | |
| style="box-sizing: content-box; width: 1108px; padding-right: 0px;"> | |
| <table | |
| class="table table-striped w-100 nowrap dataTable no-footer" | |
| style="margin-left: 0px; width: 1108px;"> | |
| <thead> | |
| <tr> | |
| <th class="sorting sorting_asc" tabindex="0" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 66.4833px;" | |
| aria-sort="ascending" | |
| aria-label="First name: activate to sort column descending"> | |
| First name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 63.6333px;" | |
| aria-label="Last name: activate to sort column ascending"> | |
| Last name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 165.95px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 68.7333px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 24.8833px;" | |
| aria-label="Age: activate to sort column ascending"> | |
| Age</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 62.6px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| Start date</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 56.4px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 32.45px;" | |
| aria-label="Extn.: activate to sort column ascending"> | |
| Extn.</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 160.067px;" | |
| aria-label="E-mail: activate to sort column ascending"> | |
| E-mail</th> | |
| </tr> | |
| </thead> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="dataTables_scrollBody" | |
| style="position: relative; overflow: auto; width: 100%;"> | |
| <table id="scroll-horizontal-datatable" | |
| class="table table-striped w-100 nowrap dataTable no-footer" | |
| aria-describedby="scroll-horizontal-datatable_info" | |
| style="width: 1112px;"> | |
| <thead> | |
| <tr style="height: 0px;"> | |
| <th class="sorting sorting_asc" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 66.4833px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-sort="ascending" | |
| aria-label="First name: activate to sort column descending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">First | |
| name</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 63.6333px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Last name: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Last | |
| name</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 165.95px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| Position</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 68.7333px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| Office</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 24.8833px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Age: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Age | |
| </div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 62.6px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Start | |
| date</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 56.4px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| Salary</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 32.45px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Extn.: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Extn. | |
| </div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="scroll-horizontal-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 160.067px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="E-mail: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| E-mail</div> | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td class="sorting_1">Airi</td> | |
| <td>Satou</td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>33</td> | |
| <td>2008/11/28</td> | |
| <td>$162,700</td> | |
| <td>5407</td> | |
| <td>a.satou@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Angelica</td> | |
| <td>Ramos</td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2009/10/09</td> | |
| <td>$1,200,000</td> | |
| <td>5797</td> | |
| <td>a.ramos@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Ashton</td> | |
| <td>Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>San Francisco</td> | |
| <td>66</td> | |
| <td>2009/01/12</td> | |
| <td>$86,000</td> | |
| <td>1562</td> | |
| <td>a.cox@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Bradley</td> | |
| <td>Greer</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>41</td> | |
| <td>2012/10/13</td> | |
| <td>$132,000</td> | |
| <td>2558</td> | |
| <td>b.greer@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Brenden</td> | |
| <td>Wagner</td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>28</td> | |
| <td>2011/06/07</td> | |
| <td>$206,850</td> | |
| <td>1314</td> | |
| <td>b.wagner@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Brielle</td> | |
| <td>Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2012/12/02</td> | |
| <td>$372,000</td> | |
| <td>4804</td> | |
| <td>b.williamson@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Bruno</td> | |
| <td>Nash</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>38</td> | |
| <td>2011/05/03</td> | |
| <td>$163,500</td> | |
| <td>6222</td> | |
| <td>b.nash@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Caesar</td> | |
| <td>Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>New York</td> | |
| <td>21</td> | |
| <td>2011/12/12</td> | |
| <td>$106,450</td> | |
| <td>8330</td> | |
| <td>c.vance@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Cara</td> | |
| <td>Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>New York</td> | |
| <td>46</td> | |
| <td>2011/12/06</td> | |
| <td>$145,600</td> | |
| <td>3990</td> | |
| <td>c.stevens@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Cedric</td> | |
| <td>Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2012/03/29</td> | |
| <td>$433,060</td> | |
| <td>6224</td> | |
| <td>c.kelly@datatables.net</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="scroll-horizontal-datatable_info" | |
| role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"> | |
| <div class="dataTables_paginate paging_simple_numbers" | |
| id="scroll-horizontal-datatable_paginate"> | |
| <ul class="pagination pagination-rounded"> | |
| <li class="paginate_button page-item previous disabled" | |
| id="scroll-horizontal-datatable_previous"><a href="#" | |
| aria-controls="scroll-horizontal-datatable" | |
| data-dt-idx="0" tabindex="0" class="page-link"><i | |
| class="ri-arrow-left-s-line"></i></a></li> | |
| <li class="paginate_button page-item active"><a href="#" | |
| aria-controls="scroll-horizontal-datatable" | |
| data-dt-idx="1" tabindex="0" class="page-link">1</a> | |
| </li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="scroll-horizontal-datatable" | |
| data-dt-idx="2" tabindex="0" class="page-link">2</a> | |
| </li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="scroll-horizontal-datatable" | |
| data-dt-idx="3" tabindex="0" class="page-link">3</a> | |
| </li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="scroll-horizontal-datatable" | |
| data-dt-idx="4" tabindex="0" class="page-link">4</a> | |
| </li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="scroll-horizontal-datatable" | |
| data-dt-idx="5" tabindex="0" class="page-link">5</a> | |
| </li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="scroll-horizontal-datatable" | |
| data-dt-idx="6" tabindex="0" class="page-link">6</a> | |
| </li> | |
| <li class="paginate_button page-item next" | |
| id="scroll-horizontal-datatable_next"><a href="#" | |
| aria-controls="scroll-horizontal-datatable" | |
| data-dt-idx="7" tabindex="0" class="page-link"><i | |
| class="ri-arrow-right-s-line"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div> <!-- end row--> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h4 class="header-title">Complex headers with column visibility</h4> | |
| <p class="text-muted mb-0"> | |
| Complex headers (using <code>colspan</code> / <code>rowspan</code>) can be used | |
| to group columns of similar information in DataTables, creating a very powerful | |
| visual effect. | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div id="complex-header-datatable_wrapper" class="dataTables_wrapper dt-bootstrap5"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <table id="complex-header-datatable" | |
| class="table table-striped dt-responsive nowrap w-100 dataTable dtr-inline" | |
| aria-describedby="complex-header-datatable_info" | |
| style="width: 1109px;"> | |
| <thead class="table-light"> | |
| <tr> | |
| <th rowspan="2" class="align-middle sorting sorting_asc" | |
| tabindex="0" aria-controls="complex-header-datatable" | |
| colspan="1" style="width: 207.8px;" | |
| aria-sort="ascending" | |
| aria-label="Name: activate to sort column descending"> | |
| Name</th> | |
| <th colspan="2" rowspan="1">HR Information</th> | |
| <th colspan="2" rowspan="1">Contact</th> | |
| </tr> | |
| <tr> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="complex-header-datatable" rowspan="1" | |
| colspan="1" style="width: 308.8px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="complex-header-datatable" rowspan="1" | |
| colspan="1" style="width: 128.8px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="complex-header-datatable" rowspan="1" | |
| colspan="1" style="width: 149.8px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="complex-header-datatable" rowspan="1" | |
| colspan="1" style="width: 87.8px;" | |
| aria-label="Extn.: activate to sort column ascending"> | |
| Extn.</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Airi Satou</td> | |
| <td>Accountant</td> | |
| <td>$162,700</td> | |
| <td>Tokyo</td> | |
| <td>5407</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Angelica Ramos</td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>$1,200,000</td> | |
| <td>London</td> | |
| <td>5797</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Ashton Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>$86,000</td> | |
| <td>San Francisco</td> | |
| <td>1562</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Bradley Greer</td> | |
| <td>Software Engineer</td> | |
| <td>$132,000</td> | |
| <td>London</td> | |
| <td>2558</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Brenden Wagner</td> | |
| <td>Software Engineer</td> | |
| <td>$206,850</td> | |
| <td>San Francisco</td> | |
| <td>1314</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Brielle Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>$372,000</td> | |
| <td>New York</td> | |
| <td>4804</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Bruno Nash</td> | |
| <td>Software Engineer</td> | |
| <td>$163,500</td> | |
| <td>London</td> | |
| <td>6222</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Caesar Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>$106,450</td> | |
| <td>New York</td> | |
| <td>8330</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Cara Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>$145,600</td> | |
| <td>New York</td> | |
| <td>3990</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Cedric Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>$433,060</td> | |
| <td>Edinburgh</td> | |
| <td>6224</td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <th rowspan="1" colspan="1">Name</th> | |
| <th rowspan="1" colspan="1">Position</th> | |
| <th rowspan="1" colspan="1">Salary</th> | |
| <th rowspan="1" colspan="1">Office</th> | |
| <th rowspan="1" colspan="1">Extn.</th> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="complex-header-datatable_info" | |
| role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"> | |
| <div class="dataTables_paginate paging_simple_numbers" | |
| id="complex-header-datatable_paginate"> | |
| <ul class="pagination pagination-rounded"> | |
| <li class="paginate_button page-item previous disabled" | |
| id="complex-header-datatable_previous"><a href="#" | |
| aria-controls="complex-header-datatable" data-dt-idx="0" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-left-s-line"></i></a></li> | |
| <li class="paginate_button page-item active"><a href="#" | |
| aria-controls="complex-header-datatable" data-dt-idx="1" | |
| tabindex="0" class="page-link">1</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="complex-header-datatable" data-dt-idx="2" | |
| tabindex="0" class="page-link">2</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="complex-header-datatable" data-dt-idx="3" | |
| tabindex="0" class="page-link">3</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="complex-header-datatable" data-dt-idx="4" | |
| tabindex="0" class="page-link">4</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="complex-header-datatable" data-dt-idx="5" | |
| tabindex="0" class="page-link">5</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="complex-header-datatable" data-dt-idx="6" | |
| tabindex="0" class="page-link">6</a></li> | |
| <li class="paginate_button page-item next" | |
| id="complex-header-datatable_next"><a href="#" | |
| aria-controls="complex-header-datatable" data-dt-idx="7" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-right-s-line"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div> <!-- end row--> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h4 class="header-title">Row Created Callback</h4> | |
| <p class="text-muted mb-0"> | |
| The following example shows how a callback function can be used to format a | |
| particular row at draw time. For each | |
| row that is generated for display, the createdRow function is called once and | |
| once only. It is passed the create row | |
| node which can then be modified. | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div id="row-callback-datatable_wrapper" | |
| class="dataTables_wrapper dt-bootstrap5 no-footer"> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-6"> | |
| <div class="dataTables_length" id="row-callback-datatable_length"><label | |
| class="form-label">Show <select | |
| name="row-callback-datatable_length" | |
| aria-controls="row-callback-datatable" | |
| class="form-select form-select-sm"> | |
| <option value="10">10</option> | |
| <option value="25">25</option> | |
| <option value="50">50</option> | |
| <option value="100">100</option> | |
| </select> entries</label></div> | |
| </div> | |
| <div class="col-sm-12 col-md-6"> | |
| <div id="row-callback-datatable_filter" class="dataTables_filter"> | |
| <label>Search:<input type="search" | |
| class="form-control form-control-sm" placeholder="" | |
| aria-controls="row-callback-datatable"></label></div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <table id="row-callback-datatable" | |
| class="table table-striped dt-responsive nowrap w-100 dataTable no-footer dtr-inline" | |
| aria-describedby="row-callback-datatable_info" | |
| style="width: 1110px;"> | |
| <thead> | |
| <tr> | |
| <th class="sorting sorting_asc" tabindex="0" | |
| aria-controls="row-callback-datatable" rowspan="1" | |
| colspan="1" style="width: 173.8px;" | |
| aria-sort="ascending" | |
| aria-label="Name: activate to sort column descending"> | |
| Name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="row-callback-datatable" rowspan="1" | |
| colspan="1" style="width: 261.8px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="row-callback-datatable" rowspan="1" | |
| colspan="1" style="width: 123.8px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="row-callback-datatable" rowspan="1" | |
| colspan="1" style="width: 58.8px;" | |
| aria-label="Age: activate to sort column ascending">Age | |
| </th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="row-callback-datatable" rowspan="1" | |
| colspan="1" style="width: 114.8px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| Start date</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="row-callback-datatable" rowspan="1" | |
| colspan="1" style="width: 105.8px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Airi Satou</td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>33</td> | |
| <td>2008/11/28</td> | |
| <td class="text-danger">$162,700</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Angelica Ramos</td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2009/10/09</td> | |
| <td class="text-danger">$1,200,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Ashton Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>San Francisco</td> | |
| <td>66</td> | |
| <td>2009/01/12</td> | |
| <td>$86,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Bradley Greer</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>41</td> | |
| <td>2012/10/13</td> | |
| <td>$132,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Brenden Wagner</td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>28</td> | |
| <td>2011/06/07</td> | |
| <td class="text-danger">$206,850</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Brielle Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2012/12/02</td> | |
| <td class="text-danger">$372,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Bruno Nash</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>38</td> | |
| <td>2011/05/03</td> | |
| <td class="text-danger">$163,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Caesar Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>New York</td> | |
| <td>21</td> | |
| <td>2011/12/12</td> | |
| <td>$106,450</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Cara Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>New York</td> | |
| <td>46</td> | |
| <td>2011/12/06</td> | |
| <td>$145,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Cedric Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2012/03/29</td> | |
| <td class="text-danger">$433,060</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="row-callback-datatable_info" | |
| role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"> | |
| <div class="dataTables_paginate paging_simple_numbers" | |
| id="row-callback-datatable_paginate"> | |
| <ul class="pagination pagination-rounded"> | |
| <li class="paginate_button page-item previous disabled" | |
| id="row-callback-datatable_previous"><a href="#" | |
| aria-controls="row-callback-datatable" data-dt-idx="0" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-left-s-line"></i></a></li> | |
| <li class="paginate_button page-item active"><a href="#" | |
| aria-controls="row-callback-datatable" data-dt-idx="1" | |
| tabindex="0" class="page-link">1</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="row-callback-datatable" data-dt-idx="2" | |
| tabindex="0" class="page-link">2</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="row-callback-datatable" data-dt-idx="3" | |
| tabindex="0" class="page-link">3</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="row-callback-datatable" data-dt-idx="4" | |
| tabindex="0" class="page-link">4</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="row-callback-datatable" data-dt-idx="5" | |
| tabindex="0" class="page-link">5</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="row-callback-datatable" data-dt-idx="6" | |
| tabindex="0" class="page-link">6</a></li> | |
| <li class="paginate_button page-item next" | |
| id="row-callback-datatable_next"><a href="#" | |
| aria-controls="row-callback-datatable" data-dt-idx="7" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-right-s-line"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div> <!-- end row--> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h4 class="header-title">State Saving</h4> | |
| <p class="text-muted mb-0"> | |
| DataTables has the option of being able to save the state of a table (its paging | |
| position, ordering state etc) so | |
| that is can be restored when the user reloads a page, or comes back to the page | |
| after visiting a sub-page. This | |
| state saving ability is enabled by the stateSave option. | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div id="state-saving-datatable_wrapper" | |
| class="dataTables_wrapper dt-bootstrap5 no-footer"> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-6"> | |
| <div class="dataTables_length" id="state-saving-datatable_length"><label | |
| class="form-label">Show <select | |
| name="state-saving-datatable_length" | |
| aria-controls="state-saving-datatable" | |
| class="form-select form-select-sm"> | |
| <option value="10">10</option> | |
| <option value="25">25</option> | |
| <option value="50">50</option> | |
| <option value="100">100</option> | |
| </select> entries</label></div> | |
| </div> | |
| <div class="col-sm-12 col-md-6"> | |
| <div id="state-saving-datatable_filter" class="dataTables_filter"> | |
| <label>Search:<input type="search" | |
| class="form-control form-control-sm" placeholder="" | |
| aria-controls="state-saving-datatable"></label></div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <table id="state-saving-datatable" | |
| class="table activate-select dt-responsive nowrap w-100 dataTable no-footer dtr-inline" | |
| aria-describedby="state-saving-datatable_info" | |
| style="width: 1110px;"> | |
| <thead> | |
| <tr> | |
| <th class="sorting sorting_asc" tabindex="0" | |
| aria-controls="state-saving-datatable" rowspan="1" | |
| colspan="1" style="width: 173.8px;" | |
| aria-sort="ascending" | |
| aria-label="Name: activate to sort column descending"> | |
| Name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="state-saving-datatable" rowspan="1" | |
| colspan="1" style="width: 261.8px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="state-saving-datatable" rowspan="1" | |
| colspan="1" style="width: 123.8px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="state-saving-datatable" rowspan="1" | |
| colspan="1" style="width: 58.8px;" | |
| aria-label="Age: activate to sort column ascending">Age | |
| </th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="state-saving-datatable" rowspan="1" | |
| colspan="1" style="width: 114.8px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| Start date</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="state-saving-datatable" rowspan="1" | |
| colspan="1" style="width: 105.8px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Airi Satou</td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>33</td> | |
| <td>2008/11/28</td> | |
| <td>$162,700</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Angelica Ramos</td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2009/10/09</td> | |
| <td>$1,200,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Ashton Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>San Francisco</td> | |
| <td>66</td> | |
| <td>2009/01/12</td> | |
| <td>$86,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Bradley Greer</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>41</td> | |
| <td>2012/10/13</td> | |
| <td>$132,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Brenden Wagner</td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>28</td> | |
| <td>2011/06/07</td> | |
| <td>$206,850</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Brielle Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2012/12/02</td> | |
| <td>$372,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Bruno Nash</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>38</td> | |
| <td>2011/05/03</td> | |
| <td>$163,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Caesar Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>New York</td> | |
| <td>21</td> | |
| <td>2011/12/12</td> | |
| <td>$106,450</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Cara Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>New York</td> | |
| <td>46</td> | |
| <td>2011/12/06</td> | |
| <td>$145,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Cedric Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2012/03/29</td> | |
| <td>$433,060</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="state-saving-datatable_info" | |
| role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"> | |
| <div class="dataTables_paginate paging_simple_numbers" | |
| id="state-saving-datatable_paginate"> | |
| <ul class="pagination pagination-rounded"> | |
| <li class="paginate_button page-item previous disabled" | |
| id="state-saving-datatable_previous"><a href="#" | |
| aria-controls="state-saving-datatable" data-dt-idx="0" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-left-s-line"></i></a></li> | |
| <li class="paginate_button page-item active"><a href="#" | |
| aria-controls="state-saving-datatable" data-dt-idx="1" | |
| tabindex="0" class="page-link">1</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="state-saving-datatable" data-dt-idx="2" | |
| tabindex="0" class="page-link">2</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="state-saving-datatable" data-dt-idx="3" | |
| tabindex="0" class="page-link">3</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="state-saving-datatable" data-dt-idx="4" | |
| tabindex="0" class="page-link">4</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="state-saving-datatable" data-dt-idx="5" | |
| tabindex="0" class="page-link">5</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="state-saving-datatable" data-dt-idx="6" | |
| tabindex="0" class="page-link">6</a></li> | |
| <li class="paginate_button page-item next" | |
| id="state-saving-datatable_next"><a href="#" | |
| aria-controls="state-saving-datatable" data-dt-idx="7" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-right-s-line"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div> <!-- end row--> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-body"> | |
| <div class="card-header"></div> | |
| <div id="fixed-columns-datatable_wrapper" | |
| class="dataTables_wrapper dt-bootstrap5 no-footer"> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-6"></div> | |
| <div class="col-sm-12 col-md-6"> | |
| <div id="fixed-columns-datatable_filter" class="dataTables_filter"> | |
| <label>Search:<input type="search" | |
| class="form-control form-control-sm" placeholder="" | |
| aria-controls="fixed-columns-datatable"></label></div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div class="dataTables_scroll"> | |
| <div class="dataTables_scrollHead" | |
| style="overflow: hidden; position: relative; border: 0px; width: 100%;"> | |
| <div class="dataTables_scrollHeadInner" | |
| style="box-sizing: content-box; width: 1114.85px; padding-right: 0px;"> | |
| <table | |
| class="table table-striped nowrap row-border order-column w-100 dataTable no-footer" | |
| style="margin-left: 0px; width: 1114.85px;"> | |
| <thead> | |
| <tr> | |
| <th class="sorting sorting_asc" tabindex="0" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 66.1833px;" | |
| aria-sort="ascending" | |
| aria-label="First name: activate to sort column descending"> | |
| First name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 63.3667px;" | |
| aria-label="Last name: activate to sort column ascending"> | |
| Last name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 174.783px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 68.4833px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 24.6667px;" | |
| aria-label="Age: activate to sort column ascending"> | |
| Age</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 62.3167px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| Start date</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 56.0667px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 32.1167px;" | |
| aria-label="Extn.: activate to sort column ascending"> | |
| Extn.</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 160.067px;" | |
| aria-label="E-mail: activate to sort column ascending"> | |
| E-mail</th> | |
| </tr> | |
| </thead> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="dataTables_scrollBody" | |
| style="position: relative; overflow: auto; width: 100%; max-height: 300px;"> | |
| <table id="fixed-columns-datatable" | |
| class="table table-striped nowrap row-border order-column w-100 dataTable no-footer" | |
| aria-describedby="fixed-columns-datatable_info" | |
| style="width: 1112px;"> | |
| <thead> | |
| <tr style="height: 0px;"> | |
| <th class="sorting sorting_asc" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 66.1833px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-sort="ascending" | |
| aria-label="First name: activate to sort column descending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">First | |
| name</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 63.3667px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Last name: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Last | |
| name</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 174.783px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| Position</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 68.4833px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| Office</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 24.6667px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Age: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Age | |
| </div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 62.3167px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Start | |
| date</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 56.0667px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| Salary</div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 32.1167px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="Extn.: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;">Extn. | |
| </div> | |
| </th> | |
| <th class="sorting" | |
| aria-controls="fixed-columns-datatable" | |
| rowspan="1" colspan="1" | |
| style="width: 160.067px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" | |
| aria-label="E-mail: activate to sort column ascending"> | |
| <div class="dataTables_sizing" | |
| style="height: 0px; overflow: hidden;"> | |
| E-mail</div> | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td class="sorting_1">Airi</td> | |
| <td>Satou</td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>33</td> | |
| <td>2008/11/28</td> | |
| <td>$162,700</td> | |
| <td>5407</td> | |
| <td>a.satou@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Angelica</td> | |
| <td>Ramos</td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2009/10/09</td> | |
| <td>$1,200,000</td> | |
| <td>5797</td> | |
| <td>a.ramos@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Ashton</td> | |
| <td>Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>San Francisco</td> | |
| <td>66</td> | |
| <td>2009/01/12</td> | |
| <td>$86,000</td> | |
| <td>1562</td> | |
| <td>a.cox@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Bradley</td> | |
| <td>Greer</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>41</td> | |
| <td>2012/10/13</td> | |
| <td>$132,000</td> | |
| <td>2558</td> | |
| <td>b.greer@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Brenden</td> | |
| <td>Wagner</td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>28</td> | |
| <td>2011/06/07</td> | |
| <td>$206,850</td> | |
| <td>1314</td> | |
| <td>b.wagner@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Brielle</td> | |
| <td>Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2012/12/02</td> | |
| <td>$372,000</td> | |
| <td>4804</td> | |
| <td>b.williamson@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Bruno</td> | |
| <td>Nash</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>38</td> | |
| <td>2011/05/03</td> | |
| <td>$163,500</td> | |
| <td>6222</td> | |
| <td>b.nash@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Caesar</td> | |
| <td>Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>New York</td> | |
| <td>21</td> | |
| <td>2011/12/12</td> | |
| <td>$106,450</td> | |
| <td>8330</td> | |
| <td>c.vance@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Cara</td> | |
| <td>Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>New York</td> | |
| <td>46</td> | |
| <td>2011/12/06</td> | |
| <td>$145,600</td> | |
| <td>3990</td> | |
| <td>c.stevens@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Cedric</td> | |
| <td>Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2012/03/29</td> | |
| <td>$433,060</td> | |
| <td>6224</td> | |
| <td>c.kelly@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Charde</td> | |
| <td>Marshall</td> | |
| <td>Regional Director</td> | |
| <td>San Francisco</td> | |
| <td>36</td> | |
| <td>2008/10/16</td> | |
| <td>$470,600</td> | |
| <td>6741</td> | |
| <td>c.marshall@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Colleen</td> | |
| <td>Hurst</td> | |
| <td>Javascript Developer</td> | |
| <td>San Francisco</td> | |
| <td>39</td> | |
| <td>2009/09/15</td> | |
| <td>$205,500</td> | |
| <td>2360</td> | |
| <td>c.hurst@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Dai</td> | |
| <td>Rios</td> | |
| <td>Personnel Lead</td> | |
| <td>Edinburgh</td> | |
| <td>35</td> | |
| <td>2012/09/26</td> | |
| <td>$217,500</td> | |
| <td>2290</td> | |
| <td>d.rios@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Donna</td> | |
| <td>Snider</td> | |
| <td>Customer Support</td> | |
| <td>New York</td> | |
| <td>27</td> | |
| <td>2011/01/25</td> | |
| <td>$112,000</td> | |
| <td>4226</td> | |
| <td>d.snider@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Doris</td> | |
| <td>Wilder</td> | |
| <td>Sales Assistant</td> | |
| <td>Sidney</td> | |
| <td>23</td> | |
| <td>2010/09/20</td> | |
| <td>$85,600</td> | |
| <td>3023</td> | |
| <td>d.wilder@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Finn</td> | |
| <td>Camacho</td> | |
| <td>Support Engineer</td> | |
| <td>San Francisco</td> | |
| <td>47</td> | |
| <td>2009/07/07</td> | |
| <td>$87,500</td> | |
| <td>2927</td> | |
| <td>f.camacho@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Fiona</td> | |
| <td>Green</td> | |
| <td>Chief Operating Officer (COO)</td> | |
| <td>San Francisco</td> | |
| <td>48</td> | |
| <td>2010/03/11</td> | |
| <td>$850,000</td> | |
| <td>2947</td> | |
| <td>f.green@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Garrett</td> | |
| <td>Winters</td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>63</td> | |
| <td>2011/07/25</td> | |
| <td>$170,750</td> | |
| <td>8422</td> | |
| <td>g.winters@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Gavin</td> | |
| <td>Joyce</td> | |
| <td>Developer</td> | |
| <td>Edinburgh</td> | |
| <td>42</td> | |
| <td>2010/12/22</td> | |
| <td>$92,575</td> | |
| <td>8822</td> | |
| <td>g.joyce@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Gavin</td> | |
| <td>Cortez</td> | |
| <td>Team Leader</td> | |
| <td>San Francisco</td> | |
| <td>22</td> | |
| <td>2008/10/26</td> | |
| <td>$235,500</td> | |
| <td>2860</td> | |
| <td>g.cortez@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Gloria</td> | |
| <td>Little</td> | |
| <td>Systems Administrator</td> | |
| <td>New York</td> | |
| <td>59</td> | |
| <td>2009/04/10</td> | |
| <td>$237,500</td> | |
| <td>1721</td> | |
| <td>g.little@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Haley</td> | |
| <td>Kennedy</td> | |
| <td>Senior Marketing Designer</td> | |
| <td>London</td> | |
| <td>43</td> | |
| <td>2012/12/18</td> | |
| <td>$313,500</td> | |
| <td>3597</td> | |
| <td>h.kennedy@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Hermione</td> | |
| <td>Butler</td> | |
| <td>Regional Director</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2011/03/21</td> | |
| <td>$356,250</td> | |
| <td>1016</td> | |
| <td>h.butler@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Herrod</td> | |
| <td>Chandler</td> | |
| <td>Sales Assistant</td> | |
| <td>San Francisco</td> | |
| <td>59</td> | |
| <td>2012/08/06</td> | |
| <td>$137,500</td> | |
| <td>9608</td> | |
| <td>h.chandler@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Hope</td> | |
| <td>Fuentes</td> | |
| <td>Secretary</td> | |
| <td>San Francisco</td> | |
| <td>41</td> | |
| <td>2010/02/12</td> | |
| <td>$109,850</td> | |
| <td>6318</td> | |
| <td>h.fuentes@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Howard</td> | |
| <td>Hatfield</td> | |
| <td>Office Manager</td> | |
| <td>San Francisco</td> | |
| <td>51</td> | |
| <td>2008/12/16</td> | |
| <td>$164,500</td> | |
| <td>7031</td> | |
| <td>h.hatfield@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Jackson</td> | |
| <td>Bradshaw</td> | |
| <td>Director</td> | |
| <td>New York</td> | |
| <td>65</td> | |
| <td>2008/09/26</td> | |
| <td>$645,750</td> | |
| <td>1042</td> | |
| <td>j.bradshaw@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Jena</td> | |
| <td>Gaines</td> | |
| <td>Office Manager</td> | |
| <td>London</td> | |
| <td>30</td> | |
| <td>2008/12/19</td> | |
| <td>$90,560</td> | |
| <td>3814</td> | |
| <td>j.gaines@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Jenette</td> | |
| <td>Caldwell</td> | |
| <td>Development Lead</td> | |
| <td>New York</td> | |
| <td>30</td> | |
| <td>2011/09/03</td> | |
| <td>$345,000</td> | |
| <td>1937</td> | |
| <td>j.caldwell@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Jennifer</td> | |
| <td>Chang</td> | |
| <td>Regional Director</td> | |
| <td>Singapore</td> | |
| <td>28</td> | |
| <td>2010/11/14</td> | |
| <td>$357,650</td> | |
| <td>9239</td> | |
| <td>j.chang@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Jennifer</td> | |
| <td>Acosta</td> | |
| <td>Junior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>43</td> | |
| <td>2013/02/01</td> | |
| <td>$75,650</td> | |
| <td>3431</td> | |
| <td>j.acosta@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Jonas</td> | |
| <td>Alexander</td> | |
| <td>Developer</td> | |
| <td>San Francisco</td> | |
| <td>30</td> | |
| <td>2010/07/14</td> | |
| <td>$86,500</td> | |
| <td>8196</td> | |
| <td>j.alexander@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Lael</td> | |
| <td>Greer</td> | |
| <td>Systems Administrator</td> | |
| <td>London</td> | |
| <td>21</td> | |
| <td>2009/02/27</td> | |
| <td>$103,500</td> | |
| <td>6733</td> | |
| <td>l.greer@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Martena</td> | |
| <td>Mccray</td> | |
| <td>Post-Sales support</td> | |
| <td>Edinburgh</td> | |
| <td>46</td> | |
| <td>2011/03/09</td> | |
| <td>$324,050</td> | |
| <td>8240</td> | |
| <td>m.mccray@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Michael</td> | |
| <td>Silva</td> | |
| <td>Marketing Designer</td> | |
| <td>London</td> | |
| <td>66</td> | |
| <td>2012/11/27</td> | |
| <td>$198,500</td> | |
| <td>1581</td> | |
| <td>m.silva@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Michael</td> | |
| <td>Bruce</td> | |
| <td>Javascript Developer</td> | |
| <td>Singapore</td> | |
| <td>29</td> | |
| <td>2011/06/27</td> | |
| <td>$183,000</td> | |
| <td>5384</td> | |
| <td>m.bruce@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Michelle</td> | |
| <td>House</td> | |
| <td>Integration Specialist</td> | |
| <td>Sidney</td> | |
| <td>37</td> | |
| <td>2011/06/02</td> | |
| <td>$95,400</td> | |
| <td>2769</td> | |
| <td>m.house@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Olivia</td> | |
| <td>Liang</td> | |
| <td>Support Engineer</td> | |
| <td>Singapore</td> | |
| <td>64</td> | |
| <td>2011/02/03</td> | |
| <td>$234,500</td> | |
| <td>2120</td> | |
| <td>o.liang@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Paul</td> | |
| <td>Byrd</td> | |
| <td>Chief Financial Officer (CFO)</td> | |
| <td>New York</td> | |
| <td>64</td> | |
| <td>2010/06/09</td> | |
| <td>$725,000</td> | |
| <td>3059</td> | |
| <td>p.byrd@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Prescott</td> | |
| <td>Bartlett</td> | |
| <td>Technical Author</td> | |
| <td>London</td> | |
| <td>27</td> | |
| <td>2011/05/07</td> | |
| <td>$145,000</td> | |
| <td>3606</td> | |
| <td>p.bartlett@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Quinn</td> | |
| <td>Flynn</td> | |
| <td>Support Lead</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2013/03/03</td> | |
| <td>$342,000</td> | |
| <td>9497</td> | |
| <td>q.flynn@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Rhona</td> | |
| <td>Davidson</td> | |
| <td>Integration Specialist</td> | |
| <td>Tokyo</td> | |
| <td>55</td> | |
| <td>2010/10/14</td> | |
| <td>$327,900</td> | |
| <td>6200</td> | |
| <td>r.davidson@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Sakura</td> | |
| <td>Yamamoto</td> | |
| <td>Support Engineer</td> | |
| <td>Tokyo</td> | |
| <td>37</td> | |
| <td>2009/08/19</td> | |
| <td>$139,575</td> | |
| <td>9383</td> | |
| <td>s.yamamoto@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Serge</td> | |
| <td>Baldwin</td> | |
| <td>Data Coordinator</td> | |
| <td>Singapore</td> | |
| <td>64</td> | |
| <td>2012/04/09</td> | |
| <td>$138,575</td> | |
| <td>8352</td> | |
| <td>s.baldwin@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Shad</td> | |
| <td>Decker</td> | |
| <td>Regional Director</td> | |
| <td>Edinburgh</td> | |
| <td>51</td> | |
| <td>2008/11/13</td> | |
| <td>$183,000</td> | |
| <td>6373</td> | |
| <td>s.decker@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Shou</td> | |
| <td>Itou</td> | |
| <td>Regional Marketing</td> | |
| <td>Tokyo</td> | |
| <td>20</td> | |
| <td>2011/08/14</td> | |
| <td>$163,000</td> | |
| <td>8899</td> | |
| <td>s.itou@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Sonya</td> | |
| <td>Frost</td> | |
| <td>Software Engineer</td> | |
| <td>Edinburgh</td> | |
| <td>23</td> | |
| <td>2008/12/13</td> | |
| <td>$103,600</td> | |
| <td>1667</td> | |
| <td>s.frost@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Suki</td> | |
| <td>Burks</td> | |
| <td>Developer</td> | |
| <td>London</td> | |
| <td>53</td> | |
| <td>2009/10/22</td> | |
| <td>$114,500</td> | |
| <td>6832</td> | |
| <td>s.burks@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Tatyana</td> | |
| <td>Fitzpatrick</td> | |
| <td>Regional Director</td> | |
| <td>London</td> | |
| <td>19</td> | |
| <td>2010/03/17</td> | |
| <td>$385,750</td> | |
| <td>1965</td> | |
| <td>t.fitzpatrick@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Thor</td> | |
| <td>Walton</td> | |
| <td>Developer</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2013/08/11</td> | |
| <td>$98,540</td> | |
| <td>8327</td> | |
| <td>t.walton@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Tiger</td> | |
| <td>Nixon</td> | |
| <td>System Architect</td> | |
| <td>Edinburgh</td> | |
| <td>61</td> | |
| <td>2011/04/25</td> | |
| <td>$320,800</td> | |
| <td>5421</td> | |
| <td>t.nixon@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Timothy</td> | |
| <td>Mooney</td> | |
| <td>Office Manager</td> | |
| <td>London</td> | |
| <td>37</td> | |
| <td>2008/12/11</td> | |
| <td>$136,200</td> | |
| <td>7580</td> | |
| <td>t.mooney@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Unity</td> | |
| <td>Butler</td> | |
| <td>Marketing Designer</td> | |
| <td>San Francisco</td> | |
| <td>47</td> | |
| <td>2009/12/09</td> | |
| <td>$85,675</td> | |
| <td>5384</td> | |
| <td>u.butler@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Vivian</td> | |
| <td>Harrell</td> | |
| <td>Financial Controller</td> | |
| <td>San Francisco</td> | |
| <td>62</td> | |
| <td>2009/02/14</td> | |
| <td>$452,500</td> | |
| <td>9422</td> | |
| <td>v.harrell@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Yuri</td> | |
| <td>Berry</td> | |
| <td>Chief Marketing Officer (CMO)</td> | |
| <td>New York</td> | |
| <td>40</td> | |
| <td>2009/06/25</td> | |
| <td>$675,000</td> | |
| <td>6154</td> | |
| <td>y.berry@datatables.net</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1">Zenaida</td> | |
| <td>Frank</td> | |
| <td>Software Engineer</td> | |
| <td>New York</td> | |
| <td>63</td> | |
| <td>2010/01/04</td> | |
| <td>$125,250</td> | |
| <td>7439</td> | |
| <td>z.frank@datatables.net</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1">Zorita</td> | |
| <td>Serrano</td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>56</td> | |
| <td>2012/06/01</td> | |
| <td>$115,000</td> | |
| <td>4389</td> | |
| <td>z.serrano@datatables.net</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="fixed-columns-datatable_info" | |
| role="status" aria-live="polite">Showing 1 to 57 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"></div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div> <!-- end row--> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card"> | |
| <div class="card-header"> | |
| <h4 class="header-title">Fixed Header</h4> | |
| <p class="text-muted mb-0"> | |
| The FixedHeader will freeze in place the header and/or footer in a DataTable, | |
| ensuring that title information will remain always visible. | |
| </p> | |
| </div> | |
| <div class="card-body"> | |
| <div id="fixed-header-datatable_wrapper" class="dataTables_wrapper dt-bootstrap5"> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-6"> | |
| <div class="dataTables_length" id="fixed-header-datatable_length"> | |
| <label>Show <select name="fixed-header-datatable_length" | |
| aria-controls="fixed-header-datatable" | |
| class="form-select form-select-sm"> | |
| <option value="10">10</option> | |
| <option value="25">25</option> | |
| <option value="50">50</option> | |
| <option value="100">100</option> | |
| </select> entries</label></div> | |
| </div> | |
| <div class="col-sm-12 col-md-6"> | |
| <div id="fixed-header-datatable_filter" class="dataTables_filter"> | |
| <label>Search:<input type="search" | |
| class="form-control form-control-sm" placeholder="" | |
| aria-controls="fixed-header-datatable"></label></div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <table id="fixed-header-datatable" | |
| class="table table-striped dt-responsive nowrap table-striped w-100 dataTable dtr-inline" | |
| aria-describedby="fixed-header-datatable_info" | |
| style="width: 1110px;"> | |
| <thead> | |
| <tr> | |
| <th class="sorting sorting_asc" tabindex="0" | |
| aria-controls="fixed-header-datatable" rowspan="1" | |
| colspan="1" style="width: 173.8px;" | |
| aria-sort="ascending" | |
| aria-label="Name: activate to sort column descending"> | |
| Name</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-header-datatable" rowspan="1" | |
| colspan="1" style="width: 261.8px;" | |
| aria-label="Position: activate to sort column ascending"> | |
| Position</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-header-datatable" rowspan="1" | |
| colspan="1" style="width: 123.8px;" | |
| aria-label="Office: activate to sort column ascending"> | |
| Office</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-header-datatable" rowspan="1" | |
| colspan="1" style="width: 58.8px;" | |
| aria-label="Age: activate to sort column ascending">Age | |
| </th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-header-datatable" rowspan="1" | |
| colspan="1" style="width: 114.8px;" | |
| aria-label="Start date: activate to sort column ascending"> | |
| Start date</th> | |
| <th class="sorting" tabindex="0" | |
| aria-controls="fixed-header-datatable" rowspan="1" | |
| colspan="1" style="width: 105.8px;" | |
| aria-label="Salary: activate to sort column ascending"> | |
| Salary</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Airi Satou</td> | |
| <td>Accountant</td> | |
| <td>Tokyo</td> | |
| <td>33</td> | |
| <td>2008/11/28</td> | |
| <td>$162,700</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Angelica Ramos</td> | |
| <td>Chief Executive Officer (CEO)</td> | |
| <td>London</td> | |
| <td>47</td> | |
| <td>2009/10/09</td> | |
| <td>$1,200,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td tabindex="0" class="sorting_1">Ashton Cox</td> | |
| <td>Junior Technical Author</td> | |
| <td>San Francisco</td> | |
| <td>66</td> | |
| <td>2009/01/12</td> | |
| <td>$86,000</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Bradley Greer</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>41</td> | |
| <td>2012/10/13</td> | |
| <td>$132,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Brenden Wagner</td> | |
| <td>Software Engineer</td> | |
| <td>San Francisco</td> | |
| <td>28</td> | |
| <td>2011/06/07</td> | |
| <td>$206,850</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Brielle Williamson</td> | |
| <td>Integration Specialist</td> | |
| <td>New York</td> | |
| <td>61</td> | |
| <td>2012/12/02</td> | |
| <td>$372,000</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Bruno Nash</td> | |
| <td>Software Engineer</td> | |
| <td>London</td> | |
| <td>38</td> | |
| <td>2011/05/03</td> | |
| <td>$163,500</td> | |
| </tr> | |
| <tr class="even"> | |
| <td class="sorting_1" tabindex="0">Caesar Vance</td> | |
| <td>Pre-Sales Support</td> | |
| <td>New York</td> | |
| <td>21</td> | |
| <td>2011/12/12</td> | |
| <td>$106,450</td> | |
| </tr> | |
| <tr class="odd"> | |
| <td class="sorting_1" tabindex="0">Cara Stevens</td> | |
| <td>Sales Assistant</td> | |
| <td>New York</td> | |
| <td>46</td> | |
| <td>2011/12/06</td> | |
| <td>$145,600</td> | |
| </tr> | |
| <tr class="even"> | |
| <td tabindex="0" class="sorting_1">Cedric Kelly</td> | |
| <td>Senior Javascript Developer</td> | |
| <td>Edinburgh</td> | |
| <td>22</td> | |
| <td>2012/03/29</td> | |
| <td>$433,060</td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <th rowspan="1" colspan="1">Name</th> | |
| <th rowspan="1" colspan="1">Position</th> | |
| <th rowspan="1" colspan="1">Office</th> | |
| <th rowspan="1" colspan="1">Age</th> | |
| <th rowspan="1" colspan="1">Start date</th> | |
| <th rowspan="1" colspan="1">Salary</th> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-sm-12 col-md-5"> | |
| <div class="dataTables_info" id="fixed-header-datatable_info" | |
| role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div> | |
| </div> | |
| <div class="col-sm-12 col-md-7"> | |
| <div class="dataTables_paginate paging_simple_numbers" | |
| id="fixed-header-datatable_paginate"> | |
| <ul class="pagination pagination-rounded"> | |
| <li class="paginate_button page-item previous disabled" | |
| id="fixed-header-datatable_previous"><a href="#" | |
| aria-controls="fixed-header-datatable" data-dt-idx="0" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-left-s-line"></i></a></li> | |
| <li class="paginate_button page-item active"><a href="#" | |
| aria-controls="fixed-header-datatable" data-dt-idx="1" | |
| tabindex="0" class="page-link">1</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="fixed-header-datatable" data-dt-idx="2" | |
| tabindex="0" class="page-link">2</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="fixed-header-datatable" data-dt-idx="3" | |
| tabindex="0" class="page-link">3</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="fixed-header-datatable" data-dt-idx="4" | |
| tabindex="0" class="page-link">4</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="fixed-header-datatable" data-dt-idx="5" | |
| tabindex="0" class="page-link">5</a></li> | |
| <li class="paginate_button page-item "><a href="#" | |
| aria-controls="fixed-header-datatable" data-dt-idx="6" | |
| tabindex="0" class="page-link">6</a></li> | |
| <li class="paginate_button page-item next" | |
| id="fixed-header-datatable_next"><a href="#" | |
| aria-controls="fixed-header-datatable" data-dt-idx="7" | |
| tabindex="0" class="page-link"><i | |
| class="ri-arrow-right-s-line"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> <!-- end card body--> | |
| </div> <!-- end card --> | |
| </div><!-- end col--> | |
| </div> <!-- end row--> | |
| </div> <!-- container --> | |
| </div> <!-- content --> | |
| <!-- Footer Start --> | |
| <footer class="footer"> | |
| <div class="container-fluid"> | |
| <div class="row"> | |
| <div class="col-12 text-center"> | |
| <script>document.write(new Date().getFullYear())</script>2024 © Velonic - Theme by | |
| <b>Techzaa</b> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- end Footer --> | |
| </div> | |
| <!-- ============================================================== --> | |
| <!-- End Page content --> | |
| <!-- ============================================================== --> | |
| </div> | |
| <!-- END wrapper --> | |
| <!-- Theme Settings --> | |
| <div class="offcanvas offcanvas-end" tabindex="-1" id="theme-settings-offcanvas"> | |
| <div class="d-flex align-items-center bg-primary p-3 offcanvas-header"> | |
| <h5 class="text-white m-0">Theme Settings</h5> | |
| <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="offcanvas" | |
| aria-label="Close"></button> | |
| </div> | |
| <div class="offcanvas-body p-0"> | |
| <div data-simplebar="init" class="h-100"> | |
| <div class="simplebar-wrapper" style="margin: 0px;"> | |
| <div class="simplebar-height-auto-observer-wrapper"> | |
| <div class="simplebar-height-auto-observer"></div> | |
| </div> | |
| <div class="simplebar-mask"> | |
| <div class="simplebar-offset" style="right: 0px; bottom: 0px;"> | |
| <div class="simplebar-content-wrapper" tabindex="0" role="region" | |
| aria-label="scrollable content" style="height: auto; overflow: hidden scroll;"> | |
| <div class="simplebar-content" style="padding: 0px;"> | |
| <div class="p-3"> | |
| <h5 class="mb-3 fs-16 fw-bold">Color Scheme</h5> | |
| <div class="row"> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" name="data-bs-theme" | |
| id="layout-color-light" value="light"> | |
| <label class="form-check-label" for="layout-color-light"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/light.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Light</h5> | |
| </div> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" name="data-bs-theme" | |
| id="layout-color-dark" value="dark"> | |
| <label class="form-check-label" for="layout-color-dark"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/dark.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Dark</h5> | |
| </div> | |
| </div> | |
| <div id="layout-width"> | |
| <h5 class="my-3 fs-16 fw-bold">Layout Mode</h5> | |
| <div class="row"> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" | |
| name="data-layout-mode" id="layout-mode-fluid" | |
| value="fluid"> | |
| <label class="form-check-label" for="layout-mode-fluid"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/light.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Fluid</h5> | |
| </div> | |
| <div class="col-4"> | |
| <div id="layout-boxed"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" | |
| name="data-layout-mode" id="layout-mode-boxed" | |
| value="boxed"> | |
| <label class="form-check-label" for="layout-mode-boxed"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/boxed.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Boxed</h5> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h5 class="my-3 fs-16 fw-bold">Topbar Color</h5> | |
| <div class="row"> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" | |
| name="data-topbar-color" id="topbar-color-light" value="light"> | |
| <label class="form-check-label" for="topbar-color-light"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/light.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Light</h5> | |
| </div> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" | |
| name="data-topbar-color" id="topbar-color-dark" value="dark"> | |
| <label class="form-check-label" for="topbar-color-dark"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/topbar-dark.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Dark</h5> | |
| </div> | |
| </div> | |
| <div> | |
| <h5 class="my-3 fs-16 fw-bold">Menu Color</h5> | |
| <div class="row"> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" | |
| name="data-menu-color" id="leftbar-color-light" | |
| value="light"> | |
| <label class="form-check-label" for="leftbar-color-light"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/sidebar-light.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Light</h5> | |
| </div> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" | |
| name="data-menu-color" id="leftbar-color-dark" value="dark"> | |
| <label class="form-check-label" for="leftbar-color-dark"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/light.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Dark</h5> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="sidebar-size"> | |
| <h5 class="my-3 fs-16 fw-bold">Sidebar Size</h5> | |
| <div class="row"> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" | |
| name="data-sidenav-size" id="leftbar-size-default" | |
| value="default"> | |
| <label class="form-check-label" for="leftbar-size-default"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/light.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Default</h5> | |
| </div> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" | |
| name="data-sidenav-size" id="leftbar-size-compact" | |
| value="compact"> | |
| <label class="form-check-label" for="leftbar-size-compact"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/compact.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Compact</h5> | |
| </div> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" | |
| name="data-sidenav-size" id="leftbar-size-small" | |
| value="condensed"> | |
| <label class="form-check-label" for="leftbar-size-small"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/sm.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Condensed</h5> | |
| </div> | |
| <div class="col-4"> | |
| <div class="form-check form-switch card-switch mb-1"> | |
| <input class="form-check-input" type="checkbox" | |
| name="data-sidenav-size" id="leftbar-size-full" | |
| value="full"> | |
| <label class="form-check-label" for="leftbar-size-full"> | |
| <img src="https://techzaa.getappui.com/velonic/layouts/assets/images/layouts/full.png" | |
| alt="" class="img-fluid"> | |
| </label> | |
| </div> | |
| <h5 class="font-14 text-center text-muted mt-2">Full Layout</h5> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="layout-position"> | |
| <h5 class="my-3 fs-16 fw-bold">Layout Position</h5> | |
| <div class="btn-group checkbox" role="group"> | |
| <input type="radio" class="btn-check" name="data-layout-position" | |
| id="layout-position-fixed" value="fixed"> | |
| <label class="btn btn-soft-primary w-sm" | |
| for="layout-position-fixed">Fixed</label> | |
| <input type="radio" class="btn-check" name="data-layout-position" | |
| id="layout-position-scrollable" value="scrollable"> | |
| <label class="btn btn-soft-primary w-sm ms-0" | |
| for="layout-position-scrollable">Scrollable</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="simplebar-placeholder" style="width: auto; height: 1152px;"></div> | |
| </div> | |
| <div class="simplebar-track simplebar-horizontal" style="visibility: hidden;"> | |
| <div class="simplebar-scrollbar" style="width: 0px; display: none;"></div> | |
| </div> | |
| <div class="simplebar-track simplebar-vertical" style="visibility: visible;"> | |
| <div class="simplebar-scrollbar" | |
| style="height: 25px; transform: translate3d(0px, 0px, 0px); display: block;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="offcanvas-footer border-top p-3 text-center"> | |
| <div class="row"> | |
| <div class="col-6"> | |
| <button type="button" class="btn btn-light w-100" id="reset-layout">Reset</button> | |
| </div> | |
| <div class="col-6"> | |
| <a href="https://1.envato.market/velonic" target="_blank" role="button" | |
| class="btn btn-primary w-100">Buy Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Vendor js --> | |
| <script src="https://techzaa.getappui.com/velonic/layouts/assets/js/vendor.min.js"></script> | |
| <!-- Datatables js --> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-responsive/js/dataTables.responsive.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-buttons/js/buttons.print.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-keytable/js/dataTables.keyTable.min.js"></script> | |
| <script | |
| src="https://techzaa.getappui.com/velonic/layouts/assets/vendor/datatables.net-select/js/dataTables.select.min.js"></script> | |
| <!-- Datatable Demo Aapp js --> | |
| <script src="https://techzaa.getappui.com/velonic/layouts/assets/js/pages/datatable.init.js"></script> | |
| <!-- App js --> | |
| <script src="https://techzaa.getappui.com/velonic/layouts/assets/js/app.min.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment