WebSVN – lars-tiefland.faltradxxs.de – Blame – /trunk/public/JavaScript/DataTables-1.10.5/extensions/FixedColumns/examples/colvis.html

Revision	Autor	Zeilennr.	Zeile
2	lars	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
		8	`<title>FixedColumns example - ColVis integration</title>`
		9	`<link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">`
		10	`<link rel="stylesheet" type="text/css" href="../../ColVis/css/dataTables.colVis.css">`
		11	`<link rel="stylesheet" type="text/css" href="../css/dataTables.fixedColumns.css">`
		12	`<link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">`
		13	`<link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">`
		14	`<style type="text/css" class="init">`
		15
		16	`/* Ensure that the demo table scrolls */`
		17	`th, td { white-space: nowrap; }`
		18	`div.dataTables_wrapper {`
		19	`width: 800px;`
		20	`margin: 0 auto;`
		21	`}`
		22
		23	`div.ColVis {`
		24	`float: left;`
		25	`}`
		26
		27	`</style>`
		28	`<script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>`
		29	`<script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>`
		30	`<script type="text/javascript" language="javascript" src="../../ColVis/js/dataTables.colVis.js"></script>`
		31	`<script type="text/javascript" language="javascript" src="../js/dataTables.fixedColumns.js"></script>`
		32	`<script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>`
		33	`<script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>`
		34	`<script type="text/javascript" language="javascript" class="init">`
		35
		36
		37	`$(document).ready(function() {`
		38	`var table = $('#example').DataTable( {`
		39	`dom: "Cfrtip",`
		40	`scrollY: "300px",`
		41	`scrollX: true,`
		42	`scrollCollapse: true,`
		43	`paging: false`
		44	`} );`
		45
		46	`new $.fn.dataTable.FixedColumns( table, {`
		47	`leftColumns: 2`
		48	`} );`
		49	`} );`
		50
		51
		52	`</script>`
		53	`</head>`
		54
		55	`<body class="dt-example">`
		56	`<div class="container">`
		57	`<section>`
		58	`<h1>FixedColumns example <span>ColVis integration</span></h1>`
		59
		60	`<div class="info">`
		61	`<p>FixedColumns operates with DataTables' built-in column visibility options (<a href="//datatables.net/reference/option/columns.visible"><code class="option"`
		62	`title="DataTables initialisation option">columns.visible<span>DT</span></code></a> and <a href="//datatables.net/reference/api/column().visible()"><code class=`
		63	`"api" title="DataTables API method">column().visible()<span>DT</span></code></a>), which columns that are hidden not being shown in the fixed columns. This`
		64	`integration also means that FixedColumns works well with <a href="http://datatables.net/extensions/colvis">ColVis</a>, with columns that are dynamically shown and`
		65	`hidden updated immediately in the fixed columns.</p>`
		66
		67	`<p>The example below shows ColVis and FixedColumns working together. Two columns have been fixed on the left hand side of the table to show FixedColumns ability to`
		68	`work effortlessly with column visibility.</p>`
		69	`</div>`
		70
		71	`<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">`
		72	`<thead>`
		73	`<tr>`
		74	`<th>First name</th>`
		75	`<th>Last name</th>`
		76	`<th>Position</th>`
		77	`<th>Office</th>`
		78	`<th>Age</th>`
		79	`<th>Start date</th>`
		80	`<th>Salary</th>`
		81	`<th>Extn.</th>`
		82	`<th>E-mail</th>`
		83	`</tr>`
		84	`</thead>`
		85
		86	`<tbody>`
		87	`<tr>`
		88	`<td>Tiger</td>`
		89	`<td>Nixon</td>`
		90	`<td>System Architect</td>`
		91	`<td>Edinburgh</td>`
		92	`<td>61</td>`
		93	`<td>2011/04/25</td>`
		94	`<td>$320,800</td>`
		95	`<td>5421</td>`
		96	`<td>t.nixon@datatables.net</td>`
		97	`</tr>`
		98	`<tr>`
		99	`<td>Garrett</td>`
		100	`<td>Winters</td>`
		101	`<td>Accountant</td>`
		102	`<td>Tokyo</td>`
		103	`<td>63</td>`
		104	`<td>2011/07/25</td>`
		105	`<td>$170,750</td>`
		106	`<td>8422</td>`
		107	`<td>g.winters@datatables.net</td>`
		108	`</tr>`
		109	`<tr>`
		110	`<td>Ashton</td>`
		111	`<td>Cox</td>`
		112	`<td>Junior Technical Author</td>`
		113	`<td>San Francisco</td>`
		114	`<td>66</td>`
		115	`<td>2009/01/12</td>`
		116	`<td>$86,000</td>`
		117	`<td>1562</td>`
		118	`<td>a.cox@datatables.net</td>`
		119	`</tr>`
		120	`<tr>`
		121	`<td>Cedric</td>`
		122	`<td>Kelly</td>`
		123	`<td>Senior Javascript Developer</td>`
		124	`<td>Edinburgh</td>`
		125	`<td>22</td>`
		126	`<td>2012/03/29</td>`
		127	`<td>$433,060</td>`
		128	`<td>6224</td>`
		129	`<td>c.kelly@datatables.net</td>`
		130	`</tr>`
		131	`<tr>`
		132	`<td>Airi</td>`
		133	`<td>Satou</td>`
		134	`<td>Accountant</td>`
		135	`<td>Tokyo</td>`
		136	`<td>33</td>`
		137	`<td>2008/11/28</td>`
		138	`<td>$162,700</td>`
		139	`<td>5407</td>`
		140	`<td>a.satou@datatables.net</td>`
		141	`</tr>`
		142	`<tr>`
		143	`<td>Brielle</td>`
		144	`<td>Williamson</td>`
		145	`<td>Integration Specialist</td>`
		146	`<td>New York</td>`
		147	`<td>61</td>`
		148	`<td>2012/12/02</td>`
		149	`<td>$372,000</td>`
		150	`<td>4804</td>`
		151	`<td>b.williamson@datatables.net</td>`
		152	`</tr>`
		153	`<tr>`
		154	`<td>Herrod</td>`
		155	`<td>Chandler</td>`
		156	`<td>Sales Assistant</td>`
		157	`<td>San Francisco</td>`
		158	`<td>59</td>`
		159	`<td>2012/08/06</td>`
		160	`<td>$137,500</td>`
		161	`<td>9608</td>`
		162	`<td>h.chandler@datatables.net</td>`
		163	`</tr>`
		164	`<tr>`
		165	`<td>Rhona</td>`
		166	`<td>Davidson</td>`
		167	`<td>Integration Specialist</td>`
		168	`<td>Tokyo</td>`
		169	`<td>55</td>`
		170	`<td>2010/10/14</td>`
		171	`<td>$327,900</td>`
		172	`<td>6200</td>`
		173	`<td>r.davidson@datatables.net</td>`
		174	`</tr>`
		175	`<tr>`
		176	`<td>Colleen</td>`
		177	`<td>Hurst</td>`
		178	`<td>Javascript Developer</td>`
		179	`<td>San Francisco</td>`
		180	`<td>39</td>`
		181	`<td>2009/09/15</td>`
		182	`<td>$205,500</td>`
		183	`<td>2360</td>`
		184	`<td>c.hurst@datatables.net</td>`
		185	`</tr>`
		186	`<tr>`
		187	`<td>Sonya</td>`
		188	`<td>Frost</td>`
		189	`<td>Software Engineer</td>`
		190	`<td>Edinburgh</td>`
		191	`<td>23</td>`
		192	`<td>2008/12/13</td>`
		193	`<td>$103,600</td>`
		194	`<td>1667</td>`
		195	`<td>s.frost@datatables.net</td>`
		196	`</tr>`
		197	`<tr>`
		198	`<td>Jena</td>`
		199	`<td>Gaines</td>`
		200	`<td>Office Manager</td>`
		201	`<td>London</td>`
		202	`<td>30</td>`
		203	`<td>2008/12/19</td>`
		204	`<td>$90,560</td>`
		205	`<td>3814</td>`
		206	`<td>j.gaines@datatables.net</td>`
		207	`</tr>`
		208	`<tr>`
		209	`<td>Quinn</td>`
		210	`<td>Flynn</td>`
		211	`<td>Support Lead</td>`
		212	`<td>Edinburgh</td>`
		213	`<td>22</td>`
		214	`<td>2013/03/03</td>`
		215	`<td>$342,000</td>`
		216	`<td>9497</td>`
		217	`<td>q.flynn@datatables.net</td>`
		218	`</tr>`
		219	`<tr>`
		220	`<td>Charde</td>`
		221	`<td>Marshall</td>`
		222	`<td>Regional Director</td>`
		223	`<td>San Francisco</td>`
		224	`<td>36</td>`
		225	`<td>2008/10/16</td>`
		226	`<td>$470,600</td>`
		227	`<td>6741</td>`
		228	`<td>c.marshall@datatables.net</td>`
		229	`</tr>`
		230	`<tr>`
		231	`<td>Haley</td>`
		232	`<td>Kennedy</td>`
		233	`<td>Senior Marketing Designer</td>`
		234	`<td>London</td>`
		235	`<td>43</td>`
		236	`<td>2012/12/18</td>`
		237	`<td>$313,500</td>`
		238	`<td>3597</td>`
		239	`<td>h.kennedy@datatables.net</td>`
		240	`</tr>`
		241	`<tr>`
		242	`<td>Tatyana</td>`
		243	`<td>Fitzpatrick</td>`
		244	`<td>Regional Director</td>`
		245	`<td>London</td>`
		246	`<td>19</td>`
		247	`<td>2010/03/17</td>`
		248	`<td>$385,750</td>`
		249	`<td>1965</td>`
		250	`<td>t.fitzpatrick@datatables.net</td>`
		251	`</tr>`
		252	`<tr>`
		253	`<td>Michael</td>`
		254	`<td>Silva</td>`
		255	`<td>Marketing Designer</td>`
		256	`<td>London</td>`
		257	`<td>66</td>`
		258	`<td>2012/11/27</td>`
		259	`<td>$198,500</td>`
		260	`<td>1581</td>`
		261	`<td>m.silva@datatables.net</td>`
		262	`</tr>`
		263	`<tr>`
		264	`<td>Paul</td>`
		265	`<td>Byrd</td>`
		266	`<td>Chief Financial Officer (CFO)</td>`
		267	`<td>New York</td>`
		268	`<td>64</td>`
		269	`<td>2010/06/09</td>`
		270	`<td>$725,000</td>`
		271	`<td>3059</td>`
		272	`<td>p.byrd@datatables.net</td>`
		273	`</tr>`
		274	`<tr>`
		275	`<td>Gloria</td>`
		276	`<td>Little</td>`
		277	`<td>Systems Administrator</td>`
		278	`<td>New York</td>`
		279	`<td>59</td>`
		280	`<td>2009/04/10</td>`
		281	`<td>$237,500</td>`
		282	`<td>1721</td>`
		283	`<td>g.little@datatables.net</td>`
		284	`</tr>`
		285	`<tr>`
		286	`<td>Bradley</td>`
		287	`<td>Greer</td>`
		288	`<td>Software Engineer</td>`
		289	`<td>London</td>`
		290	`<td>41</td>`
		291	`<td>2012/10/13</td>`
		292	`<td>$132,000</td>`
		293	`<td>2558</td>`
		294	`<td>b.greer@datatables.net</td>`
		295	`</tr>`
		296	`<tr>`
		297	`<td>Dai</td>`
		298	`<td>Rios</td>`
		299	`<td>Personnel Lead</td>`
		300	`<td>Edinburgh</td>`
		301	`<td>35</td>`
		302	`<td>2012/09/26</td>`
		303	`<td>$217,500</td>`
		304	`<td>2290</td>`
		305	`<td>d.rios@datatables.net</td>`
		306	`</tr>`
		307	`<tr>`
		308	`<td>Jenette</td>`
		309	`<td>Caldwell</td>`
		310	`<td>Development Lead</td>`
		311	`<td>New York</td>`
		312	`<td>30</td>`
		313	`<td>2011/09/03</td>`
		314	`<td>$345,000</td>`
		315	`<td>1937</td>`
		316	`<td>j.caldwell@datatables.net</td>`
		317	`</tr>`
		318	`<tr>`
		319	`<td>Yuri</td>`
		320	`<td>Berry</td>`
		321	`<td>Chief Marketing Officer (CMO)</td>`
		322	`<td>New York</td>`
		323	`<td>40</td>`
		324	`<td>2009/06/25</td>`
		325	`<td>$675,000</td>`
		326	`<td>6154</td>`
		327	`<td>y.berry@datatables.net</td>`
		328	`</tr>`
		329	`<tr>`
		330	`<td>Caesar</td>`
		331	`<td>Vance</td>`
		332	`<td>Pre-Sales Support</td>`
		333	`<td>New York</td>`
		334	`<td>21</td>`
		335	`<td>2011/12/12</td>`
		336	`<td>$106,450</td>`
		337	`<td>8330</td>`
		338	`<td>c.vance@datatables.net</td>`
		339	`</tr>`
		340	`<tr>`
		341	`<td>Doris</td>`
		342	`<td>Wilder</td>`
		343	`<td>Sales Assistant</td>`
		344	`<td>Sidney</td>`
		345	`<td>23</td>`
		346	`<td>2010/09/20</td>`
		347	`<td>$85,600</td>`
		348	`<td>3023</td>`
		349	`<td>d.wilder@datatables.net</td>`
		350	`</tr>`
		351	`<tr>`
		352	`<td>Angelica</td>`
		353	`<td>Ramos</td>`
		354	`<td>Chief Executive Officer (CEO)</td>`
		355	`<td>London</td>`
		356	`<td>47</td>`
		357	`<td>2009/10/09</td>`
		358	`<td>$1,200,000</td>`
		359	`<td>5797</td>`
		360	`<td>a.ramos@datatables.net</td>`
		361	`</tr>`
		362	`<tr>`
		363	`<td>Gavin</td>`
		364	`<td>Joyce</td>`
		365	`<td>Developer</td>`
		366	`<td>Edinburgh</td>`
		367	`<td>42</td>`
		368	`<td>2010/12/22</td>`
		369	`<td>$92,575</td>`
		370	`<td>8822</td>`
		371	`<td>g.joyce@datatables.net</td>`
		372	`</tr>`
		373	`<tr>`
		374	`<td>Jennifer</td>`
		375	`<td>Chang</td>`
		376	`<td>Regional Director</td>`
		377	`<td>Singapore</td>`
		378	`<td>28</td>`
		379	`<td>2010/11/14</td>`
		380	`<td>$357,650</td>`
		381	`<td>9239</td>`
		382	`<td>j.chang@datatables.net</td>`
		383	`</tr>`
		384	`<tr>`
		385	`<td>Brenden</td>`
		386	`<td>Wagner</td>`
		387	`<td>Software Engineer</td>`
		388	`<td>San Francisco</td>`
		389	`<td>28</td>`
		390	`<td>2011/06/07</td>`
		391	`<td>$206,850</td>`
		392	`<td>1314</td>`
		393	`<td>b.wagner@datatables.net</td>`
		394	`</tr>`
		395	`<tr>`
		396	`<td>Fiona</td>`
		397	`<td>Green</td>`
		398	`<td>Chief Operating Officer (COO)</td>`
		399	`<td>San Francisco</td>`
		400	`<td>48</td>`
		401	`<td>2010/03/11</td>`
		402	`<td>$850,000</td>`
		403	`<td>2947</td>`
		404	`<td>f.green@datatables.net</td>`
		405	`</tr>`
		406	`<tr>`
		407	`<td>Shou</td>`
		408	`<td>Itou</td>`
		409	`<td>Regional Marketing</td>`
		410	`<td>Tokyo</td>`
		411	`<td>20</td>`
		412	`<td>2011/08/14</td>`
		413	`<td>$163,000</td>`
		414	`<td>8899</td>`
		415	`<td>s.itou@datatables.net</td>`
		416	`</tr>`
		417	`<tr>`
		418	`<td>Michelle</td>`
		419	`<td>House</td>`
		420	`<td>Integration Specialist</td>`
		421	`<td>Sidney</td>`
		422	`<td>37</td>`
		423	`<td>2011/06/02</td>`
		424	`<td>$95,400</td>`
		425	`<td>2769</td>`
		426	`<td>m.house@datatables.net</td>`
		427	`</tr>`
		428	`<tr>`
		429	`<td>Suki</td>`
		430	`<td>Burks</td>`
		431	`<td>Developer</td>`
		432	`<td>London</td>`
		433	`<td>53</td>`
		434	`<td>2009/10/22</td>`
		435	`<td>$114,500</td>`
		436	`<td>6832</td>`
		437	`<td>s.burks@datatables.net</td>`
		438	`</tr>`
		439	`<tr>`
		440	`<td>Prescott</td>`
		441	`<td>Bartlett</td>`
		442	`<td>Technical Author</td>`
		443	`<td>London</td>`
		444	`<td>27</td>`
		445	`<td>2011/05/07</td>`
		446	`<td>$145,000</td>`
		447	`<td>3606</td>`
		448	`<td>p.bartlett@datatables.net</td>`
		449	`</tr>`
		450	`<tr>`
		451	`<td>Gavin</td>`
		452	`<td>Cortez</td>`
		453	`<td>Team Leader</td>`
		454	`<td>San Francisco</td>`
		455	`<td>22</td>`
		456	`<td>2008/10/26</td>`
		457	`<td>$235,500</td>`
		458	`<td>2860</td>`
		459	`<td>g.cortez@datatables.net</td>`
		460	`</tr>`
		461	`<tr>`
		462	`<td>Martena</td>`
		463	`<td>Mccray</td>`
		464	`<td>Post-Sales support</td>`
		465	`<td>Edinburgh</td>`
		466	`<td>46</td>`
		467	`<td>2011/03/09</td>`
		468	`<td>$324,050</td>`
		469	`<td>8240</td>`
		470	`<td>m.mccray@datatables.net</td>`
		471	`</tr>`
		472	`<tr>`
		473	`<td>Unity</td>`
		474	`<td>Butler</td>`
		475	`<td>Marketing Designer</td>`
		476	`<td>San Francisco</td>`
		477	`<td>47</td>`
		478	`<td>2009/12/09</td>`
		479	`<td>$85,675</td>`
		480	`<td>5384</td>`
		481	`<td>u.butler@datatables.net</td>`
		482	`</tr>`
		483	`<tr>`
		484	`<td>Howard</td>`
		485	`<td>Hatfield</td>`
		486	`<td>Office Manager</td>`
		487	`<td>San Francisco</td>`
		488	`<td>51</td>`
		489	`<td>2008/12/16</td>`
		490	`<td>$164,500</td>`
		491	`<td>7031</td>`
		492	`<td>h.hatfield@datatables.net</td>`
		493	`</tr>`
		494	`<tr>`
		495	`<td>Hope</td>`
		496	`<td>Fuentes</td>`
		497	`<td>Secretary</td>`
		498	`<td>San Francisco</td>`
		499	`<td>41</td>`
		500	`<td>2010/02/12</td>`
		501	`<td>$109,850</td>`
		502	`<td>6318</td>`
		503	`<td>h.fuentes@datatables.net</td>`
		504	`</tr>`
		505	`<tr>`
		506	`<td>Vivian</td>`
		507	`<td>Harrell</td>`
		508	`<td>Financial Controller</td>`
		509	`<td>San Francisco</td>`
		510	`<td>62</td>`
		511	`<td>2009/02/14</td>`
		512	`<td>$452,500</td>`
		513	`<td>9422</td>`
		514	`<td>v.harrell@datatables.net</td>`
		515	`</tr>`
		516	`<tr>`
		517	`<td>Timothy</td>`
		518	`<td>Mooney</td>`
		519	`<td>Office Manager</td>`
		520	`<td>London</td>`
		521	`<td>37</td>`
		522	`<td>2008/12/11</td>`
		523	`<td>$136,200</td>`
		524	`<td>7580</td>`
		525	`<td>t.mooney@datatables.net</td>`
		526	`</tr>`
		527	`<tr>`
		528	`<td>Jackson</td>`
		529	`<td>Bradshaw</td>`
		530	`<td>Director</td>`
		531	`<td>New York</td>`
		532	`<td>65</td>`
		533	`<td>2008/09/26</td>`
		534	`<td>$645,750</td>`
		535	`<td>1042</td>`
		536	`<td>j.bradshaw@datatables.net</td>`
		537	`</tr>`
		538	`<tr>`
		539	`<td>Olivia</td>`
		540	`<td>Liang</td>`
		541	`<td>Support Engineer</td>`
		542	`<td>Singapore</td>`
		543	`<td>64</td>`
		544	`<td>2011/02/03</td>`
		545	`<td>$234,500</td>`
		546	`<td>2120</td>`
		547	`<td>o.liang@datatables.net</td>`
		548	`</tr>`
		549	`<tr>`
		550	`<td>Bruno</td>`
		551	`<td>Nash</td>`
		552	`<td>Software Engineer</td>`
		553	`<td>London</td>`
		554	`<td>38</td>`
		555	`<td>2011/05/03</td>`
		556	`<td>$163,500</td>`
		557	`<td>6222</td>`
		558	`<td>b.nash@datatables.net</td>`
		559	`</tr>`
		560	`<tr>`
		561	`<td>Sakura</td>`
		562	`<td>Yamamoto</td>`
		563	`<td>Support Engineer</td>`
		564	`<td>Tokyo</td>`
		565	`<td>37</td>`
		566	`<td>2009/08/19</td>`
		567	`<td>$139,575</td>`
		568	`<td>9383</td>`
		569	`<td>s.yamamoto@datatables.net</td>`
		570	`</tr>`
		571	`<tr>`
		572	`<td>Thor</td>`
		573	`<td>Walton</td>`
		574	`<td>Developer</td>`
		575	`<td>New York</td>`
		576	`<td>61</td>`
		577	`<td>2013/08/11</td>`
		578	`<td>$98,540</td>`
		579	`<td>8327</td>`
		580	`<td>t.walton@datatables.net</td>`
		581	`</tr>`
		582	`<tr>`
		583	`<td>Finn</td>`
		584	`<td>Camacho</td>`
		585	`<td>Support Engineer</td>`
		586	`<td>San Francisco</td>`
		587	`<td>47</td>`
		588	`<td>2009/07/07</td>`
		589	`<td>$87,500</td>`
		590	`<td>2927</td>`
		591	`<td>f.camacho@datatables.net</td>`
		592	`</tr>`
		593	`<tr>`
		594	`<td>Serge</td>`
		595	`<td>Baldwin</td>`
		596	`<td>Data Coordinator</td>`
		597	`<td>Singapore</td>`
		598	`<td>64</td>`
		599	`<td>2012/04/09</td>`
		600	`<td>$138,575</td>`
		601	`<td>8352</td>`
		602	`<td>s.baldwin@datatables.net</td>`
		603	`</tr>`
		604	`<tr>`
		605	`<td>Zenaida</td>`
		606	`<td>Frank</td>`
		607	`<td>Software Engineer</td>`
		608	`<td>New York</td>`
		609	`<td>63</td>`
		610	`<td>2010/01/04</td>`
		611	`<td>$125,250</td>`
		612	`<td>7439</td>`
		613	`<td>z.frank@datatables.net</td>`
		614	`</tr>`
		615	`<tr>`
		616	`<td>Zorita</td>`
		617	`<td>Serrano</td>`
		618	`<td>Software Engineer</td>`
		619	`<td>San Francisco</td>`
		620	`<td>56</td>`
		621	`<td>2012/06/01</td>`
		622	`<td>$115,000</td>`
		623	`<td>4389</td>`
		624	`<td>z.serrano@datatables.net</td>`
		625	`</tr>`
		626	`<tr>`
		627	`<td>Jennifer</td>`
		628	`<td>Acosta</td>`
		629	`<td>Junior Javascript Developer</td>`
		630	`<td>Edinburgh</td>`
		631	`<td>43</td>`
		632	`<td>2013/02/01</td>`
		633	`<td>$75,650</td>`
		634	`<td>3431</td>`
		635	`<td>j.acosta@datatables.net</td>`
		636	`</tr>`
		637	`<tr>`
		638	`<td>Cara</td>`
		639	`<td>Stevens</td>`
		640	`<td>Sales Assistant</td>`
		641	`<td>New York</td>`
		642	`<td>46</td>`
		643	`<td>2011/12/06</td>`
		644	`<td>$145,600</td>`
		645	`<td>3990</td>`
		646	`<td>c.stevens@datatables.net</td>`
		647	`</tr>`
		648	`<tr>`
		649	`<td>Hermione</td>`
		650	`<td>Butler</td>`
		651	`<td>Regional Director</td>`
		652	`<td>London</td>`
		653	`<td>47</td>`
		654	`<td>2011/03/21</td>`
		655	`<td>$356,250</td>`
		656	`<td>1016</td>`
		657	`<td>h.butler@datatables.net</td>`
		658	`</tr>`
		659	`<tr>`
		660	`<td>Lael</td>`
		661	`<td>Greer</td>`
		662	`<td>Systems Administrator</td>`
		663	`<td>London</td>`
		664	`<td>21</td>`
		665	`<td>2009/02/27</td>`
		666	`<td>$103,500</td>`
		667	`<td>6733</td>`
		668	`<td>l.greer@datatables.net</td>`
		669	`</tr>`
		670	`<tr>`
		671	`<td>Jonas</td>`
		672	`<td>Alexander</td>`
		673	`<td>Developer</td>`
		674	`<td>San Francisco</td>`
		675	`<td>30</td>`
		676	`<td>2010/07/14</td>`
		677	`<td>$86,500</td>`
		678	`<td>8196</td>`
		679	`<td>j.alexander@datatables.net</td>`
		680	`</tr>`
		681	`<tr>`
		682	`<td>Shad</td>`
		683	`<td>Decker</td>`
		684	`<td>Regional Director</td>`
		685	`<td>Edinburgh</td>`
		686	`<td>51</td>`
		687	`<td>2008/11/13</td>`
		688	`<td>$183,000</td>`
		689	`<td>6373</td>`
		690	`<td>s.decker@datatables.net</td>`
		691	`</tr>`
		692	`<tr>`
		693	`<td>Michael</td>`
		694	`<td>Bruce</td>`
		695	`<td>Javascript Developer</td>`
		696	`<td>Singapore</td>`
		697	`<td>29</td>`
		698	`<td>2011/06/27</td>`
		699	`<td>$183,000</td>`
		700	`<td>5384</td>`
		701	`<td>m.bruce@datatables.net</td>`
		702	`</tr>`
		703	`<tr>`
		704	`<td>Donna</td>`
		705	`<td>Snider</td>`
		706	`<td>Customer Support</td>`
		707	`<td>New York</td>`
		708	`<td>27</td>`
		709	`<td>2011/01/25</td>`
		710	`<td>$112,000</td>`
		711	`<td>4226</td>`
		712	`<td>d.snider@datatables.net</td>`
		713	`</tr>`
		714	`</tbody>`
		715	`</table>`
		716
		717	`<ul class="tabs">`
		718	`<li class="active">Javascript</li>`
		719	`<li>HTML</li>`
		720	`<li>CSS</li>`
		721	`<li>Ajax</li>`
		722	`<li>Server-side script</li>`
		723	`</ul>`
		724
		725	`<div class="tabs">`
		726	`<div class="js">`
		727	`<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {`
		728	`var table = $('#example').DataTable( {`
		729	`dom: "Cfrtip",`
		730	`scrollY: "300px",`
		731	`scrollX: true,`
		732	`scrollCollapse: true,`
		733	`paging: false`
		734	`} );`
		735
		736	`new $.fn.dataTable.FixedColumns( table, {`
		737	`leftColumns: 2`
		738	`} );`
		739	`} );</code>`
		740
		741	`<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>`
		742
		743	`<ul>`
		744	`<li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>`
		745	`<li><a href="../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>`
		746	`<li><a href="../../ColVis/js/dataTables.colVis.js">../../ColVis/js/dataTables.colVis.js</a></li>`
		747	`<li><a href="../js/dataTables.fixedColumns.js">../js/dataTables.fixedColumns.js</a></li>`
		748	`</ul>`
		749	`</div>`
		750
		751	`<div class="table">`
		752	`<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>`
		753	`</div>`
		754
		755	`<div class="css">`
		756	`<div>`
		757	`<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The`
		758	`additional CSS used is shown below:</p><code class="multiline language-css">/* Ensure that the demo table scrolls */`
		759	`th, td { white-space: nowrap; }`
		760	`div.dataTables_wrapper {`
		761	`width: 800px;`
		762	`margin: 0 auto;`
		763	`}`
		764
		765	`div.ColVis {`
		766	`float: left;`
		767	`}</code>`
		768	`</div>`
		769
		770	`<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>`
		771
		772	`<ul>`
		773	`<li><a href="../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>`
		774	`<li><a href="../../ColVis/css/dataTables.colVis.css">../../ColVis/css/dataTables.colVis.css</a></li>`
		775	`<li><a href="../css/dataTables.fixedColumns.css">../css/dataTables.fixedColumns.css</a></li>`
		776	`</ul>`
		777	`</div>`
		778
		779	`<div class="ajax">`
		780	`<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is`
		781	`loaded.</p>`
		782	`</div>`
		783
		784	`<div class="php">`
		785	`<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side`
		786	`processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables`
		787	`documentation</a>.</p>`
		788	`</div>`
		789	`</div>`
		790	`</section>`
		791	`</div>`
		792
		793	`<section>`
		794	`<div class="footer">`
		795	`<div class="gradient"></div>`
		796
		797	`<div class="liner">`
		798	`<h2>Other examples</h2>`
		799
		800	`<div class="toc">`
		801	`<div class="toc-group">`
		802	`<h3><a href="./index.html">Examples</a></h3>`
		803	`<ul class="toc active">`
		804	`<li><a href="./left_right_columns.html">Left and right fixed columns</a></li>`
		805	`<li><a href="./simple.html">Basic initialisation</a></li>`
		806	`<li><a href="./two_columns.html">Multiple fixed columns</a></li>`
		807	`<li><a href="./right_column.html">Right column only</a></li>`
		808	`<li><a href="./rowspan.html">Complex headers</a></li>`
		809	`<li class="active"><a href="./colvis.html">ColVis integration</a></li>`
		810	`<li><a href="./server-side-processing.html">Server-side processing</a></li>`
		811	`<li><a href="./css_size.html">CSS row sizing</a></li>`
		812	`<li><a href="./size_fixed.html">Assigned column width</a></li>`
		813	`<li><a href="./size_fluid.html">Fluid column width</a></li>`
		814	`<li><a href="./col_filter.html">Individual column filtering</a></li>`
		815	`<li><a href="./bootstrap.html">Bootstrap</a></li>`
		816	`<li><a href="./index_column.html">Index column</a></li>`
		817	`</ul>`
		818	`</div>`
		819	`</div>`
		820
		821	`<div class="epilogue">`
		822	`<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>`
		823	`Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>`
		824	`which extend the capabilities of DataTables.</p>`
		825
		826	`<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>`
		827	`DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>`
		828	`</div>`
		829	`</div>`
		830	`</div>`
		831	`</section>`
		832	`</body>`
		833	`</html>`

Subversion-Projekte lars-tiefland.faltradxxs.de

(root)/trunk/public/JavaScript/DataTables-1.10.5/extensions/FixedColumns/examples/colvis.html – Revision 2