PageRenderTime 41ms CodeModel.GetById 12ms RepoModel.GetById 1ms app.codeStats 0ms

/extras/data_table/extensions/ColReorder/examples/integration/server_side.html

https://gitlab.com/gustCL/syscar
HTML | 233 lines | 226 code | 7 blank | 0 comment | 0 complexity | aecb974ff16daf27ef5d1d981cdda046 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    6. 

  6. 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    7. 

  7. 	<title>ColReorder example - Server-side processing</title>
    8. 

  8. 	<link rel="stylesheet" type="text/css" href="../../../../media/css/jquery.dataTables.css">
    9. 

  9. 	<link rel="stylesheet" type="text/css" href="../../css/colReorder.dataTables.css">
    10. 

  10. 	<link rel="stylesheet" type="text/css" href="../../../../examples/resources/syntax/shCore.css">
    11. 

  11. 	<link rel="stylesheet" type="text/css" href="../../../../examples/resources/demo.css">
    12. 

  12. 	<style type="text/css" class="init">
    13. 

  13. 	
    14. 

  14. 	</style>
    15. 

  15. 	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.min.js">
    16. 

  16. 	</script>
    17. 

  17. 	<script type="text/javascript" language="javascript" src="../../../../media/js/jquery.dataTables.js">
    18. 

  18. 	</script>
    19. 

  19. 	<script type="text/javascript" language="javascript" src="../../js/dataTables.colReorder.js">
    20. 

  20. 	</script>
    21. 

  21. 	<script type="text/javascript" language="javascript" src="../../../../examples/resources/syntax/shCore.js">
    22. 

  22. 	</script>
    23. 

  23. 	<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js">
    24. 

  24. 	</script>
    25. 

  25. 	<script type="text/javascript" language="javascript" class="init">
    26. 

  26. 	
    27. 

  27. 

  28. 

  29. $(document).ready(function() {
    30. 

  30. 	$('#example').dataTable( {
    31. 

  31. 		processing: true,
    32. 

  32. 		serverSide: true,
    33. 

  33. 		ajax: "../../../../examples/server_side/scripts/objects.php",
    34. 

  34. 		columns: [
    35. 

  35. 			{ data: "first_name" },
    36. 

  36. 			{ data: "last_name" },
    37. 

  37. 			{ data: "position" },
    38. 

  38. 			{ data: "office" },
    39. 

  39. 			{ data: "start_date" },
    40. 

  40. 			{ data: "salary" }
    41. 

  41. 		],
    42. 

  42. 		colReorder: true
    43. 

  43. 	} );
    44. 

  44. } );
    45. 

  45. 

  46. 

  47. 

  48. 	</script>
    49. 

  49. </head>
    50. 

  50. <body class="dt-example">
    51. 

  51. 	<div class="container">
    52. 

  52. 		<section>
    53. 

  53. 			<h1>ColReorder example <span>Server-side processing</span></h1>
    54. 

  54. 			<div class="info">
    55. 

  55. 				<p>Server-side processing can be exceptionally useful in DataTables when dealing with massive data sets, and ColReorder works with this as would be expected.</p>
    56. 

  56. 				<p>It is recommend that you use object based data with server-side processing and ColReorder, as this provides easily understandable mapping between the the
    57. 

  57. 				columns and the data relation on the server, otherwise you need to work out array indexes on each call!</p>
    58. 

  58. 			</div>
    59. 

  59. 			<table id="example" class="display" cellspacing="0" width="100%">
    60. 

  60. 				<thead>
    61. 

  61. 					<tr>
    62. 

  62. 						<th>First name</th>
    63. 

  63. 						<th>Last name</th>
    64. 

  64. 						<th>Position</th>
    65. 

  65. 						<th>Office</th>
    66. 

  66. 						<th>Start date</th>
    67. 

  67. 						<th>Salary</th>
    68. 

  68. 					</tr>
    69. 

  69. 				</thead>
    70. 

  70. 				<tfoot>
    71. 

  71. 					<tr>
    72. 

  72. 						<th>First name</th>
    73. 

  73. 						<th>Last name</th>
    74. 

  74. 						<th>Position</th>
    75. 

  75. 						<th>Office</th>
    76. 

  76. 						<th>Start date</th>
    77. 

  77. 						<th>Salary</th>
    78. 

  78. 					</tr>
    79. 

  79. 				</tfoot>
    80. 

  80. 			</table>
    81. 

  81. 			<ul class="tabs">
    82. 

  82. 				<li class="active">Javascript</li>
    83. 

  83. 				<li>HTML</li>
    84. 

  84. 				<li>CSS</li>
    85. 

  85. 				<li>Ajax</li>
    86. 

  86. 				<li>Server-side script</li>
    87. 

  87. 			</ul>
    88. 

  88. 			<div class="tabs">
    89. 

  89. 				<div class="js">
    90. 

  90. 					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
    91. 

  91. 	$('#example').dataTable( {
    92. 

  92. 		processing: true,
    93. 

  93. 		serverSide: true,
    94. 

  94. 		ajax: &quot;../../../../examples/server_side/scripts/objects.php&quot;,
    95. 

  95. 		columns: [
    96. 

  96. 			{ data: &quot;first_name&quot; },
    97. 

  97. 			{ data: &quot;last_name&quot; },
    98. 

  98. 			{ data: &quot;position&quot; },
    99. 

  99. 			{ data: &quot;office&quot; },
    100. 

  100. 			{ data: &quot;start_date&quot; },
    101. 

  101. 			{ data: &quot;salary&quot; }
    102. 

  102. 		],
    103. 

  103. 		colReorder: true
    104. 

  104. 	} );
    105. 

  105. } );</code>
    106. 

  106. 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
    107. 

  107. 					<ul>
    108. 

  108. 						<li>
    109. 

  109. 							<a href="//code.jquery.com/jquery-1.12.0.min.js">//code.jquery.com/jquery-1.12.0.min.js</a>
    110. 

  110. 						</li>
    111. 

  111. 						<li>
    112. 

  112. 							<a href="../../../../media/js/jquery.dataTables.js">../../../../media/js/jquery.dataTables.js</a>
    113. 

  113. 						</li>
    114. 

  114. 						<li>
    115. 

  115. 							<a href="../../js/dataTables.colReorder.js">../../js/dataTables.colReorder.js</a>
    116. 

  116. 						</li>
    117. 

  117. 					</ul>
    118. 

  118. 				</div>
    119. 

  119. 				<div class="table">
    120. 

  120. 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
    121. 

  121. 				</div>
    122. 

  122. 				<div class="css">
    123. 

  123. 					<div>
    124. 

  124. 						<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
    125. 

  125. 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
    126. 

  126. 					</div>
    127. 

  127. 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
    128. 

  128. 					<ul>
    129. 

  129. 						<li>
    130. 

  130. 							<a href="../../../../media/css/jquery.dataTables.css">../../../../media/css/jquery.dataTables.css</a>
    131. 

  131. 						</li>
    132. 

  132. 						<li>
    133. 

  133. 							<a href="../../css/colReorder.dataTables.css">../../css/colReorder.dataTables.css</a>
    134. 

  134. 						</li>
    135. 

  135. 					</ul>
    136. 

  136. 				</div>
    137. 

  137. 				<div class="ajax">
    138. 

  138. 					<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
    139. 

  139. 					loaded.</p>
    140. 

  140. 				</div>
    141. 

  141. 				<div class="php">
    142. 

  142. 					<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
    143. 

  143. 					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
    144. 

  144. 					documentation</a>.</p>
    145. 

  145. 				</div>
    146. 

  146. 			</div>
    147. 

  147. 		</section>
    148. 

  148. 	</div>
    149. 

  149. 	<section>
    150. 

  150. 		<div class="footer">
    151. 

  151. 			<div class="gradient"></div>
    152. 

  152. 			<div class="liner">
    153. 

  153. 				<h2>Other examples</h2>
    154. 

  154. 				<div class="toc">
    155. 

  155. 					<div class="toc-group">
    156. 

  156. 						<h3><a href="../initialisation/index.html">Initialisation and options</a></h3>
    157. 

  157. 						<ul class="toc">
    158. 

  158. 							<li>
    159. 

  159. 								<a href="../initialisation/simple.html">Basic initialisation</a>
    160. 

  160. 							</li>
    161. 

  161. 							<li>
    162. 

  162. 								<a href="../initialisation/scrolling.html">Scrolling table</a>
    163. 

  163. 							</li>
    164. 

  164. 							<li>
    165. 

  165. 								<a href="../initialisation/predefined.html">Predefined column ordering</a>
    166. 

  166. 							</li>
    167. 

  167. 							<li>
    168. 

  168. 								<a href="../initialisation/realtime.html">Realtime updating</a>
    169. 

  169. 							</li>
    170. 

  170. 							<li>
    171. 

  171. 								<a href="../initialisation/col_filter.html">Individual column filtering</a>
    172. 

  172. 							</li>
    173. 

  173. 							<li>
    174. 

  174. 								<a href="../initialisation/new_init.html">Initialisation using `new`</a>
    175. 

  175. 							</li>
    176. 

  176. 							<li>
    177. 

  177. 								<a href="../initialisation/reset.html">Reset ordering API</a>
    178. 

  178. 							</li>
    179. 

  179. 						</ul>
    180. 

  180. 					</div>
    181. 

  181. 					<div class="toc-group">
    182. 

  182. 						<h3><a href="./index.html">Integration with other DataTables extensions</a></h3>
    183. 

  183. 						<ul class="toc active">
    184. 

  184. 							<li>
    185. 

  185. 								<a href="./colvis.html">Column visibility integration</a>
    186. 

  186. 							</li>
    187. 

  187. 							<li>
    188. 

  188. 								<a href="./fixedcolumns.html">FixedColumns integration</a>
    189. 

  189. 							</li>
    190. 

  190. 							<li>
    191. 

  191. 								<a href="./fixedheader.html">FixedHeader integration</a>
    192. 

  192. 							</li>
    193. 

  193. 							<li>
    194. 

  194. 								<a href="./responsive.html">Responsive integration</a>
    195. 

  195. 							</li>
    196. 

  196. 							<li class="active">
    197. 

  197. 								<a href="./server_side.html">Server-side processing</a>
    198. 

  198. 							</li>
    199. 

  199. 							<li>
    200. 

  200. 								<a href="./state_save.html">State saving</a>
    201. 

  201. 							</li>
    202. 

  202. 						</ul>
    203. 

  203. 					</div>
    204. 

  204. 					<div class="toc-group">
    205. 

  205. 						<h3><a href="../styling/index.html">Styling</a></h3>
    206. 

  206. 						<ul class="toc">
    207. 

  207. 							<li>
    208. 

  208. 								<a href="../styling/alt_insert.html">Alternative insert styling</a>
    209. 

  209. 							</li>
    210. 

  210. 							<li>
    211. 

  211. 								<a href="../styling/bootstrap.html">Bootstrap styling</a>
    212. 

  212. 							</li>
    213. 

  213. 							<li>
    214. 

  214. 								<a href="../styling/foundation.html">Foundation styling</a>
    215. 

  215. 							</li>
    216. 

  216. 							<li>
    217. 

  217. 								<a href="../styling/jqueryui.html">jQuery UI styling</a>
    218. 

  218. 							</li>
    219. 

  219. 						</ul>
    220. 

  220. 					</div>
    221. 

  221. 				</div>
    222. 

  222. 				<div class="epilogue">
    223. 

  223. 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
    224. 

  224. 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
    225. 

  225. 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
    226. 

  226. 					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
    227. 

  227. 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
    228. 

  228. 				</div>
    229. 

  229. 			</div>
    230. 

  230. 		</div>
    231. 

  231. 	</section>
    232. 

  232. </body>
    233. 

  233. </html>
    234.