form.html 52 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
  6. <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
  7. <title>DataTables example - Form inputs</title>
  8. <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
  9. <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
  10. <link rel="stylesheet" type="text/css" href="../resources/demo.css">
  11. <style type="text/css" class="init">
  12. </style>
  13. <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
  14. <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
  15. <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
  16. <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
  17. <script type="text/javascript" language="javascript" class="init">
  18. $(document).ready(function() {
  19. var table = $('#example').DataTable();
  20. $('button').click( function() {
  21. var data = table.$('input, select').serialize();
  22. alert(
  23. "The following data would have been submitted to the server: \n\n"+
  24. data.substr( 0, 120 )+'...'
  25. );
  26. return false;
  27. } );
  28. } );
  29. </script>
  30. </head>
  31. <body class="dt-example">
  32. <div class="container">
  33. <section>
  34. <h1>DataTables example <span>Form inputs</span></h1>
  35. <div class="info">
  36. <p>In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the
  37. document (i.e. those rows / cells which are not needed are not inserted into the document). This
  38. increases performance and compatibility, however, it means that submitting forms which span multiple
  39. pages requires a little bit of additional work to get the information that is not in the document any
  40. longer.</p>
  41. <p>The <a href="//datatables.net/reference/api/%24()"><code class="api" title=
  42. "DataTables API method">$()<span>DT</span></code></a> method can be used to get nodes from the document
  43. regardless of paging, ordering etc. This example shows <a href=
  44. "//datatables.net/reference/api/%24()"><code class="api" title=
  45. "DataTables API method">$()<span>DT</span></code></a> being used to get all <code class="tag" title=
  46. "HTML tag">input</code> elements from the table.</p>
  47. <p>In the example a simple <code>alert()</code> is used to show the information from the form, but an
  48. Ajax call to the server with the form data could easily be performed.</p>
  49. </div><button type="submit">Submit form</button>
  50. <table id="example" class="display" cellspacing="0" width="100%">
  51. <thead>
  52. <tr>
  53. <th>Name</th>
  54. <th>Age</th>
  55. <th>Position</th>
  56. <th>Office</th>
  57. </tr>
  58. </thead>
  59. <tfoot>
  60. <tr>
  61. <th>Name</th>
  62. <th>Age</th>
  63. <th>Position</th>
  64. <th>Office</th>
  65. </tr>
  66. </tfoot>
  67. <tbody>
  68. <tr>
  69. <td>Tiger Nixon</td>
  70. <td><input type="text" id="row-1-age" name="row-1-age" value="61"></td>
  71. <td><input type="text" id="row-1-position" name="row-1-position" value="System Architect"></td>
  72. <td><select size="1" id="row-1-office" name="row-1-office">
  73. <option value="Edinburgh" selected="selected">
  74. Edinburgh
  75. </option>
  76. <option value="London">
  77. London
  78. </option>
  79. <option value="New York">
  80. New York
  81. </option>
  82. <option value="San Francisco">
  83. San Francisco
  84. </option>
  85. <option value="Tokyo">
  86. Tokyo
  87. </option>
  88. </select></td>
  89. </tr>
  90. <tr>
  91. <td>Garrett Winters</td>
  92. <td><input type="text" id="row-2-age" name="row-2-age" value="63"></td>
  93. <td><input type="text" id="row-2-position" name="row-2-position" value="Accountant"></td>
  94. <td><select size="1" id="row-2-office" name="row-2-office">
  95. <option value="Edinburgh">
  96. Edinburgh
  97. </option>
  98. <option value="London">
  99. London
  100. </option>
  101. <option value="New York">
  102. New York
  103. </option>
  104. <option value="San Francisco">
  105. San Francisco
  106. </option>
  107. <option value="Tokyo" selected="selected">
  108. Tokyo
  109. </option>
  110. </select></td>
  111. </tr>
  112. <tr>
  113. <td>Ashton Cox</td>
  114. <td><input type="text" id="row-3-age" name="row-3-age" value="66"></td>
  115. <td><input type="text" id="row-3-position" name="row-3-position" value=
  116. "Junior Technical Author"></td>
  117. <td><select size="1" id="row-3-office" name="row-3-office">
  118. <option value="Edinburgh">
  119. Edinburgh
  120. </option>
  121. <option value="London">
  122. London
  123. </option>
  124. <option value="New York">
  125. New York
  126. </option>
  127. <option value="San Francisco" selected="selected">
  128. San Francisco
  129. </option>
  130. <option value="Tokyo">
  131. Tokyo
  132. </option>
  133. </select></td>
  134. </tr>
  135. <tr>
  136. <td>Cedric Kelly</td>
  137. <td><input type="text" id="row-4-age" name="row-4-age" value="22"></td>
  138. <td><input type="text" id="row-4-position" name="row-4-position" value=
  139. "Senior Javascript Developer"></td>
  140. <td><select size="1" id="row-4-office" name="row-4-office">
  141. <option value="Edinburgh" selected="selected">
  142. Edinburgh
  143. </option>
  144. <option value="London">
  145. London
  146. </option>
  147. <option value="New York">
  148. New York
  149. </option>
  150. <option value="San Francisco">
  151. San Francisco
  152. </option>
  153. <option value="Tokyo">
  154. Tokyo
  155. </option>
  156. </select></td>
  157. </tr>
  158. <tr>
  159. <td>Airi Satou</td>
  160. <td><input type="text" id="row-5-age" name="row-5-age" value="33"></td>
  161. <td><input type="text" id="row-5-position" name="row-5-position" value="Accountant"></td>
  162. <td><select size="1" id="row-5-office" name="row-5-office">
  163. <option value="Edinburgh">
  164. Edinburgh
  165. </option>
  166. <option value="London">
  167. London
  168. </option>
  169. <option value="New York">
  170. New York
  171. </option>
  172. <option value="San Francisco">
  173. San Francisco
  174. </option>
  175. <option value="Tokyo" selected="selected">
  176. Tokyo
  177. </option>
  178. </select></td>
  179. </tr>
  180. <tr>
  181. <td>Brielle Williamson</td>
  182. <td><input type="text" id="row-6-age" name="row-6-age" value="61"></td>
  183. <td><input type="text" id="row-6-position" name="row-6-position" value=
  184. "Integration Specialist"></td>
  185. <td><select size="1" id="row-6-office" name="row-6-office">
  186. <option value="Edinburgh">
  187. Edinburgh
  188. </option>
  189. <option value="London">
  190. London
  191. </option>
  192. <option value="New York" selected="selected">
  193. New York
  194. </option>
  195. <option value="San Francisco">
  196. San Francisco
  197. </option>
  198. <option value="Tokyo">
  199. Tokyo
  200. </option>
  201. </select></td>
  202. </tr>
  203. <tr>
  204. <td>Herrod Chandler</td>
  205. <td><input type="text" id="row-7-age" name="row-7-age" value="59"></td>
  206. <td><input type="text" id="row-7-position" name="row-7-position" value="Sales Assistant"></td>
  207. <td><select size="1" id="row-7-office" name="row-7-office">
  208. <option value="Edinburgh">
  209. Edinburgh
  210. </option>
  211. <option value="London">
  212. London
  213. </option>
  214. <option value="New York">
  215. New York
  216. </option>
  217. <option value="San Francisco" selected="selected">
  218. San Francisco
  219. </option>
  220. <option value="Tokyo">
  221. Tokyo
  222. </option>
  223. </select></td>
  224. </tr>
  225. <tr>
  226. <td>Rhona Davidson</td>
  227. <td><input type="text" id="row-8-age" name="row-8-age" value="55"></td>
  228. <td><input type="text" id="row-8-position" name="row-8-position" value=
  229. "Integration Specialist"></td>
  230. <td><select size="1" id="row-8-office" name="row-8-office">
  231. <option value="Edinburgh">
  232. Edinburgh
  233. </option>
  234. <option value="London">
  235. London
  236. </option>
  237. <option value="New York">
  238. New York
  239. </option>
  240. <option value="San Francisco">
  241. San Francisco
  242. </option>
  243. <option value="Tokyo" selected="selected">
  244. Tokyo
  245. </option>
  246. </select></td>
  247. </tr>
  248. <tr>
  249. <td>Colleen Hurst</td>
  250. <td><input type="text" id="row-9-age" name="row-9-age" value="39"></td>
  251. <td><input type="text" id="row-9-position" name="row-9-position" value=
  252. "Javascript Developer"></td>
  253. <td><select size="1" id="row-9-office" name="row-9-office">
  254. <option value="Edinburgh">
  255. Edinburgh
  256. </option>
  257. <option value="London">
  258. London
  259. </option>
  260. <option value="New York">
  261. New York
  262. </option>
  263. <option value="San Francisco" selected="selected">
  264. San Francisco
  265. </option>
  266. <option value="Tokyo">
  267. Tokyo
  268. </option>
  269. </select></td>
  270. </tr>
  271. <tr>
  272. <td>Sonya Frost</td>
  273. <td><input type="text" id="row-10-age" name="row-10-age" value="23"></td>
  274. <td><input type="text" id="row-10-position" name="row-10-position" value=
  275. "Software Engineer"></td>
  276. <td><select size="1" id="row-10-office" name="row-10-office">
  277. <option value="Edinburgh" selected="selected">
  278. Edinburgh
  279. </option>
  280. <option value="London">
  281. London
  282. </option>
  283. <option value="New York">
  284. New York
  285. </option>
  286. <option value="San Francisco">
  287. San Francisco
  288. </option>
  289. <option value="Tokyo">
  290. Tokyo
  291. </option>
  292. </select></td>
  293. </tr>
  294. <tr>
  295. <td>Jena Gaines</td>
  296. <td><input type="text" id="row-11-age" name="row-11-age" value="30"></td>
  297. <td><input type="text" id="row-11-position" name="row-11-position" value="Office Manager"></td>
  298. <td><select size="1" id="row-11-office" name="row-11-office">
  299. <option value="Edinburgh">
  300. Edinburgh
  301. </option>
  302. <option value="London" selected="selected">
  303. London
  304. </option>
  305. <option value="New York">
  306. New York
  307. </option>
  308. <option value="San Francisco">
  309. San Francisco
  310. </option>
  311. <option value="Tokyo">
  312. Tokyo
  313. </option>
  314. </select></td>
  315. </tr>
  316. <tr>
  317. <td>Quinn Flynn</td>
  318. <td><input type="text" id="row-12-age" name="row-12-age" value="22"></td>
  319. <td><input type="text" id="row-12-position" name="row-12-position" value="Support Lead"></td>
  320. <td><select size="1" id="row-12-office" name="row-12-office">
  321. <option value="Edinburgh" selected="selected">
  322. Edinburgh
  323. </option>
  324. <option value="London">
  325. London
  326. </option>
  327. <option value="New York">
  328. New York
  329. </option>
  330. <option value="San Francisco">
  331. San Francisco
  332. </option>
  333. <option value="Tokyo">
  334. Tokyo
  335. </option>
  336. </select></td>
  337. </tr>
  338. <tr>
  339. <td>Charde Marshall</td>
  340. <td><input type="text" id="row-13-age" name="row-13-age" value="36"></td>
  341. <td><input type="text" id="row-13-position" name="row-13-position" value=
  342. "Regional Director"></td>
  343. <td><select size="1" id="row-13-office" name="row-13-office">
  344. <option value="Edinburgh">
  345. Edinburgh
  346. </option>
  347. <option value="London">
  348. London
  349. </option>
  350. <option value="New York">
  351. New York
  352. </option>
  353. <option value="San Francisco" selected="selected">
  354. San Francisco
  355. </option>
  356. <option value="Tokyo">
  357. Tokyo
  358. </option>
  359. </select></td>
  360. </tr>
  361. <tr>
  362. <td>Haley Kennedy</td>
  363. <td><input type="text" id="row-14-age" name="row-14-age" value="43"></td>
  364. <td><input type="text" id="row-14-position" name="row-14-position" value=
  365. "Senior Marketing Designer"></td>
  366. <td><select size="1" id="row-14-office" name="row-14-office">
  367. <option value="Edinburgh">
  368. Edinburgh
  369. </option>
  370. <option value="London" selected="selected">
  371. London
  372. </option>
  373. <option value="New York">
  374. New York
  375. </option>
  376. <option value="San Francisco">
  377. San Francisco
  378. </option>
  379. <option value="Tokyo">
  380. Tokyo
  381. </option>
  382. </select></td>
  383. </tr>
  384. <tr>
  385. <td>Tatyana Fitzpatrick</td>
  386. <td><input type="text" id="row-15-age" name="row-15-age" value="19"></td>
  387. <td><input type="text" id="row-15-position" name="row-15-position" value=
  388. "Regional Director"></td>
  389. <td><select size="1" id="row-15-office" name="row-15-office">
  390. <option value="Edinburgh">
  391. Edinburgh
  392. </option>
  393. <option value="London" selected="selected">
  394. London
  395. </option>
  396. <option value="New York">
  397. New York
  398. </option>
  399. <option value="San Francisco">
  400. San Francisco
  401. </option>
  402. <option value="Tokyo">
  403. Tokyo
  404. </option>
  405. </select></td>
  406. </tr>
  407. <tr>
  408. <td>Michael Silva</td>
  409. <td><input type="text" id="row-16-age" name="row-16-age" value="66"></td>
  410. <td><input type="text" id="row-16-position" name="row-16-position" value=
  411. "Marketing Designer"></td>
  412. <td><select size="1" id="row-16-office" name="row-16-office">
  413. <option value="Edinburgh">
  414. Edinburgh
  415. </option>
  416. <option value="London" selected="selected">
  417. London
  418. </option>
  419. <option value="New York">
  420. New York
  421. </option>
  422. <option value="San Francisco">
  423. San Francisco
  424. </option>
  425. <option value="Tokyo">
  426. Tokyo
  427. </option>
  428. </select></td>
  429. </tr>
  430. <tr>
  431. <td>Paul Byrd</td>
  432. <td><input type="text" id="row-17-age" name="row-17-age" value="64"></td>
  433. <td><input type="text" id="row-17-position" name="row-17-position" value=
  434. "Chief Financial Officer (CFO)"></td>
  435. <td><select size="1" id="row-17-office" name="row-17-office">
  436. <option value="Edinburgh">
  437. Edinburgh
  438. </option>
  439. <option value="London">
  440. London
  441. </option>
  442. <option value="New York" selected="selected">
  443. New York
  444. </option>
  445. <option value="San Francisco">
  446. San Francisco
  447. </option>
  448. <option value="Tokyo">
  449. Tokyo
  450. </option>
  451. </select></td>
  452. </tr>
  453. <tr>
  454. <td>Gloria Little</td>
  455. <td><input type="text" id="row-18-age" name="row-18-age" value="59"></td>
  456. <td><input type="text" id="row-18-position" name="row-18-position" value=
  457. "Systems Administrator"></td>
  458. <td><select size="1" id="row-18-office" name="row-18-office">
  459. <option value="Edinburgh">
  460. Edinburgh
  461. </option>
  462. <option value="London">
  463. London
  464. </option>
  465. <option value="New York" selected="selected">
  466. New York
  467. </option>
  468. <option value="San Francisco">
  469. San Francisco
  470. </option>
  471. <option value="Tokyo">
  472. Tokyo
  473. </option>
  474. </select></td>
  475. </tr>
  476. <tr>
  477. <td>Bradley Greer</td>
  478. <td><input type="text" id="row-19-age" name="row-19-age" value="41"></td>
  479. <td><input type="text" id="row-19-position" name="row-19-position" value=
  480. "Software Engineer"></td>
  481. <td><select size="1" id="row-19-office" name="row-19-office">
  482. <option value="Edinburgh">
  483. Edinburgh
  484. </option>
  485. <option value="London" selected="selected">
  486. London
  487. </option>
  488. <option value="New York">
  489. New York
  490. </option>
  491. <option value="San Francisco">
  492. San Francisco
  493. </option>
  494. <option value="Tokyo">
  495. Tokyo
  496. </option>
  497. </select></td>
  498. </tr>
  499. <tr>
  500. <td>Dai Rios</td>
  501. <td><input type="text" id="row-20-age" name="row-20-age" value="35"></td>
  502. <td><input type="text" id="row-20-position" name="row-20-position" value="Personnel Lead"></td>
  503. <td><select size="1" id="row-20-office" name="row-20-office">
  504. <option value="Edinburgh" selected="selected">
  505. Edinburgh
  506. </option>
  507. <option value="London">
  508. London
  509. </option>
  510. <option value="New York">
  511. New York
  512. </option>
  513. <option value="San Francisco">
  514. San Francisco
  515. </option>
  516. <option value="Tokyo">
  517. Tokyo
  518. </option>
  519. </select></td>
  520. </tr>
  521. <tr>
  522. <td>Jenette Caldwell</td>
  523. <td><input type="text" id="row-21-age" name="row-21-age" value="30"></td>
  524. <td><input type="text" id="row-21-position" name="row-21-position" value=
  525. "Development Lead"></td>
  526. <td><select size="1" id="row-21-office" name="row-21-office">
  527. <option value="Edinburgh">
  528. Edinburgh
  529. </option>
  530. <option value="London">
  531. London
  532. </option>
  533. <option value="New York" selected="selected">
  534. New York
  535. </option>
  536. <option value="San Francisco">
  537. San Francisco
  538. </option>
  539. <option value="Tokyo">
  540. Tokyo
  541. </option>
  542. </select></td>
  543. </tr>
  544. <tr>
  545. <td>Yuri Berry</td>
  546. <td><input type="text" id="row-22-age" name="row-22-age" value="40"></td>
  547. <td><input type="text" id="row-22-position" name="row-22-position" value=
  548. "Chief Marketing Officer (CMO)"></td>
  549. <td><select size="1" id="row-22-office" name="row-22-office">
  550. <option value="Edinburgh">
  551. Edinburgh
  552. </option>
  553. <option value="London">
  554. London
  555. </option>
  556. <option value="New York" selected="selected">
  557. New York
  558. </option>
  559. <option value="San Francisco">
  560. San Francisco
  561. </option>
  562. <option value="Tokyo">
  563. Tokyo
  564. </option>
  565. </select></td>
  566. </tr>
  567. <tr>
  568. <td>Caesar Vance</td>
  569. <td><input type="text" id="row-23-age" name="row-23-age" value="21"></td>
  570. <td><input type="text" id="row-23-position" name="row-23-position" value=
  571. "Pre-Sales Support"></td>
  572. <td><select size="1" id="row-23-office" name="row-23-office">
  573. <option value="Edinburgh">
  574. Edinburgh
  575. </option>
  576. <option value="London">
  577. London
  578. </option>
  579. <option value="New York" selected="selected">
  580. New York
  581. </option>
  582. <option value="San Francisco">
  583. San Francisco
  584. </option>
  585. <option value="Tokyo">
  586. Tokyo
  587. </option>
  588. </select></td>
  589. </tr>
  590. <tr>
  591. <td>Doris Wilder</td>
  592. <td><input type="text" id="row-24-age" name="row-24-age" value="23"></td>
  593. <td><input type="text" id="row-24-position" name="row-24-position" value=
  594. "Sales Assistant"></td>
  595. <td><select size="1" id="row-24-office" name="row-24-office">
  596. <option value="Edinburgh">
  597. Edinburgh
  598. </option>
  599. <option value="London">
  600. London
  601. </option>
  602. <option value="New York">
  603. New York
  604. </option>
  605. <option value="San Francisco">
  606. San Francisco
  607. </option>
  608. <option value="Tokyo">
  609. Tokyo
  610. </option>
  611. </select></td>
  612. </tr>
  613. <tr>
  614. <td>Angelica Ramos</td>
  615. <td><input type="text" id="row-25-age" name="row-25-age" value="47"></td>
  616. <td><input type="text" id="row-25-position" name="row-25-position" value=
  617. "Chief Executive Officer (CEO)"></td>
  618. <td><select size="1" id="row-25-office" name="row-25-office">
  619. <option value="Edinburgh">
  620. Edinburgh
  621. </option>
  622. <option value="London" selected="selected">
  623. London
  624. </option>
  625. <option value="New York">
  626. New York
  627. </option>
  628. <option value="San Francisco">
  629. San Francisco
  630. </option>
  631. <option value="Tokyo">
  632. Tokyo
  633. </option>
  634. </select></td>
  635. </tr>
  636. <tr>
  637. <td>Gavin Joyce</td>
  638. <td><input type="text" id="row-26-age" name="row-26-age" value="42"></td>
  639. <td><input type="text" id="row-26-position" name="row-26-position" value="Developer"></td>
  640. <td><select size="1" id="row-26-office" name="row-26-office">
  641. <option value="Edinburgh" selected="selected">
  642. Edinburgh
  643. </option>
  644. <option value="London">
  645. London
  646. </option>
  647. <option value="New York">
  648. New York
  649. </option>
  650. <option value="San Francisco">
  651. San Francisco
  652. </option>
  653. <option value="Tokyo">
  654. Tokyo
  655. </option>
  656. </select></td>
  657. </tr>
  658. <tr>
  659. <td>Jennifer Chang</td>
  660. <td><input type="text" id="row-27-age" name="row-27-age" value="28"></td>
  661. <td><input type="text" id="row-27-position" name="row-27-position" value=
  662. "Regional Director"></td>
  663. <td><select size="1" id="row-27-office" name="row-27-office">
  664. <option value="Edinburgh">
  665. Edinburgh
  666. </option>
  667. <option value="London">
  668. London
  669. </option>
  670. <option value="New York">
  671. New York
  672. </option>
  673. <option value="San Francisco">
  674. San Francisco
  675. </option>
  676. <option value="Tokyo">
  677. Tokyo
  678. </option>
  679. </select></td>
  680. </tr>
  681. <tr>
  682. <td>Brenden Wagner</td>
  683. <td><input type="text" id="row-28-age" name="row-28-age" value="28"></td>
  684. <td><input type="text" id="row-28-position" name="row-28-position" value=
  685. "Software Engineer"></td>
  686. <td><select size="1" id="row-28-office" name="row-28-office">
  687. <option value="Edinburgh">
  688. Edinburgh
  689. </option>
  690. <option value="London">
  691. London
  692. </option>
  693. <option value="New York">
  694. New York
  695. </option>
  696. <option value="San Francisco" selected="selected">
  697. San Francisco
  698. </option>
  699. <option value="Tokyo">
  700. Tokyo
  701. </option>
  702. </select></td>
  703. </tr>
  704. <tr>
  705. <td>Fiona Green</td>
  706. <td><input type="text" id="row-29-age" name="row-29-age" value="48"></td>
  707. <td><input type="text" id="row-29-position" name="row-29-position" value=
  708. "Chief Operating Officer (COO)"></td>
  709. <td><select size="1" id="row-29-office" name="row-29-office">
  710. <option value="Edinburgh">
  711. Edinburgh
  712. </option>
  713. <option value="London">
  714. London
  715. </option>
  716. <option value="New York">
  717. New York
  718. </option>
  719. <option value="San Francisco" selected="selected">
  720. San Francisco
  721. </option>
  722. <option value="Tokyo">
  723. Tokyo
  724. </option>
  725. </select></td>
  726. </tr>
  727. <tr>
  728. <td>Shou Itou</td>
  729. <td><input type="text" id="row-30-age" name="row-30-age" value="20"></td>
  730. <td><input type="text" id="row-30-position" name="row-30-position" value=
  731. "Regional Marketing"></td>
  732. <td><select size="1" id="row-30-office" name="row-30-office">
  733. <option value="Edinburgh">
  734. Edinburgh
  735. </option>
  736. <option value="London">
  737. London
  738. </option>
  739. <option value="New York">
  740. New York
  741. </option>
  742. <option value="San Francisco">
  743. San Francisco
  744. </option>
  745. <option value="Tokyo" selected="selected">
  746. Tokyo
  747. </option>
  748. </select></td>
  749. </tr>
  750. <tr>
  751. <td>Michelle House</td>
  752. <td><input type="text" id="row-31-age" name="row-31-age" value="37"></td>
  753. <td><input type="text" id="row-31-position" name="row-31-position" value=
  754. "Integration Specialist"></td>
  755. <td><select size="1" id="row-31-office" name="row-31-office">
  756. <option value="Edinburgh">
  757. Edinburgh
  758. </option>
  759. <option value="London">
  760. London
  761. </option>
  762. <option value="New York">
  763. New York
  764. </option>
  765. <option value="San Francisco">
  766. San Francisco
  767. </option>
  768. <option value="Tokyo">
  769. Tokyo
  770. </option>
  771. </select></td>
  772. </tr>
  773. <tr>
  774. <td>Suki Burks</td>
  775. <td><input type="text" id="row-32-age" name="row-32-age" value="53"></td>
  776. <td><input type="text" id="row-32-position" name="row-32-position" value="Developer"></td>
  777. <td><select size="1" id="row-32-office" name="row-32-office">
  778. <option value="Edinburgh">
  779. Edinburgh
  780. </option>
  781. <option value="London" selected="selected">
  782. London
  783. </option>
  784. <option value="New York">
  785. New York
  786. </option>
  787. <option value="San Francisco">
  788. San Francisco
  789. </option>
  790. <option value="Tokyo">
  791. Tokyo
  792. </option>
  793. </select></td>
  794. </tr>
  795. <tr>
  796. <td>Prescott Bartlett</td>
  797. <td><input type="text" id="row-33-age" name="row-33-age" value="27"></td>
  798. <td><input type="text" id="row-33-position" name="row-33-position" value=
  799. "Technical Author"></td>
  800. <td><select size="1" id="row-33-office" name="row-33-office">
  801. <option value="Edinburgh">
  802. Edinburgh
  803. </option>
  804. <option value="London" selected="selected">
  805. London
  806. </option>
  807. <option value="New York">
  808. New York
  809. </option>
  810. <option value="San Francisco">
  811. San Francisco
  812. </option>
  813. <option value="Tokyo">
  814. Tokyo
  815. </option>
  816. </select></td>
  817. </tr>
  818. <tr>
  819. <td>Gavin Cortez</td>
  820. <td><input type="text" id="row-34-age" name="row-34-age" value="22"></td>
  821. <td><input type="text" id="row-34-position" name="row-34-position" value="Team Leader"></td>
  822. <td><select size="1" id="row-34-office" name="row-34-office">
  823. <option value="Edinburgh">
  824. Edinburgh
  825. </option>
  826. <option value="London">
  827. London
  828. </option>
  829. <option value="New York">
  830. New York
  831. </option>
  832. <option value="San Francisco" selected="selected">
  833. San Francisco
  834. </option>
  835. <option value="Tokyo">
  836. Tokyo
  837. </option>
  838. </select></td>
  839. </tr>
  840. <tr>
  841. <td>Martena Mccray</td>
  842. <td><input type="text" id="row-35-age" name="row-35-age" value="46"></td>
  843. <td><input type="text" id="row-35-position" name="row-35-position" value=
  844. "Post-Sales support"></td>
  845. <td><select size="1" id="row-35-office" name="row-35-office">
  846. <option value="Edinburgh" selected="selected">
  847. Edinburgh
  848. </option>
  849. <option value="London">
  850. London
  851. </option>
  852. <option value="New York">
  853. New York
  854. </option>
  855. <option value="San Francisco">
  856. San Francisco
  857. </option>
  858. <option value="Tokyo">
  859. Tokyo
  860. </option>
  861. </select></td>
  862. </tr>
  863. <tr>
  864. <td>Unity Butler</td>
  865. <td><input type="text" id="row-36-age" name="row-36-age" value="47"></td>
  866. <td><input type="text" id="row-36-position" name="row-36-position" value=
  867. "Marketing Designer"></td>
  868. <td><select size="1" id="row-36-office" name="row-36-office">
  869. <option value="Edinburgh">
  870. Edinburgh
  871. </option>
  872. <option value="London">
  873. London
  874. </option>
  875. <option value="New York">
  876. New York
  877. </option>
  878. <option value="San Francisco" selected="selected">
  879. San Francisco
  880. </option>
  881. <option value="Tokyo">
  882. Tokyo
  883. </option>
  884. </select></td>
  885. </tr>
  886. <tr>
  887. <td>Howard Hatfield</td>
  888. <td><input type="text" id="row-37-age" name="row-37-age" value="51"></td>
  889. <td><input type="text" id="row-37-position" name="row-37-position" value="Office Manager"></td>
  890. <td><select size="1" id="row-37-office" name="row-37-office">
  891. <option value="Edinburgh">
  892. Edinburgh
  893. </option>
  894. <option value="London">
  895. London
  896. </option>
  897. <option value="New York">
  898. New York
  899. </option>
  900. <option value="San Francisco" selected="selected">
  901. San Francisco
  902. </option>
  903. <option value="Tokyo">
  904. Tokyo
  905. </option>
  906. </select></td>
  907. </tr>
  908. <tr>
  909. <td>Hope Fuentes</td>
  910. <td><input type="text" id="row-38-age" name="row-38-age" value="41"></td>
  911. <td><input type="text" id="row-38-position" name="row-38-position" value="Secretary"></td>
  912. <td><select size="1" id="row-38-office" name="row-38-office">
  913. <option value="Edinburgh">
  914. Edinburgh
  915. </option>
  916. <option value="London">
  917. London
  918. </option>
  919. <option value="New York">
  920. New York
  921. </option>
  922. <option value="San Francisco" selected="selected">
  923. San Francisco
  924. </option>
  925. <option value="Tokyo">
  926. Tokyo
  927. </option>
  928. </select></td>
  929. </tr>
  930. <tr>
  931. <td>Vivian Harrell</td>
  932. <td><input type="text" id="row-39-age" name="row-39-age" value="62"></td>
  933. <td><input type="text" id="row-39-position" name="row-39-position" value=
  934. "Financial Controller"></td>
  935. <td><select size="1" id="row-39-office" name="row-39-office">
  936. <option value="Edinburgh">
  937. Edinburgh
  938. </option>
  939. <option value="London">
  940. London
  941. </option>
  942. <option value="New York">
  943. New York
  944. </option>
  945. <option value="San Francisco" selected="selected">
  946. San Francisco
  947. </option>
  948. <option value="Tokyo">
  949. Tokyo
  950. </option>
  951. </select></td>
  952. </tr>
  953. <tr>
  954. <td>Timothy Mooney</td>
  955. <td><input type="text" id="row-40-age" name="row-40-age" value="37"></td>
  956. <td><input type="text" id="row-40-position" name="row-40-position" value="Office Manager"></td>
  957. <td><select size="1" id="row-40-office" name="row-40-office">
  958. <option value="Edinburgh">
  959. Edinburgh
  960. </option>
  961. <option value="London" selected="selected">
  962. London
  963. </option>
  964. <option value="New York">
  965. New York
  966. </option>
  967. <option value="San Francisco">
  968. San Francisco
  969. </option>
  970. <option value="Tokyo">
  971. Tokyo
  972. </option>
  973. </select></td>
  974. </tr>
  975. <tr>
  976. <td>Jackson Bradshaw</td>
  977. <td><input type="text" id="row-41-age" name="row-41-age" value="65"></td>
  978. <td><input type="text" id="row-41-position" name="row-41-position" value="Director"></td>
  979. <td><select size="1" id="row-41-office" name="row-41-office">
  980. <option value="Edinburgh">
  981. Edinburgh
  982. </option>
  983. <option value="London">
  984. London
  985. </option>
  986. <option value="New York" selected="selected">
  987. New York
  988. </option>
  989. <option value="San Francisco">
  990. San Francisco
  991. </option>
  992. <option value="Tokyo">
  993. Tokyo
  994. </option>
  995. </select></td>
  996. </tr>
  997. <tr>
  998. <td>Olivia Liang</td>
  999. <td><input type="text" id="row-42-age" name="row-42-age" value="64"></td>
  1000. <td><input type="text" id="row-42-position" name="row-42-position" value=
  1001. "Support Engineer"></td>
  1002. <td><select size="1" id="row-42-office" name="row-42-office">
  1003. <option value="Edinburgh">
  1004. Edinburgh
  1005. </option>
  1006. <option value="London">
  1007. London
  1008. </option>
  1009. <option value="New York">
  1010. New York
  1011. </option>
  1012. <option value="San Francisco">
  1013. San Francisco
  1014. </option>
  1015. <option value="Tokyo">
  1016. Tokyo
  1017. </option>
  1018. </select></td>
  1019. </tr>
  1020. <tr>
  1021. <td>Bruno Nash</td>
  1022. <td><input type="text" id="row-43-age" name="row-43-age" value="38"></td>
  1023. <td><input type="text" id="row-43-position" name="row-43-position" value=
  1024. "Software Engineer"></td>
  1025. <td><select size="1" id="row-43-office" name="row-43-office">
  1026. <option value="Edinburgh">
  1027. Edinburgh
  1028. </option>
  1029. <option value="London" selected="selected">
  1030. London
  1031. </option>
  1032. <option value="New York">
  1033. New York
  1034. </option>
  1035. <option value="San Francisco">
  1036. San Francisco
  1037. </option>
  1038. <option value="Tokyo">
  1039. Tokyo
  1040. </option>
  1041. </select></td>
  1042. </tr>
  1043. <tr>
  1044. <td>Sakura Yamamoto</td>
  1045. <td><input type="text" id="row-44-age" name="row-44-age" value="37"></td>
  1046. <td><input type="text" id="row-44-position" name="row-44-position" value=
  1047. "Support Engineer"></td>
  1048. <td><select size="1" id="row-44-office" name="row-44-office">
  1049. <option value="Edinburgh">
  1050. Edinburgh
  1051. </option>
  1052. <option value="London">
  1053. London
  1054. </option>
  1055. <option value="New York">
  1056. New York
  1057. </option>
  1058. <option value="San Francisco">
  1059. San Francisco
  1060. </option>
  1061. <option value="Tokyo" selected="selected">
  1062. Tokyo
  1063. </option>
  1064. </select></td>
  1065. </tr>
  1066. <tr>
  1067. <td>Thor Walton</td>
  1068. <td><input type="text" id="row-45-age" name="row-45-age" value="61"></td>
  1069. <td><input type="text" id="row-45-position" name="row-45-position" value="Developer"></td>
  1070. <td><select size="1" id="row-45-office" name="row-45-office">
  1071. <option value="Edinburgh">
  1072. Edinburgh
  1073. </option>
  1074. <option value="London">
  1075. London
  1076. </option>
  1077. <option value="New York" selected="selected">
  1078. New York
  1079. </option>
  1080. <option value="San Francisco">
  1081. San Francisco
  1082. </option>
  1083. <option value="Tokyo">
  1084. Tokyo
  1085. </option>
  1086. </select></td>
  1087. </tr>
  1088. <tr>
  1089. <td>Finn Camacho</td>
  1090. <td><input type="text" id="row-46-age" name="row-46-age" value="47"></td>
  1091. <td><input type="text" id="row-46-position" name="row-46-position" value=
  1092. "Support Engineer"></td>
  1093. <td><select size="1" id="row-46-office" name="row-46-office">
  1094. <option value="Edinburgh">
  1095. Edinburgh
  1096. </option>
  1097. <option value="London">
  1098. London
  1099. </option>
  1100. <option value="New York">
  1101. New York
  1102. </option>
  1103. <option value="San Francisco" selected="selected">
  1104. San Francisco
  1105. </option>
  1106. <option value="Tokyo">
  1107. Tokyo
  1108. </option>
  1109. </select></td>
  1110. </tr>
  1111. <tr>
  1112. <td>Serge Baldwin</td>
  1113. <td><input type="text" id="row-47-age" name="row-47-age" value="64"></td>
  1114. <td><input type="text" id="row-47-position" name="row-47-position" value=
  1115. "Data Coordinator"></td>
  1116. <td><select size="1" id="row-47-office" name="row-47-office">
  1117. <option value="Edinburgh">
  1118. Edinburgh
  1119. </option>
  1120. <option value="London">
  1121. London
  1122. </option>
  1123. <option value="New York">
  1124. New York
  1125. </option>
  1126. <option value="San Francisco">
  1127. San Francisco
  1128. </option>
  1129. <option value="Tokyo">
  1130. Tokyo
  1131. </option>
  1132. </select></td>
  1133. </tr>
  1134. <tr>
  1135. <td>Zenaida Frank</td>
  1136. <td><input type="text" id="row-48-age" name="row-48-age" value="63"></td>
  1137. <td><input type="text" id="row-48-position" name="row-48-position" value=
  1138. "Software Engineer"></td>
  1139. <td><select size="1" id="row-48-office" name="row-48-office">
  1140. <option value="Edinburgh">
  1141. Edinburgh
  1142. </option>
  1143. <option value="London">
  1144. London
  1145. </option>
  1146. <option value="New York" selected="selected">
  1147. New York
  1148. </option>
  1149. <option value="San Francisco">
  1150. San Francisco
  1151. </option>
  1152. <option value="Tokyo">
  1153. Tokyo
  1154. </option>
  1155. </select></td>
  1156. </tr>
  1157. <tr>
  1158. <td>Zorita Serrano</td>
  1159. <td><input type="text" id="row-49-age" name="row-49-age" value="56"></td>
  1160. <td><input type="text" id="row-49-position" name="row-49-position" value=
  1161. "Software Engineer"></td>
  1162. <td><select size="1" id="row-49-office" name="row-49-office">
  1163. <option value="Edinburgh">
  1164. Edinburgh
  1165. </option>
  1166. <option value="London">
  1167. London
  1168. </option>
  1169. <option value="New York">
  1170. New York
  1171. </option>
  1172. <option value="San Francisco" selected="selected">
  1173. San Francisco
  1174. </option>
  1175. <option value="Tokyo">
  1176. Tokyo
  1177. </option>
  1178. </select></td>
  1179. </tr>
  1180. <tr>
  1181. <td>Jennifer Acosta</td>
  1182. <td><input type="text" id="row-50-age" name="row-50-age" value="43"></td>
  1183. <td><input type="text" id="row-50-position" name="row-50-position" value=
  1184. "Junior Javascript Developer"></td>
  1185. <td><select size="1" id="row-50-office" name="row-50-office">
  1186. <option value="Edinburgh" selected="selected">
  1187. Edinburgh
  1188. </option>
  1189. <option value="London">
  1190. London
  1191. </option>
  1192. <option value="New York">
  1193. New York
  1194. </option>
  1195. <option value="San Francisco">
  1196. San Francisco
  1197. </option>
  1198. <option value="Tokyo">
  1199. Tokyo
  1200. </option>
  1201. </select></td>
  1202. </tr>
  1203. <tr>
  1204. <td>Cara Stevens</td>
  1205. <td><input type="text" id="row-51-age" name="row-51-age" value="46"></td>
  1206. <td><input type="text" id="row-51-position" name="row-51-position" value=
  1207. "Sales Assistant"></td>
  1208. <td><select size="1" id="row-51-office" name="row-51-office">
  1209. <option value="Edinburgh">
  1210. Edinburgh
  1211. </option>
  1212. <option value="London">
  1213. London
  1214. </option>
  1215. <option value="New York" selected="selected">
  1216. New York
  1217. </option>
  1218. <option value="San Francisco">
  1219. San Francisco
  1220. </option>
  1221. <option value="Tokyo">
  1222. Tokyo
  1223. </option>
  1224. </select></td>
  1225. </tr>
  1226. <tr>
  1227. <td>Hermione Butler</td>
  1228. <td><input type="text" id="row-52-age" name="row-52-age" value="47"></td>
  1229. <td><input type="text" id="row-52-position" name="row-52-position" value=
  1230. "Regional Director"></td>
  1231. <td><select size="1" id="row-52-office" name="row-52-office">
  1232. <option value="Edinburgh">
  1233. Edinburgh
  1234. </option>
  1235. <option value="London" selected="selected">
  1236. London
  1237. </option>
  1238. <option value="New York">
  1239. New York
  1240. </option>
  1241. <option value="San Francisco">
  1242. San Francisco
  1243. </option>
  1244. <option value="Tokyo">
  1245. Tokyo
  1246. </option>
  1247. </select></td>
  1248. </tr>
  1249. <tr>
  1250. <td>Lael Greer</td>
  1251. <td><input type="text" id="row-53-age" name="row-53-age" value="21"></td>
  1252. <td><input type="text" id="row-53-position" name="row-53-position" value=
  1253. "Systems Administrator"></td>
  1254. <td><select size="1" id="row-53-office" name="row-53-office">
  1255. <option value="Edinburgh">
  1256. Edinburgh
  1257. </option>
  1258. <option value="London" selected="selected">
  1259. London
  1260. </option>
  1261. <option value="New York">
  1262. New York
  1263. </option>
  1264. <option value="San Francisco">
  1265. San Francisco
  1266. </option>
  1267. <option value="Tokyo">
  1268. Tokyo
  1269. </option>
  1270. </select></td>
  1271. </tr>
  1272. <tr>
  1273. <td>Jonas Alexander</td>
  1274. <td><input type="text" id="row-54-age" name="row-54-age" value="30"></td>
  1275. <td><input type="text" id="row-54-position" name="row-54-position" value="Developer"></td>
  1276. <td><select size="1" id="row-54-office" name="row-54-office">
  1277. <option value="Edinburgh">
  1278. Edinburgh
  1279. </option>
  1280. <option value="London">
  1281. London
  1282. </option>
  1283. <option value="New York">
  1284. New York
  1285. </option>
  1286. <option value="San Francisco" selected="selected">
  1287. San Francisco
  1288. </option>
  1289. <option value="Tokyo">
  1290. Tokyo
  1291. </option>
  1292. </select></td>
  1293. </tr>
  1294. <tr>
  1295. <td>Shad Decker</td>
  1296. <td><input type="text" id="row-55-age" name="row-55-age" value="51"></td>
  1297. <td><input type="text" id="row-55-position" name="row-55-position" value=
  1298. "Regional Director"></td>
  1299. <td><select size="1" id="row-55-office" name="row-55-office">
  1300. <option value="Edinburgh" selected="selected">
  1301. Edinburgh
  1302. </option>
  1303. <option value="London">
  1304. London
  1305. </option>
  1306. <option value="New York">
  1307. New York
  1308. </option>
  1309. <option value="San Francisco">
  1310. San Francisco
  1311. </option>
  1312. <option value="Tokyo">
  1313. Tokyo
  1314. </option>
  1315. </select></td>
  1316. </tr>
  1317. <tr>
  1318. <td>Michael Bruce</td>
  1319. <td><input type="text" id="row-56-age" name="row-56-age" value="29"></td>
  1320. <td><input type="text" id="row-56-position" name="row-56-position" value=
  1321. "Javascript Developer"></td>
  1322. <td><select size="1" id="row-56-office" name="row-56-office">
  1323. <option value="Edinburgh">
  1324. Edinburgh
  1325. </option>
  1326. <option value="London">
  1327. London
  1328. </option>
  1329. <option value="New York">
  1330. New York
  1331. </option>
  1332. <option value="San Francisco">
  1333. San Francisco
  1334. </option>
  1335. <option value="Tokyo">
  1336. Tokyo
  1337. </option>
  1338. </select></td>
  1339. </tr>
  1340. <tr>
  1341. <td>Donna Snider</td>
  1342. <td><input type="text" id="row-57-age" name="row-57-age" value="27"></td>
  1343. <td><input type="text" id="row-57-position" name="row-57-position" value=
  1344. "Customer Support"></td>
  1345. <td><select size="1" id="row-57-office" name="row-57-office">
  1346. <option value="Edinburgh">
  1347. Edinburgh
  1348. </option>
  1349. <option value="London">
  1350. London
  1351. </option>
  1352. <option value="New York" selected="selected">
  1353. New York
  1354. </option>
  1355. <option value="San Francisco">
  1356. San Francisco
  1357. </option>
  1358. <option value="Tokyo">
  1359. Tokyo
  1360. </option>
  1361. </select></td>
  1362. </tr>
  1363. </tbody>
  1364. </table>
  1365. <ul class="tabs">
  1366. <li class="active">Javascript</li>
  1367. <li>HTML</li>
  1368. <li>CSS</li>
  1369. <li>Ajax</li>
  1370. <li>Server-side script</li>
  1371. </ul>
  1372. <div class="tabs">
  1373. <div class="js">
  1374. <p>The Javascript shown below is used to initialise the table shown in this
  1375. example:</p><code class="multiline brush: js;">$(document).ready(function() {
  1376. var table = $('#example').DataTable();
  1377. $('button').click( function() {
  1378. var data = table.$('input, select').serialize();
  1379. alert(
  1380. &quot;The following data would have been submitted to the server: \n\n&quot;+
  1381. data.substr( 0, 120 )+'...'
  1382. );
  1383. return false;
  1384. } );
  1385. } );</code>
  1386. <p>In addition to the above code, the following Javascript library files are loaded for use in this
  1387. example:</p>
  1388. <ul>
  1389. <li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
  1390. <li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
  1391. </ul>
  1392. </div>
  1393. <div class="table">
  1394. <p>The HTML shown below is the raw HTML table element, before it has been enhanced by
  1395. DataTables:</p>
  1396. </div>
  1397. <div class="css">
  1398. <div>
  1399. <p>This example uses a little bit of additional CSS beyond what is loaded from the library
  1400. files (below), in order to correctly display the table. The additional CSS used is shown
  1401. below:</p><code class="multiline brush: js;"></code>
  1402. </div>
  1403. <p>The following CSS library files are loaded for use in this example to provide the styling of the
  1404. table:</p>
  1405. <ul>
  1406. <li><a href=
  1407. "../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
  1408. </ul>
  1409. </div>
  1410. <div class="ajax">
  1411. <p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
  1412. will update automatically as any additional data is loaded.</p>
  1413. </div>
  1414. <div class="php">
  1415. <p>The script used to perform the server-side processing for this table is shown below. Please note
  1416. that this is just an example script using PHP. Server-side processing scripts can be written in any
  1417. language, using <a href="//datatables.net/manual/server-side">the protocol described in the
  1418. DataTables documentation</a>.</p>
  1419. </div>
  1420. </div>
  1421. </section>
  1422. </div>
  1423. <section>
  1424. <div class="footer">
  1425. <div class="gradient"></div>
  1426. <div class="liner">
  1427. <h2>Other examples</h2>
  1428. <div class="toc">
  1429. <div class="toc-group">
  1430. <h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
  1431. <ul class="toc">
  1432. <li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
  1433. <li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
  1434. <li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
  1435. <li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
  1436. <li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
  1437. <li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
  1438. <li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
  1439. colspan)</a></li>
  1440. <li><a href="../basic_init/dom.html">DOM positioning</a></li>
  1441. <li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
  1442. <li><a href="../basic_init/state_save.html">State saving</a></li>
  1443. <li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
  1444. <li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
  1445. <li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
  1446. <li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
  1447. <li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
  1448. ThemeRoller</a></li>
  1449. <li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
  1450. <li><a href="../basic_init/language.html">Language options</a></li>
  1451. </ul>
  1452. </div>
  1453. <div class="toc-group">
  1454. <h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
  1455. <ul class="toc">
  1456. <li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
  1457. <li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
  1458. <li><a href="../advanced_init/column_render.html">Column rendering</a></li>
  1459. <li><a href="../advanced_init/length_menu.html">Page length options</a></li>
  1460. <li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
  1461. elements</a></li>
  1462. <li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
  1463. colspan)</a></li>
  1464. <li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
  1465. <li><a href="../advanced_init/language_file.html">Language file</a></li>
  1466. <li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
  1467. <li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
  1468. <li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
  1469. <li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
  1470. <li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
  1471. <li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
  1472. control</a></li>
  1473. </ul>
  1474. </div>
  1475. <div class="toc-group">
  1476. <h3><a href="../styling/index.html">Styling</a></h3>
  1477. <ul class="toc">
  1478. <li><a href="../styling/display.html">Base style</a></li>
  1479. <li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
  1480. <li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
  1481. <li><a href="../styling/compact.html">Base style - compact</a></li>
  1482. <li><a href="../styling/hover.html">Base style - hover</a></li>
  1483. <li><a href="../styling/order-column.html">Base style - order-column</a></li>
  1484. <li><a href="../styling/row-border.html">Base style - row borders</a></li>
  1485. <li><a href="../styling/stripe.html">Base style - stripe</a></li>
  1486. <li><a href="../styling/bootstrap.html">Bootstrap</a></li>
  1487. <li><a href="../styling/foundation.html">Foundation</a></li>
  1488. <li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
  1489. </ul>
  1490. </div>
  1491. <div class="toc-group">
  1492. <h3><a href="../data_sources/index.html">Data sources</a></h3>
  1493. <ul class="toc">
  1494. <li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
  1495. <li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
  1496. <li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
  1497. <li><a href="../data_sources/server_side.html">Server-side processing</a></li>
  1498. </ul>
  1499. </div>
  1500. <div class="toc-group">
  1501. <h3><a href="./index.html">API</a></h3>
  1502. <ul class="toc active">
  1503. <li><a href="./add_row.html">Add rows</a></li>
  1504. <li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
  1505. <li><a href="./multi_filter_select.html">Individual column searching (select
  1506. inputs)</a></li>
  1507. <li><a href="./highlight.html">Highlighting rows and columns</a></li>
  1508. <li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
  1509. <li><a href="./select_row.html">Row selection (multiple rows)</a></li>
  1510. <li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
  1511. <li class="active"><a href="./form.html">Form inputs</a></li>
  1512. <li><a href="./counter_columns.html">Index column</a></li>
  1513. <li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
  1514. <li><a href="./api_in_init.html">Using API in callbacks</a></li>
  1515. <li><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
  1516. <li><a href="./regex.html">Search API (regular expressions)</a></li>
  1517. </ul>
  1518. </div>
  1519. <div class="toc-group">
  1520. <h3><a href="../ajax/index.html">Ajax</a></h3>
  1521. <ul class="toc">
  1522. <li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
  1523. <li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
  1524. <li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
  1525. <li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
  1526. <li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
  1527. <li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
  1528. <li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
  1529. <li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
  1530. <li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
  1531. </ul>
  1532. </div>
  1533. <div class="toc-group">
  1534. <h3><a href="../server_side/index.html">Server-side</a></h3>
  1535. <ul class="toc">
  1536. <li><a href="../server_side/simple.html">Server-side processing</a></li>
  1537. <li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
  1538. <li><a href="../server_side/post.html">POST data</a></li>
  1539. <li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
  1540. <li><a href="../server_side/object_data.html">Object data source</a></li>
  1541. <li><a href="../server_side/row_details.html">Row details</a></li>
  1542. <li><a href="../server_side/select_rows.html">Row selection</a></li>
  1543. <li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
  1544. <li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
  1545. <li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
  1546. paging</a></li>
  1547. </ul>
  1548. </div>
  1549. <div class="toc-group">
  1550. <h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
  1551. <ul class="toc">
  1552. <li><a href="../plug-ins/api.html">API plug-in methods</a></li>
  1553. <li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
  1554. detection)</a></li>
  1555. <li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
  1556. detection)</a></li>
  1557. <li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
  1558. <li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
  1559. </ul>
  1560. </div>
  1561. </div>
  1562. <div class="epilogue">
  1563. <p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
  1564. information about its API properties and methods.<br>
  1565. Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
  1566. <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
  1567. DataTables.</p>
  1568. <p class="copyright">DataTables designed and created by <a href=
  1569. "http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
  1570. DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
  1571. </div>
  1572. </div>
  1573. </div>
  1574. </section>
  1575. </body>
  1576. </html>