PageRenderTime 56ms CodeModel.GetById 26ms RepoModel.GetById 0ms app.codeStats 1ms

/public/theme/source_admin_v1.2.1/admin/angular/template_content/assets/plugins/DataTables/examples/server_side/select_rows.html

https://gitlab.com/metahuman247/business
HTML | 326 lines | 284 code | 42 blank | 0 comment | 0 complexity | 0305c802b424d8681ed70471721b881b 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. 

  8. 	<title>DataTables example - Row selection</title>
    9. 

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

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

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

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

  13. 

  14. 	</style>
    15. 

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

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

  17. 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
    18. 

  18. 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
    19. 

  19. 	<script type="text/javascript" language="javascript" class="init">
    20. 

  20. 

  21. 

  22. $(document).ready(function() {
    23. 

  23. 	var selected = [];
    24. 

  24. 

  25. 	$("#example").DataTable({
    26. 

  26. 		"processing": true,
    27. 

  27. 		"serverSide": true,
    28. 

  28. 		"ajax": "scripts/ids-arrays.php",
    29. 

  29. 		"rowCallback": function( row, data ) {
    30. 

  30. 			if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
    31. 

  31. 				$(row).addClass('selected');
    32. 

  32. 			}
    33. 

  33. 		}
    34. 

  34. 	});
    35. 

  35. 

  36. 	$('#example tbody').on('click', 'tr', function () {
    37. 

  37. 		var id = this.id;
    38. 

  38. 		var index = $.inArray(id, selected);
    39. 

  39. 

  40. 		if ( index === -1 ) {
    41. 

  41. 			selected.push( id );
    42. 

  42. 		} else {
    43. 

  43. 			selected.splice( index, 1 );
    44. 

  44. 		}
    45. 

  45. 

  46. 		$(this).toggleClass('selected');
    47. 

  47. 	} );
    48. 

  48. } );
    49. 

  49. 

  50. 

  51. 	</script>
    52. 

  52. </head>
    53. 

  53. 

  54. <body class="dt-example">
    55. 

  55. 	<div class="container">
    56. 

  56. 		<section>
    57. 

  57. 			<h1>DataTables example <span>Row selection</span></h1>
    58. 

  58. 

  59. 			<div class="info">
    60. 

  60. 				<p>When you want to have user selectable rows in DataTables, it is relatively trivial when using DOM based data - but when using server-side processing, DataTables
    61. 

  61. 				doesn't retain DOM row elements over pages / filtering etc. As such, you will need to keep a track of which rows a user as selected and mark them as selected on
    62. 

  62. 				each draw.</p>
    63. 

  63. 

  64. 				<p>This is shown in this demo, which uses a unique ID assigned to the TR element (this is done automatically through the use of the <code>DT_RowId</code> special
    65. 

  65. 				property returned as part of the object given by the server for each row) to track which rows are selected and reselect them is appropriate on a draw.</p>
    66. 

  66. 

  67. 				<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
    68. 

  68. 				provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
    69. 

  69. 			</div>
    70. 

  70. 

  71. 			<table id="example" class="display" cellspacing="0" width="100%">
    72. 

  72. 				<thead>
    73. 

  73. 					<tr>
    74. 

  74. 						<th>First name</th>
    75. 

  75. 						<th>Last name</th>
    76. 

  76. 						<th>Position</th>
    77. 

  77. 						<th>Office</th>
    78. 

  78. 						<th>Start date</th>
    79. 

  79. 						<th>Salary</th>
    80. 

  80. 					</tr>
    81. 

  81. 				</thead>
    82. 

  82. 

  83. 				<tfoot>
    84. 

  84. 					<tr>
    85. 

  85. 						<th>First name</th>
    86. 

  86. 						<th>Last name</th>
    87. 

  87. 						<th>Position</th>
    88. 

  88. 						<th>Office</th>
    89. 

  89. 						<th>Start date</th>
    90. 

  90. 						<th>Salary</th>
    91. 

  91. 					</tr>
    92. 

  92. 				</tfoot>
    93. 

  93. 			</table>
    94. 

  94. 

  95. 			<ul class="tabs">
    96. 

  96. 				<li class="active">Javascript</li>
    97. 

  97. 				<li>HTML</li>
    98. 

  98. 				<li>CSS</li>
    99. 

  99. 				<li>Ajax</li>
    100. 

  100. 				<li>Server-side script</li>
    101. 

  101. 			</ul>
    102. 

  102. 

  103. 			<div class="tabs">
    104. 

  104. 				<div class="js">
    105. 

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

  106. 	var selected = [];
    107. 

  107. 

  108. 	$(&quot;#example&quot;).DataTable({
    109. 

  109. 		&quot;processing&quot;: true,
    110. 

  110. 		&quot;serverSide&quot;: true,
    111. 

  111. 		&quot;ajax&quot;: &quot;scripts/ids-arrays.php&quot;,
    112. 

  112. 		&quot;rowCallback&quot;: function( row, data ) {
    113. 

  113. 			if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
    114. 

  114. 				$(row).addClass('selected');
    115. 

  115. 			}
    116. 

  116. 		}
    117. 

  117. 	});
    118. 

  118. 

  119. 	$('#example tbody').on('click', 'tr', function () {
    120. 

  120. 		var id = this.id;
    121. 

  121. 		var index = $.inArray(id, selected);
    122. 

  122. 

  123. 		if ( index === -1 ) {
    124. 

  124. 			selected.push( id );
    125. 

  125. 		} else {
    126. 

  126. 			selected.splice( index, 1 );
    127. 

  127. 		}
    128. 

  128. 

  129. 		$(this).toggleClass('selected');
    130. 

  130. 	} );
    131. 

  131. } );</code>
    132. 

  132. 

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

  134. 

  135. 					<ul>
    136. 

  136. 						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
    137. 

  137. 						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
    138. 

  138. 					</ul>
    139. 

  139. 				</div>
    140. 

  140. 

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

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

  143. 				</div>
    144. 

  144. 

  145. 				<div class="css">
    146. 

  146. 					<div>
    147. 

  147. 						<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
    148. 

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

  149. 					</div>
    150. 

  150. 

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

  152. 

  153. 					<ul>
    154. 

  154. 						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
    155. 

  155. 					</ul>
    156. 

  156. 				</div>
    157. 

  157. 

  158. 				<div class="ajax">
    159. 

  159. 					<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
    160. 

  160. 					loaded.</p>
    161. 

  161. 				</div>
    162. 

  162. 

  163. 				<div class="php">
    164. 

  164. 					<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
    165. 

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

  166. 					documentation</a>.</p>
    167. 

  167. 				</div>
    168. 

  168. 			</div>
    169. 

  169. 		</section>
    170. 

  170. 	</div>
    171. 

  171. 

  172. 	<section>
    173. 

  173. 		<div class="footer">
    174. 

  174. 			<div class="gradient"></div>
    175. 

  175. 

  176. 			<div class="liner">
    177. 

  177. 				<h2>Other examples</h2>
    178. 

  178. 

  179. 				<div class="toc">
    180. 

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

  181. 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
    182. 

  182. 						<ul class="toc">
    183. 

  183. 							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
    184. 

  184. 							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
    185. 

  185. 							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
    186. 

  186. 							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
    187. 

  187. 							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
    188. 

  188. 							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
    189. 

  189. 							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
    190. 

  190. 							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
    191. 

  191. 							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
    192. 

  192. 							<li><a href="../basic_init/state_save.html">State saving</a></li>
    193. 

  193. 							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
    194. 

  194. 							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
    195. 

  195. 							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
    196. 

  196. 							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
    197. 

  197. 							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
    198. 

  198. 							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
    199. 

  199. 							<li><a href="../basic_init/language.html">Language options</a></li>
    200. 

  200. 						</ul>
    201. 

  201. 					</div>
    202. 

  202. 

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

  204. 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
    205. 

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

  206. 							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
    207. 

  207. 							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
    208. 

  208. 							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
    209. 

  209. 							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
    210. 

  210. 							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
    211. 

  211. 							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
    212. 

  212. 							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
    213. 

  213. 							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
    214. 

  214. 							<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
    215. 

  215. 							<li><a href="../advanced_init/language_file.html">Language file</a></li>
    216. 

  216. 							<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
    217. 

  217. 							<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
    218. 

  218. 							<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
    219. 

  219. 							<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
    220. 

  220. 							<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
    221. 

  221. 							<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
    222. 

  222. 						</ul>
    223. 

  223. 					</div>
    224. 

  224. 

  225. 					<div class="toc-group">
    226. 

  226. 						<h3><a href="../styling/index.html">Styling</a></h3>
    227. 

  227. 						<ul class="toc">
    228. 

  228. 							<li><a href="../styling/display.html">Base style</a></li>
    229. 

  229. 							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
    230. 

  230. 							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
    231. 

  231. 							<li><a href="../styling/compact.html">Base style - compact</a></li>
    232. 

  232. 							<li><a href="../styling/hover.html">Base style - hover</a></li>
    233. 

  233. 							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
    234. 

  234. 							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
    235. 

  235. 							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
    236. 

  236. 							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
    237. 

  237. 							<li><a href="../styling/foundation.html">Foundation</a></li>
    238. 

  238. 							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
    239. 

  239. 						</ul>
    240. 

  240. 					</div>
    241. 

  241. 

  242. 					<div class="toc-group">
    243. 

  243. 						<h3><a href="../data_sources/index.html">Data sources</a></h3>
    244. 

  244. 						<ul class="toc">
    245. 

  245. 							<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
    246. 

  246. 							<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
    247. 

  247. 							<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
    248. 

  248. 							<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
    249. 

  249. 						</ul>
    250. 

  250. 					</div>
    251. 

  251. 

  252. 					<div class="toc-group">
    253. 

  253. 						<h3><a href="../api/index.html">API</a></h3>
    254. 

  254. 						<ul class="toc">
    255. 

  255. 							<li><a href="../api/add_row.html">Add rows</a></li>
    256. 

  256. 							<li><a href="../api/multi_filter.html">Individual column searching (text inputs)</a></li>
    257. 

  257. 							<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
    258. 

  258. 							<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
    259. 

  259. 							<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
    260. 

  260. 							<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
    261. 

  261. 							<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
    262. 

  262. 							<li><a href="../api/form.html">Form inputs</a></li>
    263. 

  263. 							<li><a href="../api/counter_columns.html">Index column</a></li>
    264. 

  264. 							<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
    265. 

  265. 							<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
    266. 

  266. 							<li><a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
    267. 

  267. 							<li><a href="../api/regex.html">Search API (regular expressions)</a></li>
    268. 

  268. 						</ul>
    269. 

  269. 					</div>
    270. 

  270. 

  271. 					<div class="toc-group">
    272. 

  272. 						<h3><a href="../ajax/index.html">Ajax</a></h3>
    273. 

  273. 						<ul class="toc">
    274. 

  274. 							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
    275. 

  275. 							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
    276. 

  276. 							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
    277. 

  277. 							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
    278. 

  278. 							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
    279. 

  279. 							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
    280. 

  280. 							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
    281. 

  281. 							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
    282. 

  282. 							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
    283. 

  283. 						</ul>
    284. 

  284. 					</div>
    285. 

  285. 

  286. 					<div class="toc-group">
    287. 

  287. 						<h3><a href="./index.html">Server-side</a></h3>
    288. 

  288. 						<ul class="toc active">
    289. 

  289. 							<li><a href="./simple.html">Server-side processing</a></li>
    290. 

  290. 							<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
    291. 

  291. 							<li><a href="./post.html">POST data</a></li>
    292. 

  292. 							<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
    293. 

  293. 							<li><a href="./object_data.html">Object data source</a></li>
    294. 

  294. 							<li><a href="./row_details.html">Row details</a></li>
    295. 

  295. 							<li class="active"><a href="./select_rows.html">Row selection</a></li>
    296. 

  296. 							<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
    297. 

  297. 							<li><a href="./defer_loading.html">Deferred loading of data</a></li>
    298. 

  298. 							<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
    299. 

  299. 						</ul>
    300. 

  300. 					</div>
    301. 

  301. 

  302. 					<div class="toc-group">
    303. 

  303. 						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
    304. 

  304. 						<ul class="toc">
    305. 

  305. 							<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
    306. 

  306. 							<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
    307. 

  307. 							<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
    308. 

  308. 							<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
    309. 

  309. 							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
    310. 

  310. 						</ul>
    311. 

  311. 					</div>
    312. 

  312. 				</div>
    313. 

  313. 

  314. 				<div class="epilogue">
    315. 

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

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

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

  318. 

  319. 					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
    320. 

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

  321. 				</div>
    322. 

  322. 			</div>
    323. 

  323. 		</div>
    324. 

  324. 	</section>
    325. 

  325. </body>
    326. 

  326. </html>
    327.