tables_dynamic.html 157 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <!-- Meta, title, CSS, favicons, etc. -->
  6. <meta charset="utf-8">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <title>DataTables | Gentelella</title>
  10. <!-- Bootstrap -->
  11. <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  12. <!-- Font Awesome -->
  13. <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  14. <!-- NProgress -->
  15. <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
  16. <!-- iCheck -->
  17. <link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
  18. <!-- Datatables -->
  19. <link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
  20. <link href="../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
  21. <link href="../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
  22. <link href="../vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
  23. <link href="../vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
  24. <!-- Custom Theme Style -->
  25. <link href="../build/css/custom.min.css" rel="stylesheet">
  26. </head>
  27. <body class="nav-md">
  28. <div class="container body">
  29. <div class="main_container">
  30. <div class="col-md-3 left_col">
  31. <div class="left_col scroll-view">
  32. <div class="navbar nav_title" style="border: 0;">
  33. <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
  34. </div>
  35. <div class="clearfix"></div>
  36. <!-- menu profile quick info -->
  37. <div class="profile clearfix">
  38. <div class="profile_pic">
  39. <img src="images/img.jpg" alt="..." class="img-circle profile_img">
  40. </div>
  41. <div class="profile_info">
  42. <span>Welcome,</span>
  43. <h2>John Doe</h2>
  44. </div>
  45. </div>
  46. <!-- /menu profile quick info -->
  47. <br />
  48. <!-- sidebar menu -->
  49. <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
  50. <div class="menu_section">
  51. <h3>General</h3>
  52. <ul class="nav side-menu">
  53. <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
  54. <ul class="nav child_menu">
  55. <li><a href="index.html">Dashboard</a></li>
  56. <li><a href="index2.html">Dashboard2</a></li>
  57. <li><a href="index3.html">Dashboard3</a></li>
  58. </ul>
  59. </li>
  60. <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
  61. <ul class="nav child_menu">
  62. <li><a href="form.html">General Form</a></li>
  63. <li><a href="form_advanced.html">Advanced Components</a></li>
  64. <li><a href="form_validation.html">Form Validation</a></li>
  65. <li><a href="form_wizards.html">Form Wizard</a></li>
  66. <li><a href="form_upload.html">Form Upload</a></li>
  67. <li><a href="form_buttons.html">Form Buttons</a></li>
  68. </ul>
  69. </li>
  70. <li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
  71. <ul class="nav child_menu">
  72. <li><a href="general_elements.html">General Elements</a></li>
  73. <li><a href="media_gallery.html">Media Gallery</a></li>
  74. <li><a href="typography.html">Typography</a></li>
  75. <li><a href="icons.html">Icons</a></li>
  76. <li><a href="glyphicons.html">Glyphicons</a></li>
  77. <li><a href="widgets.html">Widgets</a></li>
  78. <li><a href="invoice.html">Invoice</a></li>
  79. <li><a href="inbox.html">Inbox</a></li>
  80. <li><a href="calendar.html">Calendar</a></li>
  81. </ul>
  82. </li>
  83. <li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
  84. <ul class="nav child_menu">
  85. <li><a href="tables.html">Tables</a></li>
  86. <li><a href="tables_dynamic.html">Table Dynamic</a></li>
  87. </ul>
  88. </li>
  89. <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
  90. <ul class="nav child_menu">
  91. <li><a href="chartjs.html">Chart JS</a></li>
  92. <li><a href="chartjs2.html">Chart JS2</a></li>
  93. <li><a href="morisjs.html">Moris JS</a></li>
  94. <li><a href="echarts.html">ECharts</a></li>
  95. <li><a href="other_charts.html">Other Charts</a></li>
  96. </ul>
  97. </li>
  98. <li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
  99. <ul class="nav child_menu">
  100. <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
  101. <li><a href="fixed_footer.html">Fixed Footer</a></li>
  102. </ul>
  103. </li>
  104. </ul>
  105. </div>
  106. <div class="menu_section">
  107. <h3>Live On</h3>
  108. <ul class="nav side-menu">
  109. <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
  110. <ul class="nav child_menu">
  111. <li><a href="e_commerce.html">E-commerce</a></li>
  112. <li><a href="projects.html">Projects</a></li>
  113. <li><a href="project_detail.html">Project Detail</a></li>
  114. <li><a href="contacts.html">Contacts</a></li>
  115. <li><a href="profile.html">Profile</a></li>
  116. </ul>
  117. </li>
  118. <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
  119. <ul class="nav child_menu">
  120. <li><a href="page_403.html">403 Error</a></li>
  121. <li><a href="page_404.html">404 Error</a></li>
  122. <li><a href="page_500.html">500 Error</a></li>
  123. <li><a href="plain_page.html">Plain Page</a></li>
  124. <li><a href="login.html">Login Page</a></li>
  125. <li><a href="pricing_tables.html">Pricing Tables</a></li>
  126. </ul>
  127. </li>
  128. <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
  129. <ul class="nav child_menu">
  130. <li><a href="#level1_1">Level One</a>
  131. <li><a>Level One<span class="fa fa-chevron-down"></span></a>
  132. <ul class="nav child_menu">
  133. <li class="sub_menu"><a href="level2.html">Level Two</a>
  134. </li>
  135. <li><a href="#level2_1">Level Two</a>
  136. </li>
  137. <li><a href="#level2_2">Level Two</a>
  138. </li>
  139. </ul>
  140. </li>
  141. <li><a href="#level1_2">Level One</a>
  142. </li>
  143. </ul>
  144. </li>
  145. <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
  146. </ul>
  147. </div>
  148. </div>
  149. <!-- /sidebar menu -->
  150. <!-- /menu footer buttons -->
  151. <div class="sidebar-footer hidden-small">
  152. <a data-toggle="tooltip" data-placement="top" title="Settings">
  153. <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
  154. </a>
  155. <a data-toggle="tooltip" data-placement="top" title="FullScreen">
  156. <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
  157. </a>
  158. <a data-toggle="tooltip" data-placement="top" title="Lock">
  159. <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
  160. </a>
  161. <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
  162. <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
  163. </a>
  164. </div>
  165. <!-- /menu footer buttons -->
  166. </div>
  167. </div>
  168. <!-- top navigation -->
  169. <div class="top_nav">
  170. <div class="nav_menu">
  171. <div class="nav toggle">
  172. <a id="menu_toggle"><i class="fa fa-bars"></i></a>
  173. </div>
  174. <nav class="nav navbar-nav">
  175. <ul class=" navbar-right">
  176. <li class="nav-item dropdown open" style="padding-left: 15px;">
  177. <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
  178. <img src="images/img.jpg" alt="">John Doe
  179. </a>
  180. <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
  181. <a class="dropdown-item" href="javascript:;"> Profile</a>
  182. <a class="dropdown-item" href="javascript:;">
  183. <span class="badge bg-red pull-right">50%</span>
  184. <span>Settings</span>
  185. </a>
  186. <a class="dropdown-item" href="javascript:;">Help</a>
  187. <a class="dropdown-item" href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
  188. </div>
  189. </li>
  190. <li role="presentation" class="nav-item dropdown open">
  191. <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown" aria-expanded="false">
  192. <i class="fa fa-envelope-o"></i>
  193. <span class="badge bg-green">6</span>
  194. </a>
  195. <ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
  196. <li class="nav-item">
  197. <a class="dropdown-item">
  198. <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
  199. <span>
  200. <span>John Smith</span>
  201. <span class="time">3 mins ago</span>
  202. </span>
  203. <span class="message">
  204. Film festivals used to be do-or-die moments for movie makers. They were where...
  205. </span>
  206. </a>
  207. </li>
  208. <li class="nav-item">
  209. <a class="dropdown-item">
  210. <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
  211. <span>
  212. <span>John Smith</span>
  213. <span class="time">3 mins ago</span>
  214. </span>
  215. <span class="message">
  216. Film festivals used to be do-or-die moments for movie makers. They were where...
  217. </span>
  218. </a>
  219. </li>
  220. <li class="nav-item">
  221. <a class="dropdown-item">
  222. <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
  223. <span>
  224. <span>John Smith</span>
  225. <span class="time">3 mins ago</span>
  226. </span>
  227. <span class="message">
  228. Film festivals used to be do-or-die moments for movie makers. They were where...
  229. </span>
  230. </a>
  231. </li>
  232. <li class="nav-item">
  233. <a class="dropdown-item">
  234. <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
  235. <span>
  236. <span>John Smith</span>
  237. <span class="time">3 mins ago</span>
  238. </span>
  239. <span class="message">
  240. Film festivals used to be do-or-die moments for movie makers. They were where...
  241. </span>
  242. </a>
  243. </li>
  244. <li class="nav-item">
  245. <div class="text-center">
  246. <a class="dropdown-item">
  247. <strong>See All Alerts</strong>
  248. <i class="fa fa-angle-right"></i>
  249. </a>
  250. </div>
  251. </li>
  252. </ul>
  253. </li>
  254. </ul>
  255. </nav>
  256. </div>
  257. </div>
  258. <!-- /top navigation -->
  259. <!-- page content -->
  260. <div class="right_col" role="main">
  261. <div class="">
  262. <div class="page-title">
  263. <div class="title_left">
  264. <h3>Users <small>Some examples to get you started</small></h3>
  265. </div>
  266. <div class="title_right">
  267. <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
  268. <div class="input-group">
  269. <input type="text" class="form-control" placeholder="Search for...">
  270. <span class="input-group-btn">
  271. <button class="btn btn-secondary" type="button">Go!</button>
  272. </span>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. <div class="clearfix"></div>
  278. <div class="row">
  279. <div class="col-md-12 col-sm-12 col-xs-12">
  280. <div class="x_panel">
  281. <div class="x_title">
  282. <h2>Default Example <small>Users</small></h2>
  283. <ul class="nav navbar-right panel_toolbox">
  284. <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
  285. </li>
  286. <li class="dropdown">
  287. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  288. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  289. <a class="dropdown-item" href="#">Settings 1</a>
  290. <a class="dropdown-item" href="#">Settings 2</a>
  291. </div>
  292. </li>
  293. <li><a class="close-link"><i class="fa fa-close"></i></a>
  294. </li>
  295. </ul>
  296. <div class="clearfix"></div>
  297. </div>
  298. <div class="x_content">
  299. <p class="text-muted font-13 m-b-30">
  300. 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>
  301. </p>
  302. <table id="datatable" class="table table-striped table-bordered" style="width:100%">
  303. <thead>
  304. <tr>
  305. <th>Name</th>
  306. <th>Position</th>
  307. <th>Office</th>
  308. <th>Age</th>
  309. <th>Start date</th>
  310. <th>Salary</th>
  311. </tr>
  312. </thead>
  313. <tbody>
  314. <tr>
  315. <td>Tiger Nixon</td>
  316. <td>System Architect</td>
  317. <td>Edinburgh</td>
  318. <td>61</td>
  319. <td>2011/04/25</td>
  320. <td>$320,800</td>
  321. </tr>
  322. <tr>
  323. <td>Garrett Winters</td>
  324. <td>Accountant</td>
  325. <td>Tokyo</td>
  326. <td>63</td>
  327. <td>2011/07/25</td>
  328. <td>$170,750</td>
  329. </tr>
  330. <tr>
  331. <td>Ashton Cox</td>
  332. <td>Junior Technical Author</td>
  333. <td>San Francisco</td>
  334. <td>66</td>
  335. <td>2009/01/12</td>
  336. <td>$86,000</td>
  337. </tr>
  338. <tr>
  339. <td>Cedric Kelly</td>
  340. <td>Senior Javascript Developer</td>
  341. <td>Edinburgh</td>
  342. <td>22</td>
  343. <td>2012/03/29</td>
  344. <td>$433,060</td>
  345. </tr>
  346. <tr>
  347. <td>Airi Satou</td>
  348. <td>Accountant</td>
  349. <td>Tokyo</td>
  350. <td>33</td>
  351. <td>2008/11/28</td>
  352. <td>$162,700</td>
  353. </tr>
  354. <tr>
  355. <td>Brielle Williamson</td>
  356. <td>Integration Specialist</td>
  357. <td>New York</td>
  358. <td>61</td>
  359. <td>2012/12/02</td>
  360. <td>$372,000</td>
  361. </tr>
  362. <tr>
  363. <td>Herrod Chandler</td>
  364. <td>Sales Assistant</td>
  365. <td>San Francisco</td>
  366. <td>59</td>
  367. <td>2012/08/06</td>
  368. <td>$137,500</td>
  369. </tr>
  370. <tr>
  371. <td>Rhona Davidson</td>
  372. <td>Integration Specialist</td>
  373. <td>Tokyo</td>
  374. <td>55</td>
  375. <td>2010/10/14</td>
  376. <td>$327,900</td>
  377. </tr>
  378. <tr>
  379. <td>Colleen Hurst</td>
  380. <td>Javascript Developer</td>
  381. <td>San Francisco</td>
  382. <td>39</td>
  383. <td>2009/09/15</td>
  384. <td>$205,500</td>
  385. </tr>
  386. <tr>
  387. <td>Sonya Frost</td>
  388. <td>Software Engineer</td>
  389. <td>Edinburgh</td>
  390. <td>23</td>
  391. <td>2008/12/13</td>
  392. <td>$103,600</td>
  393. </tr>
  394. <tr>
  395. <td>Jena Gaines</td>
  396. <td>Office Manager</td>
  397. <td>London</td>
  398. <td>30</td>
  399. <td>2008/12/19</td>
  400. <td>$90,560</td>
  401. </tr>
  402. <tr>
  403. <td>Quinn Flynn</td>
  404. <td>Support Lead</td>
  405. <td>Edinburgh</td>
  406. <td>22</td>
  407. <td>2013/03/03</td>
  408. <td>$342,000</td>
  409. </tr>
  410. <tr>
  411. <td>Charde Marshall</td>
  412. <td>Regional Director</td>
  413. <td>San Francisco</td>
  414. <td>36</td>
  415. <td>2008/10/16</td>
  416. <td>$470,600</td>
  417. </tr>
  418. <tr>
  419. <td>Haley Kennedy</td>
  420. <td>Senior Marketing Designer</td>
  421. <td>London</td>
  422. <td>43</td>
  423. <td>2012/12/18</td>
  424. <td>$313,500</td>
  425. </tr>
  426. <tr>
  427. <td>Tatyana Fitzpatrick</td>
  428. <td>Regional Director</td>
  429. <td>London</td>
  430. <td>19</td>
  431. <td>2010/03/17</td>
  432. <td>$385,750</td>
  433. </tr>
  434. <tr>
  435. <td>Michael Silva</td>
  436. <td>Marketing Designer</td>
  437. <td>London</td>
  438. <td>66</td>
  439. <td>2012/11/27</td>
  440. <td>$198,500</td>
  441. </tr>
  442. <tr>
  443. <td>Paul Byrd</td>
  444. <td>Chief Financial Officer (CFO)</td>
  445. <td>New York</td>
  446. <td>64</td>
  447. <td>2010/06/09</td>
  448. <td>$725,000</td>
  449. </tr>
  450. <tr>
  451. <td>Gloria Little</td>
  452. <td>Systems Administrator</td>
  453. <td>New York</td>
  454. <td>59</td>
  455. <td>2009/04/10</td>
  456. <td>$237,500</td>
  457. </tr>
  458. <tr>
  459. <td>Bradley Greer</td>
  460. <td>Software Engineer</td>
  461. <td>London</td>
  462. <td>41</td>
  463. <td>2012/10/13</td>
  464. <td>$132,000</td>
  465. </tr>
  466. <tr>
  467. <td>Dai Rios</td>
  468. <td>Personnel Lead</td>
  469. <td>Edinburgh</td>
  470. <td>35</td>
  471. <td>2012/09/26</td>
  472. <td>$217,500</td>
  473. </tr>
  474. <tr>
  475. <td>Jenette Caldwell</td>
  476. <td>Development Lead</td>
  477. <td>New York</td>
  478. <td>30</td>
  479. <td>2011/09/03</td>
  480. <td>$345,000</td>
  481. </tr>
  482. <tr>
  483. <td>Yuri Berry</td>
  484. <td>Chief Marketing Officer (CMO)</td>
  485. <td>New York</td>
  486. <td>40</td>
  487. <td>2009/06/25</td>
  488. <td>$675,000</td>
  489. </tr>
  490. <tr>
  491. <td>Caesar Vance</td>
  492. <td>Pre-Sales Support</td>
  493. <td>New York</td>
  494. <td>21</td>
  495. <td>2011/12/12</td>
  496. <td>$106,450</td>
  497. </tr>
  498. <tr>
  499. <td>Doris Wilder</td>
  500. <td>Sales Assistant</td>
  501. <td>Sidney</td>
  502. <td>23</td>
  503. <td>2010/09/20</td>
  504. <td>$85,600</td>
  505. </tr>
  506. <tr>
  507. <td>Angelica Ramos</td>
  508. <td>Chief Executive Officer (CEO)</td>
  509. <td>London</td>
  510. <td>47</td>
  511. <td>2009/10/09</td>
  512. <td>$1,200,000</td>
  513. </tr>
  514. <tr>
  515. <td>Gavin Joyce</td>
  516. <td>Developer</td>
  517. <td>Edinburgh</td>
  518. <td>42</td>
  519. <td>2010/12/22</td>
  520. <td>$92,575</td>
  521. </tr>
  522. <tr>
  523. <td>Jennifer Chang</td>
  524. <td>Regional Director</td>
  525. <td>Singapore</td>
  526. <td>28</td>
  527. <td>2010/11/14</td>
  528. <td>$357,650</td>
  529. </tr>
  530. <tr>
  531. <td>Brenden Wagner</td>
  532. <td>Software Engineer</td>
  533. <td>San Francisco</td>
  534. <td>28</td>
  535. <td>2011/06/07</td>
  536. <td>$206,850</td>
  537. </tr>
  538. <tr>
  539. <td>Fiona Green</td>
  540. <td>Chief Operating Officer (COO)</td>
  541. <td>San Francisco</td>
  542. <td>48</td>
  543. <td>2010/03/11</td>
  544. <td>$850,000</td>
  545. </tr>
  546. <tr>
  547. <td>Shou Itou</td>
  548. <td>Regional Marketing</td>
  549. <td>Tokyo</td>
  550. <td>20</td>
  551. <td>2011/08/14</td>
  552. <td>$163,000</td>
  553. </tr>
  554. <tr>
  555. <td>Michelle House</td>
  556. <td>Integration Specialist</td>
  557. <td>Sidney</td>
  558. <td>37</td>
  559. <td>2011/06/02</td>
  560. <td>$95,400</td>
  561. </tr>
  562. <tr>
  563. <td>Suki Burks</td>
  564. <td>Developer</td>
  565. <td>London</td>
  566. <td>53</td>
  567. <td>2009/10/22</td>
  568. <td>$114,500</td>
  569. </tr>
  570. <tr>
  571. <td>Prescott Bartlett</td>
  572. <td>Technical Author</td>
  573. <td>London</td>
  574. <td>27</td>
  575. <td>2011/05/07</td>
  576. <td>$145,000</td>
  577. </tr>
  578. <tr>
  579. <td>Gavin Cortez</td>
  580. <td>Team Leader</td>
  581. <td>San Francisco</td>
  582. <td>22</td>
  583. <td>2008/10/26</td>
  584. <td>$235,500</td>
  585. </tr>
  586. <tr>
  587. <td>Martena Mccray</td>
  588. <td>Post-Sales support</td>
  589. <td>Edinburgh</td>
  590. <td>46</td>
  591. <td>2011/03/09</td>
  592. <td>$324,050</td>
  593. </tr>
  594. <tr>
  595. <td>Unity Butler</td>
  596. <td>Marketing Designer</td>
  597. <td>San Francisco</td>
  598. <td>47</td>
  599. <td>2009/12/09</td>
  600. <td>$85,675</td>
  601. </tr>
  602. <tr>
  603. <td>Howard Hatfield</td>
  604. <td>Office Manager</td>
  605. <td>San Francisco</td>
  606. <td>51</td>
  607. <td>2008/12/16</td>
  608. <td>$164,500</td>
  609. </tr>
  610. <tr>
  611. <td>Hope Fuentes</td>
  612. <td>Secretary</td>
  613. <td>San Francisco</td>
  614. <td>41</td>
  615. <td>2010/02/12</td>
  616. <td>$109,850</td>
  617. </tr>
  618. <tr>
  619. <td>Vivian Harrell</td>
  620. <td>Financial Controller</td>
  621. <td>San Francisco</td>
  622. <td>62</td>
  623. <td>2009/02/14</td>
  624. <td>$452,500</td>
  625. </tr>
  626. <tr>
  627. <td>Timothy Mooney</td>
  628. <td>Office Manager</td>
  629. <td>London</td>
  630. <td>37</td>
  631. <td>2008/12/11</td>
  632. <td>$136,200</td>
  633. </tr>
  634. <tr>
  635. <td>Jackson Bradshaw</td>
  636. <td>Director</td>
  637. <td>New York</td>
  638. <td>65</td>
  639. <td>2008/09/26</td>
  640. <td>$645,750</td>
  641. </tr>
  642. <tr>
  643. <td>Olivia Liang</td>
  644. <td>Support Engineer</td>
  645. <td>Singapore</td>
  646. <td>64</td>
  647. <td>2011/02/03</td>
  648. <td>$234,500</td>
  649. </tr>
  650. <tr>
  651. <td>Bruno Nash</td>
  652. <td>Software Engineer</td>
  653. <td>London</td>
  654. <td>38</td>
  655. <td>2011/05/03</td>
  656. <td>$163,500</td>
  657. </tr>
  658. <tr>
  659. <td>Sakura Yamamoto</td>
  660. <td>Support Engineer</td>
  661. <td>Tokyo</td>
  662. <td>37</td>
  663. <td>2009/08/19</td>
  664. <td>$139,575</td>
  665. </tr>
  666. <tr>
  667. <td>Thor Walton</td>
  668. <td>Developer</td>
  669. <td>New York</td>
  670. <td>61</td>
  671. <td>2013/08/11</td>
  672. <td>$98,540</td>
  673. </tr>
  674. <tr>
  675. <td>Finn Camacho</td>
  676. <td>Support Engineer</td>
  677. <td>San Francisco</td>
  678. <td>47</td>
  679. <td>2009/07/07</td>
  680. <td>$87,500</td>
  681. </tr>
  682. <tr>
  683. <td>Serge Baldwin</td>
  684. <td>Data Coordinator</td>
  685. <td>Singapore</td>
  686. <td>64</td>
  687. <td>2012/04/09</td>
  688. <td>$138,575</td>
  689. </tr>
  690. <tr>
  691. <td>Zenaida Frank</td>
  692. <td>Software Engineer</td>
  693. <td>New York</td>
  694. <td>63</td>
  695. <td>2010/01/04</td>
  696. <td>$125,250</td>
  697. </tr>
  698. <tr>
  699. <td>Zorita Serrano</td>
  700. <td>Software Engineer</td>
  701. <td>San Francisco</td>
  702. <td>56</td>
  703. <td>2012/06/01</td>
  704. <td>$115,000</td>
  705. </tr>
  706. <tr>
  707. <td>Jennifer Acosta</td>
  708. <td>Junior Javascript Developer</td>
  709. <td>Edinburgh</td>
  710. <td>43</td>
  711. <td>2013/02/01</td>
  712. <td>$75,650</td>
  713. </tr>
  714. <tr>
  715. <td>Cara Stevens</td>
  716. <td>Sales Assistant</td>
  717. <td>New York</td>
  718. <td>46</td>
  719. <td>2011/12/06</td>
  720. <td>$145,600</td>
  721. </tr>
  722. <tr>
  723. <td>Hermione Butler</td>
  724. <td>Regional Director</td>
  725. <td>London</td>
  726. <td>47</td>
  727. <td>2011/03/21</td>
  728. <td>$356,250</td>
  729. </tr>
  730. <tr>
  731. <td>Lael Greer</td>
  732. <td>Systems Administrator</td>
  733. <td>London</td>
  734. <td>21</td>
  735. <td>2009/02/27</td>
  736. <td>$103,500</td>
  737. </tr>
  738. <tr>
  739. <td>Jonas Alexander</td>
  740. <td>Developer</td>
  741. <td>San Francisco</td>
  742. <td>30</td>
  743. <td>2010/07/14</td>
  744. <td>$86,500</td>
  745. </tr>
  746. <tr>
  747. <td>Shad Decker</td>
  748. <td>Regional Director</td>
  749. <td>Edinburgh</td>
  750. <td>51</td>
  751. <td>2008/11/13</td>
  752. <td>$183,000</td>
  753. </tr>
  754. <tr>
  755. <td>Michael Bruce</td>
  756. <td>Javascript Developer</td>
  757. <td>Singapore</td>
  758. <td>29</td>
  759. <td>2011/06/27</td>
  760. <td>$183,000</td>
  761. </tr>
  762. <tr>
  763. <td>Donna Snider</td>
  764. <td>Customer Support</td>
  765. <td>New York</td>
  766. <td>27</td>
  767. <td>2011/01/25</td>
  768. <td>$112,000</td>
  769. </tr>
  770. </tbody>
  771. </table>
  772. </div>
  773. </div>
  774. </div>
  775. <div class="col-md-12 col-sm-12 col-xs-12">
  776. <div class="x_panel">
  777. <div class="x_title">
  778. <h2>Plus Table Design</small></h2>
  779. <ul class="nav navbar-right panel_toolbox">
  780. <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
  781. </li>
  782. <li class="dropdown">
  783. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  784. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  785. <a class="dropdown-item" href="#">Settings 1</a>
  786. <a class="dropdown-item" href="#">Settings 2</a>
  787. </div>
  788. </li>
  789. <li><a class="close-link"><i class="fa fa-close"></i></a>
  790. </li>
  791. </ul>
  792. <div class="clearfix"></div>
  793. </div>
  794. <div class="x_content">
  795. <p class="text-muted font-13 m-b-30">
  796. 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>
  797. </p>
  798. <table id="datatable-checkbox" class="table table-striped table-bordered bulk_action" style="width:100%">
  799. <thead>
  800. <tr>
  801. <th>
  802. <th><input type="checkbox" id="check-all" class="flat"></th>
  803. </th>
  804. <th>Name</th>
  805. <th>Position</th>
  806. <th>Office</th>
  807. <th>Age</th>
  808. <th>Start date</th>
  809. <th>Salary</th>
  810. </tr>
  811. </thead>
  812. <tbody>
  813. <tr>
  814. <td>
  815. <th><input type="checkbox" id="check-all" class="flat"></th>
  816. </td>
  817. <td>Tiger Nixon</td>
  818. <td>System Architect</td>
  819. <td>Edinburgh</td>
  820. <td>61</td>
  821. <td>2011/04/25</td>
  822. <td>$320,800</td>
  823. </tr>
  824. <tr>
  825. <td>
  826. <th><input type="checkbox" id="check-all" class="flat"></th>
  827. </td>
  828. <td>Garrett Winters</td>
  829. <td>Accountant</td>
  830. <td>Tokyo</td>
  831. <td>63</td>
  832. <td>2011/07/25</td>
  833. <td>$170,750</td>
  834. </tr>
  835. <tr>
  836. <td>
  837. <th><input type="checkbox" id="check-all" class="flat"></th>
  838. </td>
  839. <td>Ashton Cox</td>
  840. <td>Junior Technical Author</td>
  841. <td>San Francisco</td>
  842. <td>66</td>
  843. <td>2009/01/12</td>
  844. <td>$86,000</td>
  845. </tr>
  846. <tr>
  847. <td>
  848. <th><input type="checkbox" id="check-all" class="flat"></th>
  849. </td>
  850. <td>Cedric Kelly</td>
  851. <td>Senior Javascript Developer</td>
  852. <td>Edinburgh</td>
  853. <td>22</td>
  854. <td>2012/03/29</td>
  855. <td>$433,060</td>
  856. </tr>
  857. <tr>
  858. <td>
  859. <th><input type="checkbox" id="check-all" class="flat"></th>
  860. </td>
  861. <td>Airi Satou</td>
  862. <td>Accountant</td>
  863. <td>Tokyo</td>
  864. <td>33</td>
  865. <td>2008/11/28</td>
  866. <td>$162,700</td>
  867. </tr>
  868. <tr>
  869. <td>
  870. <th><input type="checkbox" id="check-all" class="flat"></th>
  871. </td>
  872. <td>Brielle Williamson</td>
  873. <td>Integration Specialist</td>
  874. <td>New York</td>
  875. <td>61</td>
  876. <td>2012/12/02</td>
  877. <td>$372,000</td>
  878. </tr>
  879. <tr>
  880. <td>
  881. <th><input type="checkbox" id="check-all" class="flat"></th>
  882. </td>
  883. <td>Herrod Chandler</td>
  884. <td>Sales Assistant</td>
  885. <td>San Francisco</td>
  886. <td>59</td>
  887. <td>2012/08/06</td>
  888. <td>$137,500</td>
  889. </tr>
  890. <tr>
  891. <td>
  892. <th><input type="checkbox" id="check-all" class="flat"></th>
  893. </td>
  894. <td>Rhona Davidson</td>
  895. <td>Integration Specialist</td>
  896. <td>Tokyo</td>
  897. <td>55</td>
  898. <td>2010/10/14</td>
  899. <td>$327,900</td>
  900. </tr>
  901. <tr>
  902. <td>
  903. <th><input type="checkbox" id="check-all" class="flat"></th>
  904. </td>
  905. <td>Colleen Hurst</td>
  906. <td>Javascript Developer</td>
  907. <td>San Francisco</td>
  908. <td>39</td>
  909. <td>2009/09/15</td>
  910. <td>$205,500</td>
  911. </tr>
  912. <tr>
  913. <td>
  914. <th><input type="checkbox" id="check-all" class="flat"></th>
  915. </td>
  916. <td>Sonya Frost</td>
  917. <td>Software Engineer</td>
  918. <td>Edinburgh</td>
  919. <td>23</td>
  920. <td>2008/12/13</td>
  921. <td>$103,600</td>
  922. </tr>
  923. <tr>
  924. <td>
  925. <th><input type="checkbox" id="check-all" class="flat"></th>
  926. </td>
  927. <td>Jena Gaines</td>
  928. <td>Office Manager</td>
  929. <td>London</td>
  930. <td>30</td>
  931. <td>2008/12/19</td>
  932. <td>$90,560</td>
  933. </tr>
  934. <tr>
  935. <td>
  936. <th><input type="checkbox" id="check-all" class="flat"></th>
  937. </td>
  938. <td>Quinn Flynn</td>
  939. <td>Support Lead</td>
  940. <td>Edinburgh</td>
  941. <td>22</td>
  942. <td>2013/03/03</td>
  943. <td>$342,000</td>
  944. </tr>
  945. <tr>
  946. <td>
  947. <th><input type="checkbox" id="check-all" class="flat"></th>
  948. </td>
  949. <td>Charde Marshall</td>
  950. <td>Regional Director</td>
  951. <td>San Francisco</td>
  952. <td>36</td>
  953. <td>2008/10/16</td>
  954. <td>$470,600</td>
  955. </tr>
  956. <tr>
  957. <td>
  958. <th><input type="checkbox" id="check-all" class="flat"></th>
  959. </td>
  960. <td>Haley Kennedy</td>
  961. <td>Senior Marketing Designer</td>
  962. <td>London</td>
  963. <td>43</td>
  964. <td>2012/12/18</td>
  965. <td>$313,500</td>
  966. </tr>
  967. <tr>
  968. <td>
  969. <th><input type="checkbox" id="check-all" class="flat"></th>
  970. </td>
  971. <td>Tatyana Fitzpatrick</td>
  972. <td>Regional Director</td>
  973. <td>London</td>
  974. <td>19</td>
  975. <td>2010/03/17</td>
  976. <td>$385,750</td>
  977. </tr>
  978. <tr>
  979. <td>
  980. <th><input type="checkbox" id="check-all" class="flat"></th>
  981. </td>
  982. <td>Michael Silva</td>
  983. <td>Marketing Designer</td>
  984. <td>London</td>
  985. <td>66</td>
  986. <td>2012/11/27</td>
  987. <td>$198,500</td>
  988. </tr>
  989. <tr>
  990. <td>
  991. <th><input type="checkbox" id="check-all" class="flat"></th>
  992. </td>
  993. <td>Paul Byrd</td>
  994. <td>Chief Financial Officer (CFO)</td>
  995. <td>New York</td>
  996. <td>64</td>
  997. <td>2010/06/09</td>
  998. <td>$725,000</td>
  999. </tr>
  1000. <tr>
  1001. <td>
  1002. <th><input type="checkbox" id="check-all" class="flat"></th>
  1003. </td>
  1004. <td>Gloria Little</td>
  1005. <td>Systems Administrator</td>
  1006. <td>New York</td>
  1007. <td>59</td>
  1008. <td>2009/04/10</td>
  1009. <td>$237,500</td>
  1010. </tr>
  1011. <tr>
  1012. <td>
  1013. <th><input type="checkbox" id="check-all" class="flat"></th>
  1014. </td>
  1015. <td>Bradley Greer</td>
  1016. <td>Software Engineer</td>
  1017. <td>London</td>
  1018. <td>41</td>
  1019. <td>2012/10/13</td>
  1020. <td>$132,000</td>
  1021. </tr>
  1022. <tr>
  1023. <td>
  1024. <th><input type="checkbox" id="check-all" class="flat"></th>
  1025. </td>
  1026. <td>Dai Rios</td>
  1027. <td>Personnel Lead</td>
  1028. <td>Edinburgh</td>
  1029. <td>35</td>
  1030. <td>2012/09/26</td>
  1031. <td>$217,500</td>
  1032. </tr>
  1033. <tr>
  1034. <td>
  1035. <th><input type="checkbox" id="check-all" class="flat"></th>
  1036. </td>
  1037. <td>Jenette Caldwell</td>
  1038. <td>Development Lead</td>
  1039. <td>New York</td>
  1040. <td>30</td>
  1041. <td>2011/09/03</td>
  1042. <td>$345,000</td>
  1043. </tr>
  1044. <tr>
  1045. <td>
  1046. <th><input type="checkbox" id="check-all" class="flat"></th>
  1047. </td>
  1048. <td>Yuri Berry</td>
  1049. <td>Chief Marketing Officer (CMO)</td>
  1050. <td>New York</td>
  1051. <td>40</td>
  1052. <td>2009/06/25</td>
  1053. <td>$675,000</td>
  1054. </tr>
  1055. <tr>
  1056. <td>
  1057. <th><input type="checkbox" id="check-all" class="flat"></th>
  1058. </td>
  1059. <td>Caesar Vance</td>
  1060. <td>Pre-Sales Support</td>
  1061. <td>New York</td>
  1062. <td>21</td>
  1063. <td>2011/12/12</td>
  1064. <td>$106,450</td>
  1065. </tr>
  1066. <tr>
  1067. <td>
  1068. <th><input type="checkbox" id="check-all" class="flat"></th>
  1069. </td>
  1070. <td>Doris Wilder</td>
  1071. <td>Sales Assistant</td>
  1072. <td>Sidney</td>
  1073. <td>23</td>
  1074. <td>2010/09/20</td>
  1075. <td>$85,600</td>
  1076. </tr>
  1077. <tr>
  1078. <td>
  1079. <th><input type="checkbox" id="check-all" class="flat"></th>
  1080. </td>
  1081. <td>Angelica Ramos</td>
  1082. <td>Chief Executive Officer (CEO)</td>
  1083. <td>London</td>
  1084. <td>47</td>
  1085. <td>2009/10/09</td>
  1086. <td>$1,200,000</td>
  1087. </tr>
  1088. <tr>
  1089. <td>
  1090. <th><input type="checkbox" id="check-all" class="flat"></th>
  1091. </td>
  1092. <td>Gavin Joyce</td>
  1093. <td>Developer</td>
  1094. <td>Edinburgh</td>
  1095. <td>42</td>
  1096. <td>2010/12/22</td>
  1097. <td>$92,575</td>
  1098. </tr>
  1099. <tr>
  1100. <td>
  1101. <th><input type="checkbox" id="check-all" class="flat"></th>
  1102. </td>
  1103. <td>Jennifer Chang</td>
  1104. <td>Regional Director</td>
  1105. <td>Singapore</td>
  1106. <td>28</td>
  1107. <td>2010/11/14</td>
  1108. <td>$357,650</td>
  1109. </tr>
  1110. <tr>
  1111. <td>
  1112. <th><input type="checkbox" id="check-all" class="flat"></th>
  1113. </td>
  1114. <td>Brenden Wagner</td>
  1115. <td>Software Engineer</td>
  1116. <td>San Francisco</td>
  1117. <td>28</td>
  1118. <td>2011/06/07</td>
  1119. <td>$206,850</td>
  1120. </tr>
  1121. <tr>
  1122. <td>
  1123. <th><input type="checkbox" id="check-all" class="flat"></th>
  1124. </td>
  1125. <td>Fiona Green</td>
  1126. <td>Chief Operating Officer (COO)</td>
  1127. <td>San Francisco</td>
  1128. <td>48</td>
  1129. <td>2010/03/11</td>
  1130. <td>$850,000</td>
  1131. </tr>
  1132. <tr>
  1133. <td>
  1134. <th><input type="checkbox" id="check-all" class="flat"></th>
  1135. </td>
  1136. <td>Shou Itou</td>
  1137. <td>Regional Marketing</td>
  1138. <td>Tokyo</td>
  1139. <td>20</td>
  1140. <td>2011/08/14</td>
  1141. <td>$163,000</td>
  1142. </tr>
  1143. <tr>
  1144. <td>
  1145. <th><input type="checkbox" id="check-all" class="flat"></th>
  1146. </td>
  1147. <td>Michelle House</td>
  1148. <td>Integration Specialist</td>
  1149. <td>Sidney</td>
  1150. <td>37</td>
  1151. <td>2011/06/02</td>
  1152. <td>$95,400</td>
  1153. </tr>
  1154. <tr>
  1155. <td>
  1156. <th><input type="checkbox" id="check-all" class="flat"></th>
  1157. </td>
  1158. <td>Suki Burks</td>
  1159. <td>Developer</td>
  1160. <td>London</td>
  1161. <td>53</td>
  1162. <td>2009/10/22</td>
  1163. <td>$114,500</td>
  1164. </tr>
  1165. <tr>
  1166. <td>
  1167. <th><input type="checkbox" id="check-all" class="flat"></th>
  1168. </td>
  1169. <td>Prescott Bartlett</td>
  1170. <td>Technical Author</td>
  1171. <td>London</td>
  1172. <td>27</td>
  1173. <td>2011/05/07</td>
  1174. <td>$145,000</td>
  1175. </tr>
  1176. <tr>
  1177. <td>
  1178. <th><input type="checkbox" id="check-all" class="flat"></th>
  1179. </td>
  1180. <td>Gavin Cortez</td>
  1181. <td>Team Leader</td>
  1182. <td>San Francisco</td>
  1183. <td>22</td>
  1184. <td>2008/10/26</td>
  1185. <td>$235,500</td>
  1186. </tr>
  1187. <tr>
  1188. <td>
  1189. <th><input type="checkbox" id="check-all" class="flat"></th>
  1190. </td>
  1191. <td>Martena Mccray</td>
  1192. <td>Post-Sales support</td>
  1193. <td>Edinburgh</td>
  1194. <td>46</td>
  1195. <td>2011/03/09</td>
  1196. <td>$324,050</td>
  1197. </tr>
  1198. <tr>
  1199. <td>
  1200. <th><input type="checkbox" id="check-all" class="flat"></th>
  1201. </td>
  1202. <td>Unity Butler</td>
  1203. <td>Marketing Designer</td>
  1204. <td>San Francisco</td>
  1205. <td>47</td>
  1206. <td>2009/12/09</td>
  1207. <td>$85,675</td>
  1208. </tr>
  1209. <tr>
  1210. <td>
  1211. <th><input type="checkbox" id="check-all" class="flat"></th>
  1212. </td>
  1213. <td>Howard Hatfield</td>
  1214. <td>Office Manager</td>
  1215. <td>San Francisco</td>
  1216. <td>51</td>
  1217. <td>2008/12/16</td>
  1218. <td>$164,500</td>
  1219. </tr>
  1220. <tr>
  1221. <td>
  1222. <th><input type="checkbox" id="check-all" class="flat"></th>
  1223. </td>
  1224. <td>Hope Fuentes</td>
  1225. <td>Secretary</td>
  1226. <td>San Francisco</td>
  1227. <td>41</td>
  1228. <td>2010/02/12</td>
  1229. <td>$109,850</td>
  1230. </tr>
  1231. <tr>
  1232. <td>
  1233. <th><input type="checkbox" id="check-all" class="flat"></th>
  1234. </td>
  1235. <td>Vivian Harrell</td>
  1236. <td>Financial Controller</td>
  1237. <td>San Francisco</td>
  1238. <td>62</td>
  1239. <td>2009/02/14</td>
  1240. <td>$452,500</td>
  1241. </tr>
  1242. <tr>
  1243. <td>
  1244. <th><input type="checkbox" id="check-all" class="flat"></th>
  1245. </td>
  1246. <td>Timothy Mooney</td>
  1247. <td>Office Manager</td>
  1248. <td>London</td>
  1249. <td>37</td>
  1250. <td>2008/12/11</td>
  1251. <td>$136,200</td>
  1252. </tr>
  1253. <tr>
  1254. <td>
  1255. <th><input type="checkbox" id="check-all" class="flat"></th>
  1256. </td>
  1257. <td>Jackson Bradshaw</td>
  1258. <td>Director</td>
  1259. <td>New York</td>
  1260. <td>65</td>
  1261. <td>2008/09/26</td>
  1262. <td>$645,750</td>
  1263. </tr>
  1264. <tr>
  1265. <td>
  1266. <th><input type="checkbox" id="check-all" class="flat"></th>
  1267. </td>
  1268. <td>Olivia Liang</td>
  1269. <td>Support Engineer</td>
  1270. <td>Singapore</td>
  1271. <td>64</td>
  1272. <td>2011/02/03</td>
  1273. <td>$234,500</td>
  1274. </tr>
  1275. <tr>
  1276. <td>
  1277. <th><input type="checkbox" id="check-all" class="flat"></th>
  1278. </td>
  1279. <td>Bruno Nash</td>
  1280. <td>Software Engineer</td>
  1281. <td>London</td>
  1282. <td>38</td>
  1283. <td>2011/05/03</td>
  1284. <td>$163,500</td>
  1285. </tr>
  1286. <tr>
  1287. <td>
  1288. <th><input type="checkbox" id="check-all" class="flat"></th>
  1289. </td>
  1290. <td>Sakura Yamamoto</td>
  1291. <td>Support Engineer</td>
  1292. <td>Tokyo</td>
  1293. <td>37</td>
  1294. <td>2009/08/19</td>
  1295. <td>$139,575</td>
  1296. </tr>
  1297. <tr>
  1298. <td>
  1299. <th><input type="checkbox" id="check-all" class="flat"></th>
  1300. </td>
  1301. <td>Thor Walton</td>
  1302. <td>Developer</td>
  1303. <td>New York</td>
  1304. <td>61</td>
  1305. <td>2013/08/11</td>
  1306. <td>$98,540</td>
  1307. </tr>
  1308. <tr>
  1309. <td>
  1310. <th><input type="checkbox" id="check-all" class="flat"></th>
  1311. </td>
  1312. <td>Finn Camacho</td>
  1313. <td>Support Engineer</td>
  1314. <td>San Francisco</td>
  1315. <td>47</td>
  1316. <td>2009/07/07</td>
  1317. <td>$87,500</td>
  1318. </tr>
  1319. <tr>
  1320. <td>
  1321. <th><input type="checkbox" id="check-all" class="flat"></th>
  1322. </td>
  1323. <td>Serge Baldwin</td>
  1324. <td>Data Coordinator</td>
  1325. <td>Singapore</td>
  1326. <td>64</td>
  1327. <td>2012/04/09</td>
  1328. <td>$138,575</td>
  1329. </tr>
  1330. <tr>
  1331. <td>
  1332. <th><input type="checkbox" id="check-all" class="flat"></th>
  1333. </td>
  1334. <td>Zenaida Frank</td>
  1335. <td>Software Engineer</td>
  1336. <td>New York</td>
  1337. <td>63</td>
  1338. <td>2010/01/04</td>
  1339. <td>$125,250</td>
  1340. </tr>
  1341. <tr>
  1342. <td>
  1343. <th><input type="checkbox" id="check-all" class="flat"></th>
  1344. </td>
  1345. <td>Zorita Serrano</td>
  1346. <td>Software Engineer</td>
  1347. <td>San Francisco</td>
  1348. <td>56</td>
  1349. <td>2012/06/01</td>
  1350. <td>$115,000</td>
  1351. </tr>
  1352. <tr>
  1353. <td>
  1354. <th><input type="checkbox" id="check-all" class="flat"></th>
  1355. </td>
  1356. <td>Jennifer Acosta</td>
  1357. <td>Junior Javascript Developer</td>
  1358. <td>Edinburgh</td>
  1359. <td>43</td>
  1360. <td>2013/02/01</td>
  1361. <td>$75,650</td>
  1362. </tr>
  1363. <tr>
  1364. <td>
  1365. <th><input type="checkbox" id="check-all" class="flat"></th>
  1366. </td>
  1367. <td>Cara Stevens</td>
  1368. <td>Sales Assistant</td>
  1369. <td>New York</td>
  1370. <td>46</td>
  1371. <td>2011/12/06</td>
  1372. <td>$145,600</td>
  1373. </tr>
  1374. <tr>
  1375. <td>
  1376. <th><input type="checkbox" id="check-all" class="flat"></th>
  1377. </td>
  1378. <td>Hermione Butler</td>
  1379. <td>Regional Director</td>
  1380. <td>London</td>
  1381. <td>47</td>
  1382. <td>2011/03/21</td>
  1383. <td>$356,250</td>
  1384. </tr>
  1385. <tr>
  1386. <td>
  1387. <th><input type="checkbox" id="check-all" class="flat"></th>
  1388. </td>
  1389. <td>Lael Greer</td>
  1390. <td>Systems Administrator</td>
  1391. <td>London</td>
  1392. <td>21</td>
  1393. <td>2009/02/27</td>
  1394. <td>$103,500</td>
  1395. </tr>
  1396. <tr>
  1397. <td>
  1398. <th><input type="checkbox" id="check-all" class="flat"></th>
  1399. </td>
  1400. <td>Jonas Alexander</td>
  1401. <td>Developer</td>
  1402. <td>San Francisco</td>
  1403. <td>30</td>
  1404. <td>2010/07/14</td>
  1405. <td>$86,500</td>
  1406. </tr>
  1407. <tr>
  1408. <td>
  1409. <th><input type="checkbox" id="check-all" class="flat"></th>
  1410. </td>
  1411. <td>Shad Decker</td>
  1412. <td>Regional Director</td>
  1413. <td>Edinburgh</td>
  1414. <td>51</td>
  1415. <td>2008/11/13</td>
  1416. <td>$183,000</td>
  1417. </tr>
  1418. <tr>
  1419. <td>
  1420. <th><input type="checkbox" id="check-all" class="flat"></th>
  1421. </td>
  1422. <td>Michael Bruce</td>
  1423. <td>Javascript Developer</td>
  1424. <td>Singapore</td>
  1425. <td>29</td>
  1426. <td>2011/06/27</td>
  1427. <td>$183,000</td>
  1428. </tr>
  1429. <tr>
  1430. <td>
  1431. <th><input type="checkbox" id="check-all" class="flat"></th>
  1432. </td>
  1433. <td>Donna Snider</td>
  1434. <td>Customer Support</td>
  1435. <td>New York</td>
  1436. <td>27</td>
  1437. <td>2011/01/25</td>
  1438. <td>$112,000</td>
  1439. </tr>
  1440. </tbody>
  1441. </table>
  1442. </div>
  1443. </div>
  1444. </div>
  1445. <div class="col-md-12 col-sm-12 col-xs-12">
  1446. <div class="x_panel">
  1447. <div class="x_title">
  1448. <h2>Button Example <small>Users</small></h2>
  1449. <ul class="nav navbar-right panel_toolbox">
  1450. <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
  1451. </li>
  1452. <li class="dropdown">
  1453. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  1454. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  1455. <a class="dropdown-item" href="#">Settings 1</a>
  1456. <a class="dropdown-item" href="#">Settings 2</a>
  1457. </div>
  1458. </li>
  1459. <li><a class="close-link"><i class="fa fa-close"></i></a>
  1460. </li>
  1461. </ul>
  1462. <div class="clearfix"></div>
  1463. </div>
  1464. <div class="x_content">
  1465. <p class="text-muted font-13 m-b-30">
  1466. 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.
  1467. </p>
  1468. <table id="datatable-buttons" class="table table-striped table-bordered" style="width:100%">
  1469. <thead>
  1470. <tr>
  1471. <th>Name</th>
  1472. <th>Position</th>
  1473. <th>Office</th>
  1474. <th>Age</th>
  1475. <th>Start date</th>
  1476. <th>Salary</th>
  1477. </tr>
  1478. </thead>
  1479. <tbody>
  1480. <tr>
  1481. <td>Tiger Nixon</td>
  1482. <td>System Architect</td>
  1483. <td>Edinburgh</td>
  1484. <td>61</td>
  1485. <td>2011/04/25</td>
  1486. <td>$320,800</td>
  1487. </tr>
  1488. <tr>
  1489. <td>Garrett Winters</td>
  1490. <td>Accountant</td>
  1491. <td>Tokyo</td>
  1492. <td>63</td>
  1493. <td>2011/07/25</td>
  1494. <td>$170,750</td>
  1495. </tr>
  1496. <tr>
  1497. <td>Ashton Cox</td>
  1498. <td>Junior Technical Author</td>
  1499. <td>San Francisco</td>
  1500. <td>66</td>
  1501. <td>2009/01/12</td>
  1502. <td>$86,000</td>
  1503. </tr>
  1504. <tr>
  1505. <td>Cedric Kelly</td>
  1506. <td>Senior Javascript Developer</td>
  1507. <td>Edinburgh</td>
  1508. <td>22</td>
  1509. <td>2012/03/29</td>
  1510. <td>$433,060</td>
  1511. </tr>
  1512. <tr>
  1513. <td>Airi Satou</td>
  1514. <td>Accountant</td>
  1515. <td>Tokyo</td>
  1516. <td>33</td>
  1517. <td>2008/11/28</td>
  1518. <td>$162,700</td>
  1519. </tr>
  1520. <tr>
  1521. <td>Brielle Williamson</td>
  1522. <td>Integration Specialist</td>
  1523. <td>New York</td>
  1524. <td>61</td>
  1525. <td>2012/12/02</td>
  1526. <td>$372,000</td>
  1527. </tr>
  1528. <tr>
  1529. <td>Herrod Chandler</td>
  1530. <td>Sales Assistant</td>
  1531. <td>San Francisco</td>
  1532. <td>59</td>
  1533. <td>2012/08/06</td>
  1534. <td>$137,500</td>
  1535. </tr>
  1536. <tr>
  1537. <td>Rhona Davidson</td>
  1538. <td>Integration Specialist</td>
  1539. <td>Tokyo</td>
  1540. <td>55</td>
  1541. <td>2010/10/14</td>
  1542. <td>$327,900</td>
  1543. </tr>
  1544. <tr>
  1545. <td>Colleen Hurst</td>
  1546. <td>Javascript Developer</td>
  1547. <td>San Francisco</td>
  1548. <td>39</td>
  1549. <td>2009/09/15</td>
  1550. <td>$205,500</td>
  1551. </tr>
  1552. <tr>
  1553. <td>Sonya Frost</td>
  1554. <td>Software Engineer</td>
  1555. <td>Edinburgh</td>
  1556. <td>23</td>
  1557. <td>2008/12/13</td>
  1558. <td>$103,600</td>
  1559. </tr>
  1560. <tr>
  1561. <td>Jena Gaines</td>
  1562. <td>Office Manager</td>
  1563. <td>London</td>
  1564. <td>30</td>
  1565. <td>2008/12/19</td>
  1566. <td>$90,560</td>
  1567. </tr>
  1568. <tr>
  1569. <td>Quinn Flynn</td>
  1570. <td>Support Lead</td>
  1571. <td>Edinburgh</td>
  1572. <td>22</td>
  1573. <td>2013/03/03</td>
  1574. <td>$342,000</td>
  1575. </tr>
  1576. <tr>
  1577. <td>Charde Marshall</td>
  1578. <td>Regional Director</td>
  1579. <td>San Francisco</td>
  1580. <td>36</td>
  1581. <td>2008/10/16</td>
  1582. <td>$470,600</td>
  1583. </tr>
  1584. <tr>
  1585. <td>Haley Kennedy</td>
  1586. <td>Senior Marketing Designer</td>
  1587. <td>London</td>
  1588. <td>43</td>
  1589. <td>2012/12/18</td>
  1590. <td>$313,500</td>
  1591. </tr>
  1592. <tr>
  1593. <td>Tatyana Fitzpatrick</td>
  1594. <td>Regional Director</td>
  1595. <td>London</td>
  1596. <td>19</td>
  1597. <td>2010/03/17</td>
  1598. <td>$385,750</td>
  1599. </tr>
  1600. <tr>
  1601. <td>Michael Silva</td>
  1602. <td>Marketing Designer</td>
  1603. <td>London</td>
  1604. <td>66</td>
  1605. <td>2012/11/27</td>
  1606. <td>$198,500</td>
  1607. </tr>
  1608. <tr>
  1609. <td>Paul Byrd</td>
  1610. <td>Chief Financial Officer (CFO)</td>
  1611. <td>New York</td>
  1612. <td>64</td>
  1613. <td>2010/06/09</td>
  1614. <td>$725,000</td>
  1615. </tr>
  1616. <tr>
  1617. <td>Gloria Little</td>
  1618. <td>Systems Administrator</td>
  1619. <td>New York</td>
  1620. <td>59</td>
  1621. <td>2009/04/10</td>
  1622. <td>$237,500</td>
  1623. </tr>
  1624. <tr>
  1625. <td>Bradley Greer</td>
  1626. <td>Software Engineer</td>
  1627. <td>London</td>
  1628. <td>41</td>
  1629. <td>2012/10/13</td>
  1630. <td>$132,000</td>
  1631. </tr>
  1632. <tr>
  1633. <td>Dai Rios</td>
  1634. <td>Personnel Lead</td>
  1635. <td>Edinburgh</td>
  1636. <td>35</td>
  1637. <td>2012/09/26</td>
  1638. <td>$217,500</td>
  1639. </tr>
  1640. <tr>
  1641. <td>Jenette Caldwell</td>
  1642. <td>Development Lead</td>
  1643. <td>New York</td>
  1644. <td>30</td>
  1645. <td>2011/09/03</td>
  1646. <td>$345,000</td>
  1647. </tr>
  1648. <tr>
  1649. <td>Yuri Berry</td>
  1650. <td>Chief Marketing Officer (CMO)</td>
  1651. <td>New York</td>
  1652. <td>40</td>
  1653. <td>2009/06/25</td>
  1654. <td>$675,000</td>
  1655. </tr>
  1656. <tr>
  1657. <td>Caesar Vance</td>
  1658. <td>Pre-Sales Support</td>
  1659. <td>New York</td>
  1660. <td>21</td>
  1661. <td>2011/12/12</td>
  1662. <td>$106,450</td>
  1663. </tr>
  1664. <tr>
  1665. <td>Doris Wilder</td>
  1666. <td>Sales Assistant</td>
  1667. <td>Sidney</td>
  1668. <td>23</td>
  1669. <td>2010/09/20</td>
  1670. <td>$85,600</td>
  1671. </tr>
  1672. <tr>
  1673. <td>Angelica Ramos</td>
  1674. <td>Chief Executive Officer (CEO)</td>
  1675. <td>London</td>
  1676. <td>47</td>
  1677. <td>2009/10/09</td>
  1678. <td>$1,200,000</td>
  1679. </tr>
  1680. <tr>
  1681. <td>Gavin Joyce</td>
  1682. <td>Developer</td>
  1683. <td>Edinburgh</td>
  1684. <td>42</td>
  1685. <td>2010/12/22</td>
  1686. <td>$92,575</td>
  1687. </tr>
  1688. <tr>
  1689. <td>Jennifer Chang</td>
  1690. <td>Regional Director</td>
  1691. <td>Singapore</td>
  1692. <td>28</td>
  1693. <td>2010/11/14</td>
  1694. <td>$357,650</td>
  1695. </tr>
  1696. <tr>
  1697. <td>Brenden Wagner</td>
  1698. <td>Software Engineer</td>
  1699. <td>San Francisco</td>
  1700. <td>28</td>
  1701. <td>2011/06/07</td>
  1702. <td>$206,850</td>
  1703. </tr>
  1704. <tr>
  1705. <td>Fiona Green</td>
  1706. <td>Chief Operating Officer (COO)</td>
  1707. <td>San Francisco</td>
  1708. <td>48</td>
  1709. <td>2010/03/11</td>
  1710. <td>$850,000</td>
  1711. </tr>
  1712. <tr>
  1713. <td>Shou Itou</td>
  1714. <td>Regional Marketing</td>
  1715. <td>Tokyo</td>
  1716. <td>20</td>
  1717. <td>2011/08/14</td>
  1718. <td>$163,000</td>
  1719. </tr>
  1720. <tr>
  1721. <td>Michelle House</td>
  1722. <td>Integration Specialist</td>
  1723. <td>Sidney</td>
  1724. <td>37</td>
  1725. <td>2011/06/02</td>
  1726. <td>$95,400</td>
  1727. </tr>
  1728. <tr>
  1729. <td>Suki Burks</td>
  1730. <td>Developer</td>
  1731. <td>London</td>
  1732. <td>53</td>
  1733. <td>2009/10/22</td>
  1734. <td>$114,500</td>
  1735. </tr>
  1736. <tr>
  1737. <td>Prescott Bartlett</td>
  1738. <td>Technical Author</td>
  1739. <td>London</td>
  1740. <td>27</td>
  1741. <td>2011/05/07</td>
  1742. <td>$145,000</td>
  1743. </tr>
  1744. <tr>
  1745. <td>Gavin Cortez</td>
  1746. <td>Team Leader</td>
  1747. <td>San Francisco</td>
  1748. <td>22</td>
  1749. <td>2008/10/26</td>
  1750. <td>$235,500</td>
  1751. </tr>
  1752. <tr>
  1753. <td>Martena Mccray</td>
  1754. <td>Post-Sales support</td>
  1755. <td>Edinburgh</td>
  1756. <td>46</td>
  1757. <td>2011/03/09</td>
  1758. <td>$324,050</td>
  1759. </tr>
  1760. <tr>
  1761. <td>Unity Butler</td>
  1762. <td>Marketing Designer</td>
  1763. <td>San Francisco</td>
  1764. <td>47</td>
  1765. <td>2009/12/09</td>
  1766. <td>$85,675</td>
  1767. </tr>
  1768. <tr>
  1769. <td>Howard Hatfield</td>
  1770. <td>Office Manager</td>
  1771. <td>San Francisco</td>
  1772. <td>51</td>
  1773. <td>2008/12/16</td>
  1774. <td>$164,500</td>
  1775. </tr>
  1776. <tr>
  1777. <td>Hope Fuentes</td>
  1778. <td>Secretary</td>
  1779. <td>San Francisco</td>
  1780. <td>41</td>
  1781. <td>2010/02/12</td>
  1782. <td>$109,850</td>
  1783. </tr>
  1784. <tr>
  1785. <td>Vivian Harrell</td>
  1786. <td>Financial Controller</td>
  1787. <td>San Francisco</td>
  1788. <td>62</td>
  1789. <td>2009/02/14</td>
  1790. <td>$452,500</td>
  1791. </tr>
  1792. <tr>
  1793. <td>Timothy Mooney</td>
  1794. <td>Office Manager</td>
  1795. <td>London</td>
  1796. <td>37</td>
  1797. <td>2008/12/11</td>
  1798. <td>$136,200</td>
  1799. </tr>
  1800. <tr>
  1801. <td>Jackson Bradshaw</td>
  1802. <td>Director</td>
  1803. <td>New York</td>
  1804. <td>65</td>
  1805. <td>2008/09/26</td>
  1806. <td>$645,750</td>
  1807. </tr>
  1808. <tr>
  1809. <td>Olivia Liang</td>
  1810. <td>Support Engineer</td>
  1811. <td>Singapore</td>
  1812. <td>64</td>
  1813. <td>2011/02/03</td>
  1814. <td>$234,500</td>
  1815. </tr>
  1816. <tr>
  1817. <td>Bruno Nash</td>
  1818. <td>Software Engineer</td>
  1819. <td>London</td>
  1820. <td>38</td>
  1821. <td>2011/05/03</td>
  1822. <td>$163,500</td>
  1823. </tr>
  1824. <tr>
  1825. <td>Sakura Yamamoto</td>
  1826. <td>Support Engineer</td>
  1827. <td>Tokyo</td>
  1828. <td>37</td>
  1829. <td>2009/08/19</td>
  1830. <td>$139,575</td>
  1831. </tr>
  1832. <tr>
  1833. <td>Thor Walton</td>
  1834. <td>Developer</td>
  1835. <td>New York</td>
  1836. <td>61</td>
  1837. <td>2013/08/11</td>
  1838. <td>$98,540</td>
  1839. </tr>
  1840. <tr>
  1841. <td>Finn Camacho</td>
  1842. <td>Support Engineer</td>
  1843. <td>San Francisco</td>
  1844. <td>47</td>
  1845. <td>2009/07/07</td>
  1846. <td>$87,500</td>
  1847. </tr>
  1848. <tr>
  1849. <td>Serge Baldwin</td>
  1850. <td>Data Coordinator</td>
  1851. <td>Singapore</td>
  1852. <td>64</td>
  1853. <td>2012/04/09</td>
  1854. <td>$138,575</td>
  1855. </tr>
  1856. <tr>
  1857. <td>Zenaida Frank</td>
  1858. <td>Software Engineer</td>
  1859. <td>New York</td>
  1860. <td>63</td>
  1861. <td>2010/01/04</td>
  1862. <td>$125,250</td>
  1863. </tr>
  1864. <tr>
  1865. <td>Zorita Serrano</td>
  1866. <td>Software Engineer</td>
  1867. <td>San Francisco</td>
  1868. <td>56</td>
  1869. <td>2012/06/01</td>
  1870. <td>$115,000</td>
  1871. </tr>
  1872. <tr>
  1873. <td>Jennifer Acosta</td>
  1874. <td>Junior Javascript Developer</td>
  1875. <td>Edinburgh</td>
  1876. <td>43</td>
  1877. <td>2013/02/01</td>
  1878. <td>$75,650</td>
  1879. </tr>
  1880. <tr>
  1881. <td>Cara Stevens</td>
  1882. <td>Sales Assistant</td>
  1883. <td>New York</td>
  1884. <td>46</td>
  1885. <td>2011/12/06</td>
  1886. <td>$145,600</td>
  1887. </tr>
  1888. <tr>
  1889. <td>Hermione Butler</td>
  1890. <td>Regional Director</td>
  1891. <td>London</td>
  1892. <td>47</td>
  1893. <td>2011/03/21</td>
  1894. <td>$356,250</td>
  1895. </tr>
  1896. <tr>
  1897. <td>Lael Greer</td>
  1898. <td>Systems Administrator</td>
  1899. <td>London</td>
  1900. <td>21</td>
  1901. <td>2009/02/27</td>
  1902. <td>$103,500</td>
  1903. </tr>
  1904. <tr>
  1905. <td>Jonas Alexander</td>
  1906. <td>Developer</td>
  1907. <td>San Francisco</td>
  1908. <td>30</td>
  1909. <td>2010/07/14</td>
  1910. <td>$86,500</td>
  1911. </tr>
  1912. <tr>
  1913. <td>Shad Decker</td>
  1914. <td>Regional Director</td>
  1915. <td>Edinburgh</td>
  1916. <td>51</td>
  1917. <td>2008/11/13</td>
  1918. <td>$183,000</td>
  1919. </tr>
  1920. <tr>
  1921. <td>Michael Bruce</td>
  1922. <td>Javascript Developer</td>
  1923. <td>Singapore</td>
  1924. <td>29</td>
  1925. <td>2011/06/27</td>
  1926. <td>$183,000</td>
  1927. </tr>
  1928. <tr>
  1929. <td>Donna Snider</td>
  1930. <td>Customer Support</td>
  1931. <td>New York</td>
  1932. <td>27</td>
  1933. <td>2011/01/25</td>
  1934. <td>$112,000</td>
  1935. </tr>
  1936. </tbody>
  1937. </table>
  1938. </div>
  1939. </div>
  1940. </div>
  1941. <div class="col-md-12 col-sm-12 col-xs-12">
  1942. <div class="x_panel">
  1943. <div class="x_title">
  1944. <h2>Fixed Header Example <small>Users</small></h2>
  1945. <ul class="nav navbar-right panel_toolbox">
  1946. <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
  1947. </li>
  1948. <li class="dropdown">
  1949. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  1950. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  1951. <a class="dropdown-item" href="#">Settings 1</a>
  1952. <a class="dropdown-item" href="#">Settings 2</a>
  1953. </div>
  1954. </li>
  1955. <li><a class="close-link"><i class="fa fa-close"></i></a>
  1956. </li>
  1957. </ul>
  1958. <div class="clearfix"></div>
  1959. </div>
  1960. <div class="x_content">
  1961. <p class="text-muted font-13 m-b-30">
  1962. This example shows FixedHeader being styling by the Bootstrap CSS framework.
  1963. </p>
  1964. <table id="datatable-fixed-header" class="table table-striped table-bordered" style="width:100%">
  1965. <thead>
  1966. <tr>
  1967. <th>Name</th>
  1968. <th>Position</th>
  1969. <th>Office</th>
  1970. <th>Age</th>
  1971. <th>Start date</th>
  1972. <th>Salary</th>
  1973. </tr>
  1974. </thead>
  1975. <tbody>
  1976. <tr>
  1977. <td>Tiger Nixon</td>
  1978. <td>System Architect</td>
  1979. <td>Edinburgh</td>
  1980. <td>61</td>
  1981. <td>2011/04/25</td>
  1982. <td>$320,800</td>
  1983. </tr>
  1984. <tr>
  1985. <td>Garrett Winters</td>
  1986. <td>Accountant</td>
  1987. <td>Tokyo</td>
  1988. <td>63</td>
  1989. <td>2011/07/25</td>
  1990. <td>$170,750</td>
  1991. </tr>
  1992. <tr>
  1993. <td>Ashton Cox</td>
  1994. <td>Junior Technical Author</td>
  1995. <td>San Francisco</td>
  1996. <td>66</td>
  1997. <td>2009/01/12</td>
  1998. <td>$86,000</td>
  1999. </tr>
  2000. <tr>
  2001. <td>Cedric Kelly</td>
  2002. <td>Senior Javascript Developer</td>
  2003. <td>Edinburgh</td>
  2004. <td>22</td>
  2005. <td>2012/03/29</td>
  2006. <td>$433,060</td>
  2007. </tr>
  2008. <tr>
  2009. <td>Airi Satou</td>
  2010. <td>Accountant</td>
  2011. <td>Tokyo</td>
  2012. <td>33</td>
  2013. <td>2008/11/28</td>
  2014. <td>$162,700</td>
  2015. </tr>
  2016. <tr>
  2017. <td>Brielle Williamson</td>
  2018. <td>Integration Specialist</td>
  2019. <td>New York</td>
  2020. <td>61</td>
  2021. <td>2012/12/02</td>
  2022. <td>$372,000</td>
  2023. </tr>
  2024. <tr>
  2025. <td>Herrod Chandler</td>
  2026. <td>Sales Assistant</td>
  2027. <td>San Francisco</td>
  2028. <td>59</td>
  2029. <td>2012/08/06</td>
  2030. <td>$137,500</td>
  2031. </tr>
  2032. <tr>
  2033. <td>Rhona Davidson</td>
  2034. <td>Integration Specialist</td>
  2035. <td>Tokyo</td>
  2036. <td>55</td>
  2037. <td>2010/10/14</td>
  2038. <td>$327,900</td>
  2039. </tr>
  2040. <tr>
  2041. <td>Colleen Hurst</td>
  2042. <td>Javascript Developer</td>
  2043. <td>San Francisco</td>
  2044. <td>39</td>
  2045. <td>2009/09/15</td>
  2046. <td>$205,500</td>
  2047. </tr>
  2048. <tr>
  2049. <td>Sonya Frost</td>
  2050. <td>Software Engineer</td>
  2051. <td>Edinburgh</td>
  2052. <td>23</td>
  2053. <td>2008/12/13</td>
  2054. <td>$103,600</td>
  2055. </tr>
  2056. <tr>
  2057. <td>Jena Gaines</td>
  2058. <td>Office Manager</td>
  2059. <td>London</td>
  2060. <td>30</td>
  2061. <td>2008/12/19</td>
  2062. <td>$90,560</td>
  2063. </tr>
  2064. <tr>
  2065. <td>Quinn Flynn</td>
  2066. <td>Support Lead</td>
  2067. <td>Edinburgh</td>
  2068. <td>22</td>
  2069. <td>2013/03/03</td>
  2070. <td>$342,000</td>
  2071. </tr>
  2072. <tr>
  2073. <td>Charde Marshall</td>
  2074. <td>Regional Director</td>
  2075. <td>San Francisco</td>
  2076. <td>36</td>
  2077. <td>2008/10/16</td>
  2078. <td>$470,600</td>
  2079. </tr>
  2080. <tr>
  2081. <td>Haley Kennedy</td>
  2082. <td>Senior Marketing Designer</td>
  2083. <td>London</td>
  2084. <td>43</td>
  2085. <td>2012/12/18</td>
  2086. <td>$313,500</td>
  2087. </tr>
  2088. <tr>
  2089. <td>Tatyana Fitzpatrick</td>
  2090. <td>Regional Director</td>
  2091. <td>London</td>
  2092. <td>19</td>
  2093. <td>2010/03/17</td>
  2094. <td>$385,750</td>
  2095. </tr>
  2096. <tr>
  2097. <td>Michael Silva</td>
  2098. <td>Marketing Designer</td>
  2099. <td>London</td>
  2100. <td>66</td>
  2101. <td>2012/11/27</td>
  2102. <td>$198,500</td>
  2103. </tr>
  2104. <tr>
  2105. <td>Paul Byrd</td>
  2106. <td>Chief Financial Officer (CFO)</td>
  2107. <td>New York</td>
  2108. <td>64</td>
  2109. <td>2010/06/09</td>
  2110. <td>$725,000</td>
  2111. </tr>
  2112. <tr>
  2113. <td>Gloria Little</td>
  2114. <td>Systems Administrator</td>
  2115. <td>New York</td>
  2116. <td>59</td>
  2117. <td>2009/04/10</td>
  2118. <td>$237,500</td>
  2119. </tr>
  2120. <tr>
  2121. <td>Bradley Greer</td>
  2122. <td>Software Engineer</td>
  2123. <td>London</td>
  2124. <td>41</td>
  2125. <td>2012/10/13</td>
  2126. <td>$132,000</td>
  2127. </tr>
  2128. <tr>
  2129. <td>Dai Rios</td>
  2130. <td>Personnel Lead</td>
  2131. <td>Edinburgh</td>
  2132. <td>35</td>
  2133. <td>2012/09/26</td>
  2134. <td>$217,500</td>
  2135. </tr>
  2136. <tr>
  2137. <td>Jenette Caldwell</td>
  2138. <td>Development Lead</td>
  2139. <td>New York</td>
  2140. <td>30</td>
  2141. <td>2011/09/03</td>
  2142. <td>$345,000</td>
  2143. </tr>
  2144. <tr>
  2145. <td>Yuri Berry</td>
  2146. <td>Chief Marketing Officer (CMO)</td>
  2147. <td>New York</td>
  2148. <td>40</td>
  2149. <td>2009/06/25</td>
  2150. <td>$675,000</td>
  2151. </tr>
  2152. <tr>
  2153. <td>Caesar Vance</td>
  2154. <td>Pre-Sales Support</td>
  2155. <td>New York</td>
  2156. <td>21</td>
  2157. <td>2011/12/12</td>
  2158. <td>$106,450</td>
  2159. </tr>
  2160. <tr>
  2161. <td>Doris Wilder</td>
  2162. <td>Sales Assistant</td>
  2163. <td>Sidney</td>
  2164. <td>23</td>
  2165. <td>2010/09/20</td>
  2166. <td>$85,600</td>
  2167. </tr>
  2168. <tr>
  2169. <td>Angelica Ramos</td>
  2170. <td>Chief Executive Officer (CEO)</td>
  2171. <td>London</td>
  2172. <td>47</td>
  2173. <td>2009/10/09</td>
  2174. <td>$1,200,000</td>
  2175. </tr>
  2176. <tr>
  2177. <td>Gavin Joyce</td>
  2178. <td>Developer</td>
  2179. <td>Edinburgh</td>
  2180. <td>42</td>
  2181. <td>2010/12/22</td>
  2182. <td>$92,575</td>
  2183. </tr>
  2184. <tr>
  2185. <td>Jennifer Chang</td>
  2186. <td>Regional Director</td>
  2187. <td>Singapore</td>
  2188. <td>28</td>
  2189. <td>2010/11/14</td>
  2190. <td>$357,650</td>
  2191. </tr>
  2192. <tr>
  2193. <td>Brenden Wagner</td>
  2194. <td>Software Engineer</td>
  2195. <td>San Francisco</td>
  2196. <td>28</td>
  2197. <td>2011/06/07</td>
  2198. <td>$206,850</td>
  2199. </tr>
  2200. <tr>
  2201. <td>Fiona Green</td>
  2202. <td>Chief Operating Officer (COO)</td>
  2203. <td>San Francisco</td>
  2204. <td>48</td>
  2205. <td>2010/03/11</td>
  2206. <td>$850,000</td>
  2207. </tr>
  2208. <tr>
  2209. <td>Shou Itou</td>
  2210. <td>Regional Marketing</td>
  2211. <td>Tokyo</td>
  2212. <td>20</td>
  2213. <td>2011/08/14</td>
  2214. <td>$163,000</td>
  2215. </tr>
  2216. <tr>
  2217. <td>Michelle House</td>
  2218. <td>Integration Specialist</td>
  2219. <td>Sidney</td>
  2220. <td>37</td>
  2221. <td>2011/06/02</td>
  2222. <td>$95,400</td>
  2223. </tr>
  2224. <tr>
  2225. <td>Suki Burks</td>
  2226. <td>Developer</td>
  2227. <td>London</td>
  2228. <td>53</td>
  2229. <td>2009/10/22</td>
  2230. <td>$114,500</td>
  2231. </tr>
  2232. <tr>
  2233. <td>Prescott Bartlett</td>
  2234. <td>Technical Author</td>
  2235. <td>London</td>
  2236. <td>27</td>
  2237. <td>2011/05/07</td>
  2238. <td>$145,000</td>
  2239. </tr>
  2240. <tr>
  2241. <td>Gavin Cortez</td>
  2242. <td>Team Leader</td>
  2243. <td>San Francisco</td>
  2244. <td>22</td>
  2245. <td>2008/10/26</td>
  2246. <td>$235,500</td>
  2247. </tr>
  2248. <tr>
  2249. <td>Martena Mccray</td>
  2250. <td>Post-Sales support</td>
  2251. <td>Edinburgh</td>
  2252. <td>46</td>
  2253. <td>2011/03/09</td>
  2254. <td>$324,050</td>
  2255. </tr>
  2256. <tr>
  2257. <td>Unity Butler</td>
  2258. <td>Marketing Designer</td>
  2259. <td>San Francisco</td>
  2260. <td>47</td>
  2261. <td>2009/12/09</td>
  2262. <td>$85,675</td>
  2263. </tr>
  2264. <tr>
  2265. <td>Howard Hatfield</td>
  2266. <td>Office Manager</td>
  2267. <td>San Francisco</td>
  2268. <td>51</td>
  2269. <td>2008/12/16</td>
  2270. <td>$164,500</td>
  2271. </tr>
  2272. <tr>
  2273. <td>Hope Fuentes</td>
  2274. <td>Secretary</td>
  2275. <td>San Francisco</td>
  2276. <td>41</td>
  2277. <td>2010/02/12</td>
  2278. <td>$109,850</td>
  2279. </tr>
  2280. <tr>
  2281. <td>Vivian Harrell</td>
  2282. <td>Financial Controller</td>
  2283. <td>San Francisco</td>
  2284. <td>62</td>
  2285. <td>2009/02/14</td>
  2286. <td>$452,500</td>
  2287. </tr>
  2288. <tr>
  2289. <td>Timothy Mooney</td>
  2290. <td>Office Manager</td>
  2291. <td>London</td>
  2292. <td>37</td>
  2293. <td>2008/12/11</td>
  2294. <td>$136,200</td>
  2295. </tr>
  2296. <tr>
  2297. <td>Jackson Bradshaw</td>
  2298. <td>Director</td>
  2299. <td>New York</td>
  2300. <td>65</td>
  2301. <td>2008/09/26</td>
  2302. <td>$645,750</td>
  2303. </tr>
  2304. <tr>
  2305. <td>Olivia Liang</td>
  2306. <td>Support Engineer</td>
  2307. <td>Singapore</td>
  2308. <td>64</td>
  2309. <td>2011/02/03</td>
  2310. <td>$234,500</td>
  2311. </tr>
  2312. <tr>
  2313. <td>Bruno Nash</td>
  2314. <td>Software Engineer</td>
  2315. <td>London</td>
  2316. <td>38</td>
  2317. <td>2011/05/03</td>
  2318. <td>$163,500</td>
  2319. </tr>
  2320. <tr>
  2321. <td>Sakura Yamamoto</td>
  2322. <td>Support Engineer</td>
  2323. <td>Tokyo</td>
  2324. <td>37</td>
  2325. <td>2009/08/19</td>
  2326. <td>$139,575</td>
  2327. </tr>
  2328. <tr>
  2329. <td>Thor Walton</td>
  2330. <td>Developer</td>
  2331. <td>New York</td>
  2332. <td>61</td>
  2333. <td>2013/08/11</td>
  2334. <td>$98,540</td>
  2335. </tr>
  2336. <tr>
  2337. <td>Finn Camacho</td>
  2338. <td>Support Engineer</td>
  2339. <td>San Francisco</td>
  2340. <td>47</td>
  2341. <td>2009/07/07</td>
  2342. <td>$87,500</td>
  2343. </tr>
  2344. <tr>
  2345. <td>Serge Baldwin</td>
  2346. <td>Data Coordinator</td>
  2347. <td>Singapore</td>
  2348. <td>64</td>
  2349. <td>2012/04/09</td>
  2350. <td>$138,575</td>
  2351. </tr>
  2352. <tr>
  2353. <td>Zenaida Frank</td>
  2354. <td>Software Engineer</td>
  2355. <td>New York</td>
  2356. <td>63</td>
  2357. <td>2010/01/04</td>
  2358. <td>$125,250</td>
  2359. </tr>
  2360. <tr>
  2361. <td>Zorita Serrano</td>
  2362. <td>Software Engineer</td>
  2363. <td>San Francisco</td>
  2364. <td>56</td>
  2365. <td>2012/06/01</td>
  2366. <td>$115,000</td>
  2367. </tr>
  2368. <tr>
  2369. <td>Jennifer Acosta</td>
  2370. <td>Junior Javascript Developer</td>
  2371. <td>Edinburgh</td>
  2372. <td>43</td>
  2373. <td>2013/02/01</td>
  2374. <td>$75,650</td>
  2375. </tr>
  2376. <tr>
  2377. <td>Cara Stevens</td>
  2378. <td>Sales Assistant</td>
  2379. <td>New York</td>
  2380. <td>46</td>
  2381. <td>2011/12/06</td>
  2382. <td>$145,600</td>
  2383. </tr>
  2384. <tr>
  2385. <td>Hermione Butler</td>
  2386. <td>Regional Director</td>
  2387. <td>London</td>
  2388. <td>47</td>
  2389. <td>2011/03/21</td>
  2390. <td>$356,250</td>
  2391. </tr>
  2392. <tr>
  2393. <td>Lael Greer</td>
  2394. <td>Systems Administrator</td>
  2395. <td>London</td>
  2396. <td>21</td>
  2397. <td>2009/02/27</td>
  2398. <td>$103,500</td>
  2399. </tr>
  2400. <tr>
  2401. <td>Jonas Alexander</td>
  2402. <td>Developer</td>
  2403. <td>San Francisco</td>
  2404. <td>30</td>
  2405. <td>2010/07/14</td>
  2406. <td>$86,500</td>
  2407. </tr>
  2408. <tr>
  2409. <td>Shad Decker</td>
  2410. <td>Regional Director</td>
  2411. <td>Edinburgh</td>
  2412. <td>51</td>
  2413. <td>2008/11/13</td>
  2414. <td>$183,000</td>
  2415. </tr>
  2416. <tr>
  2417. <td>Michael Bruce</td>
  2418. <td>Javascript Developer</td>
  2419. <td>Singapore</td>
  2420. <td>29</td>
  2421. <td>2011/06/27</td>
  2422. <td>$183,000</td>
  2423. </tr>
  2424. <tr>
  2425. <td>Donna Snider</td>
  2426. <td>Customer Support</td>
  2427. <td>New York</td>
  2428. <td>27</td>
  2429. <td>2011/01/25</td>
  2430. <td>$112,000</td>
  2431. </tr>
  2432. </tbody>
  2433. </table>
  2434. </div>
  2435. </div>
  2436. </div>
  2437. <div class="col-md-12 col-sm-12 col-xs-12">
  2438. <div class="x_panel">
  2439. <div class="x_title">
  2440. <h2>KeyTable example <small>Users</small></h2>
  2441. <ul class="nav navbar-right panel_toolbox">
  2442. <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
  2443. </li>
  2444. <li class="dropdown">
  2445. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  2446. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  2447. <a class="dropdown-item" href="#">Settings 1</a>
  2448. <a class="dropdown-item" href="#">Settings 2</a>
  2449. </div>
  2450. </li>
  2451. <li><a class="close-link"><i class="fa fa-close"></i></a>
  2452. </li>
  2453. </ul>
  2454. <div class="clearfix"></div>
  2455. </div>
  2456. <div class="x_content">
  2457. <div class="row">
  2458. <div class="col-sm-12">
  2459. <div class="card-box table-responsive">
  2460. <p class="text-muted font-13 m-b-30">
  2461. 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.
  2462. </p>
  2463. <table id="datatable-keytable" class="table table-striped table-bordered" style="width:100%">
  2464. <thead>
  2465. <tr>
  2466. <th>Name</th>
  2467. <th>Position</th>
  2468. <th>Office</th>
  2469. <th>Age</th>
  2470. <th>Start date</th>
  2471. <th>Salary</th>
  2472. </tr>
  2473. </thead>
  2474. <tbody>
  2475. <tr>
  2476. <td>Tiger Nixon</td>
  2477. <td>System Architect</td>
  2478. <td>Edinburgh</td>
  2479. <td>61</td>
  2480. <td>2011/04/25</td>
  2481. <td>$320,800</td>
  2482. </tr>
  2483. <tr>
  2484. <td>Garrett Winters</td>
  2485. <td>Accountant</td>
  2486. <td>Tokyo</td>
  2487. <td>63</td>
  2488. <td>2011/07/25</td>
  2489. <td>$170,750</td>
  2490. </tr>
  2491. <tr>
  2492. <td>Ashton Cox</td>
  2493. <td>Junior Technical Author</td>
  2494. <td>San Francisco</td>
  2495. <td>66</td>
  2496. <td>2009/01/12</td>
  2497. <td>$86,000</td>
  2498. </tr>
  2499. <tr>
  2500. <td>Cedric Kelly</td>
  2501. <td>Senior Javascript Developer</td>
  2502. <td>Edinburgh</td>
  2503. <td>22</td>
  2504. <td>2012/03/29</td>
  2505. <td>$433,060</td>
  2506. </tr>
  2507. <tr>
  2508. <td>Airi Satou</td>
  2509. <td>Accountant</td>
  2510. <td>Tokyo</td>
  2511. <td>33</td>
  2512. <td>2008/11/28</td>
  2513. <td>$162,700</td>
  2514. </tr>
  2515. <tr>
  2516. <td>Brielle Williamson</td>
  2517. <td>Integration Specialist</td>
  2518. <td>New York</td>
  2519. <td>61</td>
  2520. <td>2012/12/02</td>
  2521. <td>$372,000</td>
  2522. </tr>
  2523. <tr>
  2524. <td>Herrod Chandler</td>
  2525. <td>Sales Assistant</td>
  2526. <td>San Francisco</td>
  2527. <td>59</td>
  2528. <td>2012/08/06</td>
  2529. <td>$137,500</td>
  2530. </tr>
  2531. <tr>
  2532. <td>Rhona Davidson</td>
  2533. <td>Integration Specialist</td>
  2534. <td>Tokyo</td>
  2535. <td>55</td>
  2536. <td>2010/10/14</td>
  2537. <td>$327,900</td>
  2538. </tr>
  2539. <tr>
  2540. <td>Colleen Hurst</td>
  2541. <td>Javascript Developer</td>
  2542. <td>San Francisco</td>
  2543. <td>39</td>
  2544. <td>2009/09/15</td>
  2545. <td>$205,500</td>
  2546. </tr>
  2547. <tr>
  2548. <td>Sonya Frost</td>
  2549. <td>Software Engineer</td>
  2550. <td>Edinburgh</td>
  2551. <td>23</td>
  2552. <td>2008/12/13</td>
  2553. <td>$103,600</td>
  2554. </tr>
  2555. <tr>
  2556. <td>Jena Gaines</td>
  2557. <td>Office Manager</td>
  2558. <td>London</td>
  2559. <td>30</td>
  2560. <td>2008/12/19</td>
  2561. <td>$90,560</td>
  2562. </tr>
  2563. <tr>
  2564. <td>Quinn Flynn</td>
  2565. <td>Support Lead</td>
  2566. <td>Edinburgh</td>
  2567. <td>22</td>
  2568. <td>2013/03/03</td>
  2569. <td>$342,000</td>
  2570. </tr>
  2571. <tr>
  2572. <td>Charde Marshall</td>
  2573. <td>Regional Director</td>
  2574. <td>San Francisco</td>
  2575. <td>36</td>
  2576. <td>2008/10/16</td>
  2577. <td>$470,600</td>
  2578. </tr>
  2579. <tr>
  2580. <td>Haley Kennedy</td>
  2581. <td>Senior Marketing Designer</td>
  2582. <td>London</td>
  2583. <td>43</td>
  2584. <td>2012/12/18</td>
  2585. <td>$313,500</td>
  2586. </tr>
  2587. <tr>
  2588. <td>Tatyana Fitzpatrick</td>
  2589. <td>Regional Director</td>
  2590. <td>London</td>
  2591. <td>19</td>
  2592. <td>2010/03/17</td>
  2593. <td>$385,750</td>
  2594. </tr>
  2595. <tr>
  2596. <td>Michael Silva</td>
  2597. <td>Marketing Designer</td>
  2598. <td>London</td>
  2599. <td>66</td>
  2600. <td>2012/11/27</td>
  2601. <td>$198,500</td>
  2602. </tr>
  2603. <tr>
  2604. <td>Paul Byrd</td>
  2605. <td>Chief Financial Officer (CFO)</td>
  2606. <td>New York</td>
  2607. <td>64</td>
  2608. <td>2010/06/09</td>
  2609. <td>$725,000</td>
  2610. </tr>
  2611. <tr>
  2612. <td>Gloria Little</td>
  2613. <td>Systems Administrator</td>
  2614. <td>New York</td>
  2615. <td>59</td>
  2616. <td>2009/04/10</td>
  2617. <td>$237,500</td>
  2618. </tr>
  2619. <tr>
  2620. <td>Bradley Greer</td>
  2621. <td>Software Engineer</td>
  2622. <td>London</td>
  2623. <td>41</td>
  2624. <td>2012/10/13</td>
  2625. <td>$132,000</td>
  2626. </tr>
  2627. <tr>
  2628. <td>Dai Rios</td>
  2629. <td>Personnel Lead</td>
  2630. <td>Edinburgh</td>
  2631. <td>35</td>
  2632. <td>2012/09/26</td>
  2633. <td>$217,500</td>
  2634. </tr>
  2635. <tr>
  2636. <td>Jenette Caldwell</td>
  2637. <td>Development Lead</td>
  2638. <td>New York</td>
  2639. <td>30</td>
  2640. <td>2011/09/03</td>
  2641. <td>$345,000</td>
  2642. </tr>
  2643. <tr>
  2644. <td>Yuri Berry</td>
  2645. <td>Chief Marketing Officer (CMO)</td>
  2646. <td>New York</td>
  2647. <td>40</td>
  2648. <td>2009/06/25</td>
  2649. <td>$675,000</td>
  2650. </tr>
  2651. <tr>
  2652. <td>Caesar Vance</td>
  2653. <td>Pre-Sales Support</td>
  2654. <td>New York</td>
  2655. <td>21</td>
  2656. <td>2011/12/12</td>
  2657. <td>$106,450</td>
  2658. </tr>
  2659. <tr>
  2660. <td>Doris Wilder</td>
  2661. <td>Sales Assistant</td>
  2662. <td>Sidney</td>
  2663. <td>23</td>
  2664. <td>2010/09/20</td>
  2665. <td>$85,600</td>
  2666. </tr>
  2667. <tr>
  2668. <td>Angelica Ramos</td>
  2669. <td>Chief Executive Officer (CEO)</td>
  2670. <td>London</td>
  2671. <td>47</td>
  2672. <td>2009/10/09</td>
  2673. <td>$1,200,000</td>
  2674. </tr>
  2675. <tr>
  2676. <td>Gavin Joyce</td>
  2677. <td>Developer</td>
  2678. <td>Edinburgh</td>
  2679. <td>42</td>
  2680. <td>2010/12/22</td>
  2681. <td>$92,575</td>
  2682. </tr>
  2683. <tr>
  2684. <td>Jennifer Chang</td>
  2685. <td>Regional Director</td>
  2686. <td>Singapore</td>
  2687. <td>28</td>
  2688. <td>2010/11/14</td>
  2689. <td>$357,650</td>
  2690. </tr>
  2691. <tr>
  2692. <td>Brenden Wagner</td>
  2693. <td>Software Engineer</td>
  2694. <td>San Francisco</td>
  2695. <td>28</td>
  2696. <td>2011/06/07</td>
  2697. <td>$206,850</td>
  2698. </tr>
  2699. <tr>
  2700. <td>Fiona Green</td>
  2701. <td>Chief Operating Officer (COO)</td>
  2702. <td>San Francisco</td>
  2703. <td>48</td>
  2704. <td>2010/03/11</td>
  2705. <td>$850,000</td>
  2706. </tr>
  2707. <tr>
  2708. <td>Shou Itou</td>
  2709. <td>Regional Marketing</td>
  2710. <td>Tokyo</td>
  2711. <td>20</td>
  2712. <td>2011/08/14</td>
  2713. <td>$163,000</td>
  2714. </tr>
  2715. <tr>
  2716. <td>Michelle House</td>
  2717. <td>Integration Specialist</td>
  2718. <td>Sidney</td>
  2719. <td>37</td>
  2720. <td>2011/06/02</td>
  2721. <td>$95,400</td>
  2722. </tr>
  2723. <tr>
  2724. <td>Suki Burks</td>
  2725. <td>Developer</td>
  2726. <td>London</td>
  2727. <td>53</td>
  2728. <td>2009/10/22</td>
  2729. <td>$114,500</td>
  2730. </tr>
  2731. <tr>
  2732. <td>Prescott Bartlett</td>
  2733. <td>Technical Author</td>
  2734. <td>London</td>
  2735. <td>27</td>
  2736. <td>2011/05/07</td>
  2737. <td>$145,000</td>
  2738. </tr>
  2739. <tr>
  2740. <td>Gavin Cortez</td>
  2741. <td>Team Leader</td>
  2742. <td>San Francisco</td>
  2743. <td>22</td>
  2744. <td>2008/10/26</td>
  2745. <td>$235,500</td>
  2746. </tr>
  2747. <tr>
  2748. <td>Martena Mccray</td>
  2749. <td>Post-Sales support</td>
  2750. <td>Edinburgh</td>
  2751. <td>46</td>
  2752. <td>2011/03/09</td>
  2753. <td>$324,050</td>
  2754. </tr>
  2755. <tr>
  2756. <td>Unity Butler</td>
  2757. <td>Marketing Designer</td>
  2758. <td>San Francisco</td>
  2759. <td>47</td>
  2760. <td>2009/12/09</td>
  2761. <td>$85,675</td>
  2762. </tr>
  2763. <tr>
  2764. <td>Howard Hatfield</td>
  2765. <td>Office Manager</td>
  2766. <td>San Francisco</td>
  2767. <td>51</td>
  2768. <td>2008/12/16</td>
  2769. <td>$164,500</td>
  2770. </tr>
  2771. <tr>
  2772. <td>Hope Fuentes</td>
  2773. <td>Secretary</td>
  2774. <td>San Francisco</td>
  2775. <td>41</td>
  2776. <td>2010/02/12</td>
  2777. <td>$109,850</td>
  2778. </tr>
  2779. <tr>
  2780. <td>Vivian Harrell</td>
  2781. <td>Financial Controller</td>
  2782. <td>San Francisco</td>
  2783. <td>62</td>
  2784. <td>2009/02/14</td>
  2785. <td>$452,500</td>
  2786. </tr>
  2787. <tr>
  2788. <td>Timothy Mooney</td>
  2789. <td>Office Manager</td>
  2790. <td>London</td>
  2791. <td>37</td>
  2792. <td>2008/12/11</td>
  2793. <td>$136,200</td>
  2794. </tr>
  2795. <tr>
  2796. <td>Jackson Bradshaw</td>
  2797. <td>Director</td>
  2798. <td>New York</td>
  2799. <td>65</td>
  2800. <td>2008/09/26</td>
  2801. <td>$645,750</td>
  2802. </tr>
  2803. <tr>
  2804. <td>Olivia Liang</td>
  2805. <td>Support Engineer</td>
  2806. <td>Singapore</td>
  2807. <td>64</td>
  2808. <td>2011/02/03</td>
  2809. <td>$234,500</td>
  2810. </tr>
  2811. <tr>
  2812. <td>Bruno Nash</td>
  2813. <td>Software Engineer</td>
  2814. <td>London</td>
  2815. <td>38</td>
  2816. <td>2011/05/03</td>
  2817. <td>$163,500</td>
  2818. </tr>
  2819. <tr>
  2820. <td>Sakura Yamamoto</td>
  2821. <td>Support Engineer</td>
  2822. <td>Tokyo</td>
  2823. <td>37</td>
  2824. <td>2009/08/19</td>
  2825. <td>$139,575</td>
  2826. </tr>
  2827. <tr>
  2828. <td>Thor Walton</td>
  2829. <td>Developer</td>
  2830. <td>New York</td>
  2831. <td>61</td>
  2832. <td>2013/08/11</td>
  2833. <td>$98,540</td>
  2834. </tr>
  2835. <tr>
  2836. <td>Finn Camacho</td>
  2837. <td>Support Engineer</td>
  2838. <td>San Francisco</td>
  2839. <td>47</td>
  2840. <td>2009/07/07</td>
  2841. <td>$87,500</td>
  2842. </tr>
  2843. <tr>
  2844. <td>Serge Baldwin</td>
  2845. <td>Data Coordinator</td>
  2846. <td>Singapore</td>
  2847. <td>64</td>
  2848. <td>2012/04/09</td>
  2849. <td>$138,575</td>
  2850. </tr>
  2851. <tr>
  2852. <td>Zenaida Frank</td>
  2853. <td>Software Engineer</td>
  2854. <td>New York</td>
  2855. <td>63</td>
  2856. <td>2010/01/04</td>
  2857. <td>$125,250</td>
  2858. </tr>
  2859. <tr>
  2860. <td>Zorita Serrano</td>
  2861. <td>Software Engineer</td>
  2862. <td>San Francisco</td>
  2863. <td>56</td>
  2864. <td>2012/06/01</td>
  2865. <td>$115,000</td>
  2866. </tr>
  2867. <tr>
  2868. <td>Jennifer Acosta</td>
  2869. <td>Junior Javascript Developer</td>
  2870. <td>Edinburgh</td>
  2871. <td>43</td>
  2872. <td>2013/02/01</td>
  2873. <td>$75,650</td>
  2874. </tr>
  2875. <tr>
  2876. <td>Cara Stevens</td>
  2877. <td>Sales Assistant</td>
  2878. <td>New York</td>
  2879. <td>46</td>
  2880. <td>2011/12/06</td>
  2881. <td>$145,600</td>
  2882. </tr>
  2883. <tr>
  2884. <td>Hermione Butler</td>
  2885. <td>Regional Director</td>
  2886. <td>London</td>
  2887. <td>47</td>
  2888. <td>2011/03/21</td>
  2889. <td>$356,250</td>
  2890. </tr>
  2891. <tr>
  2892. <td>Lael Greer</td>
  2893. <td>Systems Administrator</td>
  2894. <td>London</td>
  2895. <td>21</td>
  2896. <td>2009/02/27</td>
  2897. <td>$103,500</td>
  2898. </tr>
  2899. <tr>
  2900. <td>Jonas Alexander</td>
  2901. <td>Developer</td>
  2902. <td>San Francisco</td>
  2903. <td>30</td>
  2904. <td>2010/07/14</td>
  2905. <td>$86,500</td>
  2906. </tr>
  2907. <tr>
  2908. <td>Shad Decker</td>
  2909. <td>Regional Director</td>
  2910. <td>Edinburgh</td>
  2911. <td>51</td>
  2912. <td>2008/11/13</td>
  2913. <td>$183,000</td>
  2914. </tr>
  2915. <tr>
  2916. <td>Michael Bruce</td>
  2917. <td>Javascript Developer</td>
  2918. <td>Singapore</td>
  2919. <td>29</td>
  2920. <td>2011/06/27</td>
  2921. <td>$183,000</td>
  2922. </tr>
  2923. <tr>
  2924. <td>Donna Snider</td>
  2925. <td>Customer Support</td>
  2926. <td>New York</td>
  2927. <td>27</td>
  2928. <td>2011/01/25</td>
  2929. <td>$112,000</td>
  2930. </tr>
  2931. </tbody>
  2932. </table>
  2933. </div>
  2934. </div>
  2935. </div>
  2936. </div>
  2937. </div>
  2938. </div>
  2939. <div class="col-md-12 col-sm-12 col-xs-12">
  2940. <div class="x_panel">
  2941. <div class="x_title">
  2942. <h2>Responsive example<small>Users</small></h2>
  2943. <ul class="nav navbar-right panel_toolbox">
  2944. <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
  2945. </li>
  2946. <li class="dropdown">
  2947. <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
  2948. <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  2949. <a class="dropdown-item" href="#">Settings 1</a>
  2950. <a class="dropdown-item" href="#">Settings 2</a>
  2951. </div>
  2952. </li>
  2953. <li><a class="close-link"><i class="fa fa-close"></i></a>
  2954. </li>
  2955. </ul>
  2956. <div class="clearfix"></div>
  2957. </div>
  2958. <div class="x_content">
  2959. <p class="text-muted font-13 m-b-30">
  2960. Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.
  2961. </p>
  2962. <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
  2963. <thead>
  2964. <tr>
  2965. <th>First name</th>
  2966. <th>Last name</th>
  2967. <th>Position</th>
  2968. <th>Office</th>
  2969. <th>Age</th>
  2970. <th>Start date</th>
  2971. <th>Salary</th>
  2972. <th>Extn.</th>
  2973. <th>E-mail</th>
  2974. </tr>
  2975. </thead>
  2976. <tbody>
  2977. <tr>
  2978. <td>Tiger</td>
  2979. <td>Nixon</td>
  2980. <td>System Architect</td>
  2981. <td>Edinburgh</td>
  2982. <td>61</td>
  2983. <td>2011/04/25</td>
  2984. <td>$320,800</td>
  2985. <td>5421</td>
  2986. <td>t.nixon@datatables.net</td>
  2987. </tr>
  2988. <tr>
  2989. <td>Garrett</td>
  2990. <td>Winters</td>
  2991. <td>Accountant</td>
  2992. <td>Tokyo</td>
  2993. <td>63</td>
  2994. <td>2011/07/25</td>
  2995. <td>$170,750</td>
  2996. <td>8422</td>
  2997. <td>g.winters@datatables.net</td>
  2998. </tr>
  2999. <tr>
  3000. <td>Ashton</td>
  3001. <td>Cox</td>
  3002. <td>Junior Technical Author</td>
  3003. <td>San Francisco</td>
  3004. <td>66</td>
  3005. <td>2009/01/12</td>
  3006. <td>$86,000</td>
  3007. <td>1562</td>
  3008. <td>a.cox@datatables.net</td>
  3009. </tr>
  3010. <tr>
  3011. <td>Cedric</td>
  3012. <td>Kelly</td>
  3013. <td>Senior Javascript Developer</td>
  3014. <td>Edinburgh</td>
  3015. <td>22</td>
  3016. <td>2012/03/29</td>
  3017. <td>$433,060</td>
  3018. <td>6224</td>
  3019. <td>c.kelly@datatables.net</td>
  3020. </tr>
  3021. <tr>
  3022. <td>Airi</td>
  3023. <td>Satou</td>
  3024. <td>Accountant</td>
  3025. <td>Tokyo</td>
  3026. <td>33</td>
  3027. <td>2008/11/28</td>
  3028. <td>$162,700</td>
  3029. <td>5407</td>
  3030. <td>a.satou@datatables.net</td>
  3031. </tr>
  3032. <tr>
  3033. <td>Brielle</td>
  3034. <td>Williamson</td>
  3035. <td>Integration Specialist</td>
  3036. <td>New York</td>
  3037. <td>61</td>
  3038. <td>2012/12/02</td>
  3039. <td>$372,000</td>
  3040. <td>4804</td>
  3041. <td>b.williamson@datatables.net</td>
  3042. </tr>
  3043. <tr>
  3044. <td>Herrod</td>
  3045. <td>Chandler</td>
  3046. <td>Sales Assistant</td>
  3047. <td>San Francisco</td>
  3048. <td>59</td>
  3049. <td>2012/08/06</td>
  3050. <td>$137,500</td>
  3051. <td>9608</td>
  3052. <td>h.chandler@datatables.net</td>
  3053. </tr>
  3054. <tr>
  3055. <td>Rhona</td>
  3056. <td>Davidson</td>
  3057. <td>Integration Specialist</td>
  3058. <td>Tokyo</td>
  3059. <td>55</td>
  3060. <td>2010/10/14</td>
  3061. <td>$327,900</td>
  3062. <td>6200</td>
  3063. <td>r.davidson@datatables.net</td>
  3064. </tr>
  3065. <tr>
  3066. <td>Colleen</td>
  3067. <td>Hurst</td>
  3068. <td>Javascript Developer</td>
  3069. <td>San Francisco</td>
  3070. <td>39</td>
  3071. <td>2009/09/15</td>
  3072. <td>$205,500</td>
  3073. <td>2360</td>
  3074. <td>c.hurst@datatables.net</td>
  3075. </tr>
  3076. <tr>
  3077. <td>Sonya</td>
  3078. <td>Frost</td>
  3079. <td>Software Engineer</td>
  3080. <td>Edinburgh</td>
  3081. <td>23</td>
  3082. <td>2008/12/13</td>
  3083. <td>$103,600</td>
  3084. <td>1667</td>
  3085. <td>s.frost@datatables.net</td>
  3086. </tr>
  3087. <tr>
  3088. <td>Jena</td>
  3089. <td>Gaines</td>
  3090. <td>Office Manager</td>
  3091. <td>London</td>
  3092. <td>30</td>
  3093. <td>2008/12/19</td>
  3094. <td>$90,560</td>
  3095. <td>3814</td>
  3096. <td>j.gaines@datatables.net</td>
  3097. </tr>
  3098. <tr>
  3099. <td>Quinn</td>
  3100. <td>Flynn</td>
  3101. <td>Support Lead</td>
  3102. <td>Edinburgh</td>
  3103. <td>22</td>
  3104. <td>2013/03/03</td>
  3105. <td>$342,000</td>
  3106. <td>9497</td>
  3107. <td>q.flynn@datatables.net</td>
  3108. </tr>
  3109. <tr>
  3110. <td>Charde</td>
  3111. <td>Marshall</td>
  3112. <td>Regional Director</td>
  3113. <td>San Francisco</td>
  3114. <td>36</td>
  3115. <td>2008/10/16</td>
  3116. <td>$470,600</td>
  3117. <td>6741</td>
  3118. <td>c.marshall@datatables.net</td>
  3119. </tr>
  3120. <tr>
  3121. <td>Haley</td>
  3122. <td>Kennedy</td>
  3123. <td>Senior Marketing Designer</td>
  3124. <td>London</td>
  3125. <td>43</td>
  3126. <td>2012/12/18</td>
  3127. <td>$313,500</td>
  3128. <td>3597</td>
  3129. <td>h.kennedy@datatables.net</td>
  3130. </tr>
  3131. <tr>
  3132. <td>Tatyana</td>
  3133. <td>Fitzpatrick</td>
  3134. <td>Regional Director</td>
  3135. <td>London</td>
  3136. <td>19</td>
  3137. <td>2010/03/17</td>
  3138. <td>$385,750</td>
  3139. <td>1965</td>
  3140. <td>t.fitzpatrick@datatables.net</td>
  3141. </tr>
  3142. <tr>
  3143. <td>Michael</td>
  3144. <td>Silva</td>
  3145. <td>Marketing Designer</td>
  3146. <td>London</td>
  3147. <td>66</td>
  3148. <td>2012/11/27</td>
  3149. <td>$198,500</td>
  3150. <td>1581</td>
  3151. <td>m.silva@datatables.net</td>
  3152. </tr>
  3153. <tr>
  3154. <td>Paul</td>
  3155. <td>Byrd</td>
  3156. <td>Chief Financial Officer (CFO)</td>
  3157. <td>New York</td>
  3158. <td>64</td>
  3159. <td>2010/06/09</td>
  3160. <td>$725,000</td>
  3161. <td>3059</td>
  3162. <td>p.byrd@datatables.net</td>
  3163. </tr>
  3164. <tr>
  3165. <td>Gloria</td>
  3166. <td>Little</td>
  3167. <td>Systems Administrator</td>
  3168. <td>New York</td>
  3169. <td>59</td>
  3170. <td>2009/04/10</td>
  3171. <td>$237,500</td>
  3172. <td>1721</td>
  3173. <td>g.little@datatables.net</td>
  3174. </tr>
  3175. <tr>
  3176. <td>Bradley</td>
  3177. <td>Greer</td>
  3178. <td>Software Engineer</td>
  3179. <td>London</td>
  3180. <td>41</td>
  3181. <td>2012/10/13</td>
  3182. <td>$132,000</td>
  3183. <td>2558</td>
  3184. <td>b.greer@datatables.net</td>
  3185. </tr>
  3186. <tr>
  3187. <td>Dai</td>
  3188. <td>Rios</td>
  3189. <td>Personnel Lead</td>
  3190. <td>Edinburgh</td>
  3191. <td>35</td>
  3192. <td>2012/09/26</td>
  3193. <td>$217,500</td>
  3194. <td>2290</td>
  3195. <td>d.rios@datatables.net</td>
  3196. </tr>
  3197. <tr>
  3198. <td>Jenette</td>
  3199. <td>Caldwell</td>
  3200. <td>Development Lead</td>
  3201. <td>New York</td>
  3202. <td>30</td>
  3203. <td>2011/09/03</td>
  3204. <td>$345,000</td>
  3205. <td>1937</td>
  3206. <td>j.caldwell@datatables.net</td>
  3207. </tr>
  3208. <tr>
  3209. <td>Yuri</td>
  3210. <td>Berry</td>
  3211. <td>Chief Marketing Officer (CMO)</td>
  3212. <td>New York</td>
  3213. <td>40</td>
  3214. <td>2009/06/25</td>
  3215. <td>$675,000</td>
  3216. <td>6154</td>
  3217. <td>y.berry@datatables.net</td>
  3218. </tr>
  3219. <tr>
  3220. <td>Caesar</td>
  3221. <td>Vance</td>
  3222. <td>Pre-Sales Support</td>
  3223. <td>New York</td>
  3224. <td>21</td>
  3225. <td>2011/12/12</td>
  3226. <td>$106,450</td>
  3227. <td>8330</td>
  3228. <td>c.vance@datatables.net</td>
  3229. </tr>
  3230. <tr>
  3231. <td>Doris</td>
  3232. <td>Wilder</td>
  3233. <td>Sales Assistant</td>
  3234. <td>Sidney</td>
  3235. <td>23</td>
  3236. <td>2010/09/20</td>
  3237. <td>$85,600</td>
  3238. <td>3023</td>
  3239. <td>d.wilder@datatables.net</td>
  3240. </tr>
  3241. <tr>
  3242. <td>Angelica</td>
  3243. <td>Ramos</td>
  3244. <td>Chief Executive Officer (CEO)</td>
  3245. <td>London</td>
  3246. <td>47</td>
  3247. <td>2009/10/09</td>
  3248. <td>$1,200,000</td>
  3249. <td>5797</td>
  3250. <td>a.ramos@datatables.net</td>
  3251. </tr>
  3252. <tr>
  3253. <td>Gavin</td>
  3254. <td>Joyce</td>
  3255. <td>Developer</td>
  3256. <td>Edinburgh</td>
  3257. <td>42</td>
  3258. <td>2010/12/22</td>
  3259. <td>$92,575</td>
  3260. <td>8822</td>
  3261. <td>g.joyce@datatables.net</td>
  3262. </tr>
  3263. <tr>
  3264. <td>Jennifer</td>
  3265. <td>Chang</td>
  3266. <td>Regional Director</td>
  3267. <td>Singapore</td>
  3268. <td>28</td>
  3269. <td>2010/11/14</td>
  3270. <td>$357,650</td>
  3271. <td>9239</td>
  3272. <td>j.chang@datatables.net</td>
  3273. </tr>
  3274. <tr>
  3275. <td>Brenden</td>
  3276. <td>Wagner</td>
  3277. <td>Software Engineer</td>
  3278. <td>San Francisco</td>
  3279. <td>28</td>
  3280. <td>2011/06/07</td>
  3281. <td>$206,850</td>
  3282. <td>1314</td>
  3283. <td>b.wagner@datatables.net</td>
  3284. </tr>
  3285. <tr>
  3286. <td>Fiona</td>
  3287. <td>Green</td>
  3288. <td>Chief Operating Officer (COO)</td>
  3289. <td>San Francisco</td>
  3290. <td>48</td>
  3291. <td>2010/03/11</td>
  3292. <td>$850,000</td>
  3293. <td>2947</td>
  3294. <td>f.green@datatables.net</td>
  3295. </tr>
  3296. <tr>
  3297. <td>Shou</td>
  3298. <td>Itou</td>
  3299. <td>Regional Marketing</td>
  3300. <td>Tokyo</td>
  3301. <td>20</td>
  3302. <td>2011/08/14</td>
  3303. <td>$163,000</td>
  3304. <td>8899</td>
  3305. <td>s.itou@datatables.net</td>
  3306. </tr>
  3307. <tr>
  3308. <td>Michelle</td>
  3309. <td>House</td>
  3310. <td>Integration Specialist</td>
  3311. <td>Sidney</td>
  3312. <td>37</td>
  3313. <td>2011/06/02</td>
  3314. <td>$95,400</td>
  3315. <td>2769</td>
  3316. <td>m.house@datatables.net</td>
  3317. </tr>
  3318. <tr>
  3319. <td>Suki</td>
  3320. <td>Burks</td>
  3321. <td>Developer</td>
  3322. <td>London</td>
  3323. <td>53</td>
  3324. <td>2009/10/22</td>
  3325. <td>$114,500</td>
  3326. <td>6832</td>
  3327. <td>s.burks@datatables.net</td>
  3328. </tr>
  3329. <tr>
  3330. <td>Prescott</td>
  3331. <td>Bartlett</td>
  3332. <td>Technical Author</td>
  3333. <td>London</td>
  3334. <td>27</td>
  3335. <td>2011/05/07</td>
  3336. <td>$145,000</td>
  3337. <td>3606</td>
  3338. <td>p.bartlett@datatables.net</td>
  3339. </tr>
  3340. <tr>
  3341. <td>Gavin</td>
  3342. <td>Cortez</td>
  3343. <td>Team Leader</td>
  3344. <td>San Francisco</td>
  3345. <td>22</td>
  3346. <td>2008/10/26</td>
  3347. <td>$235,500</td>
  3348. <td>2860</td>
  3349. <td>g.cortez@datatables.net</td>
  3350. </tr>
  3351. <tr>
  3352. <td>Martena</td>
  3353. <td>Mccray</td>
  3354. <td>Post-Sales support</td>
  3355. <td>Edinburgh</td>
  3356. <td>46</td>
  3357. <td>2011/03/09</td>
  3358. <td>$324,050</td>
  3359. <td>8240</td>
  3360. <td>m.mccray@datatables.net</td>
  3361. </tr>
  3362. <tr>
  3363. <td>Unity</td>
  3364. <td>Butler</td>
  3365. <td>Marketing Designer</td>
  3366. <td>San Francisco</td>
  3367. <td>47</td>
  3368. <td>2009/12/09</td>
  3369. <td>$85,675</td>
  3370. <td>5384</td>
  3371. <td>u.butler@datatables.net</td>
  3372. </tr>
  3373. <tr>
  3374. <td>Howard</td>
  3375. <td>Hatfield</td>
  3376. <td>Office Manager</td>
  3377. <td>San Francisco</td>
  3378. <td>51</td>
  3379. <td>2008/12/16</td>
  3380. <td>$164,500</td>
  3381. <td>7031</td>
  3382. <td>h.hatfield@datatables.net</td>
  3383. </tr>
  3384. <tr>
  3385. <td>Hope</td>
  3386. <td>Fuentes</td>
  3387. <td>Secretary</td>
  3388. <td>San Francisco</td>
  3389. <td>41</td>
  3390. <td>2010/02/12</td>
  3391. <td>$109,850</td>
  3392. <td>6318</td>
  3393. <td>h.fuentes@datatables.net</td>
  3394. </tr>
  3395. <tr>
  3396. <td>Vivian</td>
  3397. <td>Harrell</td>
  3398. <td>Financial Controller</td>
  3399. <td>San Francisco</td>
  3400. <td>62</td>
  3401. <td>2009/02/14</td>
  3402. <td>$452,500</td>
  3403. <td>9422</td>
  3404. <td>v.harrell@datatables.net</td>
  3405. </tr>
  3406. <tr>
  3407. <td>Timothy</td>
  3408. <td>Mooney</td>
  3409. <td>Office Manager</td>
  3410. <td>London</td>
  3411. <td>37</td>
  3412. <td>2008/12/11</td>
  3413. <td>$136,200</td>
  3414. <td>7580</td>
  3415. <td>t.mooney@datatables.net</td>
  3416. </tr>
  3417. <tr>
  3418. <td>Jackson</td>
  3419. <td>Bradshaw</td>
  3420. <td>Director</td>
  3421. <td>New York</td>
  3422. <td>65</td>
  3423. <td>2008/09/26</td>
  3424. <td>$645,750</td>
  3425. <td>1042</td>
  3426. <td>j.bradshaw@datatables.net</td>
  3427. </tr>
  3428. <tr>
  3429. <td>Olivia</td>
  3430. <td>Liang</td>
  3431. <td>Support Engineer</td>
  3432. <td>Singapore</td>
  3433. <td>64</td>
  3434. <td>2011/02/03</td>
  3435. <td>$234,500</td>
  3436. <td>2120</td>
  3437. <td>o.liang@datatables.net</td>
  3438. </tr>
  3439. <tr>
  3440. <td>Bruno</td>
  3441. <td>Nash</td>
  3442. <td>Software Engineer</td>
  3443. <td>London</td>
  3444. <td>38</td>
  3445. <td>2011/05/03</td>
  3446. <td>$163,500</td>
  3447. <td>6222</td>
  3448. <td>b.nash@datatables.net</td>
  3449. </tr>
  3450. <tr>
  3451. <td>Sakura</td>
  3452. <td>Yamamoto</td>
  3453. <td>Support Engineer</td>
  3454. <td>Tokyo</td>
  3455. <td>37</td>
  3456. <td>2009/08/19</td>
  3457. <td>$139,575</td>
  3458. <td>9383</td>
  3459. <td>s.yamamoto@datatables.net</td>
  3460. </tr>
  3461. <tr>
  3462. <td>Thor</td>
  3463. <td>Walton</td>
  3464. <td>Developer</td>
  3465. <td>New York</td>
  3466. <td>61</td>
  3467. <td>2013/08/11</td>
  3468. <td>$98,540</td>
  3469. <td>8327</td>
  3470. <td>t.walton@datatables.net</td>
  3471. </tr>
  3472. <tr>
  3473. <td>Finn</td>
  3474. <td>Camacho</td>
  3475. <td>Support Engineer</td>
  3476. <td>San Francisco</td>
  3477. <td>47</td>
  3478. <td>2009/07/07</td>
  3479. <td>$87,500</td>
  3480. <td>2927</td>
  3481. <td>f.camacho@datatables.net</td>
  3482. </tr>
  3483. <tr>
  3484. <td>Serge</td>
  3485. <td>Baldwin</td>
  3486. <td>Data Coordinator</td>
  3487. <td>Singapore</td>
  3488. <td>64</td>
  3489. <td>2012/04/09</td>
  3490. <td>$138,575</td>
  3491. <td>8352</td>
  3492. <td>s.baldwin@datatables.net</td>
  3493. </tr>
  3494. <tr>
  3495. <td>Zenaida</td>
  3496. <td>Frank</td>
  3497. <td>Software Engineer</td>
  3498. <td>New York</td>
  3499. <td>63</td>
  3500. <td>2010/01/04</td>
  3501. <td>$125,250</td>
  3502. <td>7439</td>
  3503. <td>z.frank@datatables.net</td>
  3504. </tr>
  3505. <tr>
  3506. <td>Zorita</td>
  3507. <td>Serrano</td>
  3508. <td>Software Engineer</td>
  3509. <td>San Francisco</td>
  3510. <td>56</td>
  3511. <td>2012/06/01</td>
  3512. <td>$115,000</td>
  3513. <td>4389</td>
  3514. <td>z.serrano@datatables.net</td>
  3515. </tr>
  3516. <tr>
  3517. <td>Jennifer</td>
  3518. <td>Acosta</td>
  3519. <td>Junior Javascript Developer</td>
  3520. <td>Edinburgh</td>
  3521. <td>43</td>
  3522. <td>2013/02/01</td>
  3523. <td>$75,650</td>
  3524. <td>3431</td>
  3525. <td>j.acosta@datatables.net</td>
  3526. </tr>
  3527. <tr>
  3528. <td>Cara</td>
  3529. <td>Stevens</td>
  3530. <td>Sales Assistant</td>
  3531. <td>New York</td>
  3532. <td>46</td>
  3533. <td>2011/12/06</td>
  3534. <td>$145,600</td>
  3535. <td>3990</td>
  3536. <td>c.stevens@datatables.net</td>
  3537. </tr>
  3538. <tr>
  3539. <td>Hermione</td>
  3540. <td>Butler</td>
  3541. <td>Regional Director</td>
  3542. <td>London</td>
  3543. <td>47</td>
  3544. <td>2011/03/21</td>
  3545. <td>$356,250</td>
  3546. <td>1016</td>
  3547. <td>h.butler@datatables.net</td>
  3548. </tr>
  3549. <tr>
  3550. <td>Lael</td>
  3551. <td>Greer</td>
  3552. <td>Systems Administrator</td>
  3553. <td>London</td>
  3554. <td>21</td>
  3555. <td>2009/02/27</td>
  3556. <td>$103,500</td>
  3557. <td>6733</td>
  3558. <td>l.greer@datatables.net</td>
  3559. </tr>
  3560. <tr>
  3561. <td>Jonas</td>
  3562. <td>Alexander</td>
  3563. <td>Developer</td>
  3564. <td>San Francisco</td>
  3565. <td>30</td>
  3566. <td>2010/07/14</td>
  3567. <td>$86,500</td>
  3568. <td>8196</td>
  3569. <td>j.alexander@datatables.net</td>
  3570. </tr>
  3571. <tr>
  3572. <td>Shad</td>
  3573. <td>Decker</td>
  3574. <td>Regional Director</td>
  3575. <td>Edinburgh</td>
  3576. <td>51</td>
  3577. <td>2008/11/13</td>
  3578. <td>$183,000</td>
  3579. <td>6373</td>
  3580. <td>s.decker@datatables.net</td>
  3581. </tr>
  3582. <tr>
  3583. <td>Michael</td>
  3584. <td>Bruce</td>
  3585. <td>Javascript Developer</td>
  3586. <td>Singapore</td>
  3587. <td>29</td>
  3588. <td>2011/06/27</td>
  3589. <td>$183,000</td>
  3590. <td>5384</td>
  3591. <td>m.bruce@datatables.net</td>
  3592. </tr>
  3593. <tr>
  3594. <td>Donna</td>
  3595. <td>Snider</td>
  3596. <td>Customer Support</td>
  3597. <td>New York</td>
  3598. <td>27</td>
  3599. <td>2011/01/25</td>
  3600. <td>$112,000</td>
  3601. <td>4226</td>
  3602. <td>d.snider@datatables.net</td>
  3603. </tr>
  3604. </tbody>
  3605. </table>
  3606. </div>
  3607. </div>
  3608. </div>
  3609. </div>
  3610. </div>
  3611. </div>
  3612. <!-- /page content -->
  3613. <!-- footer content -->
  3614. <footer>
  3615. <div class="pull-right">
  3616. Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
  3617. </div>
  3618. <div class="clearfix"></div>
  3619. </footer>
  3620. <!-- /footer content -->
  3621. </div>
  3622. </div>
  3623. <!-- jQuery -->
  3624. <script src="../vendors/jquery/dist/jquery.min.js"></script>
  3625. <!-- Bootstrap -->
  3626. <script src="../vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  3627. <!-- FastClick -->
  3628. <script src="../vendors/fastclick/lib/fastclick.js"></script>
  3629. <!-- NProgress -->
  3630. <script src="../vendors/nprogress/nprogress.js"></script>
  3631. <!-- iCheck -->
  3632. <script src="../vendors/iCheck/icheck.min.js"></script>
  3633. <!-- Datatables -->
  3634. <script src="../vendors/datatables.net/js/jquery.dataTables.min.js"></script>
  3635. <script src="../vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  3636. <script src="../vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
  3637. <script src="../vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
  3638. <script src="../vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
  3639. <script src="../vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
  3640. <script src="../vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
  3641. <script src="../vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
  3642. <script src="../vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
  3643. <script src="../vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
  3644. <script src="../vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
  3645. <script src="../vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
  3646. <script src="../vendors/jszip/dist/jszip.min.js"></script>
  3647. <script src="../vendors/pdfmake/build/pdfmake.min.js"></script>
  3648. <script src="../vendors/pdfmake/build/vfs_fonts.js"></script>
  3649. <!-- Custom Theme Scripts -->
  3650. <script src="../build/js/custom.min.js"></script>
  3651. </body>
  3652. </html>