You cannot select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
		
			
		
			
	
	
		
			39 lines
		
	
	
		
			1.2 KiB
		
	
	
	
		
			XML
		
	
		
		
			
		
	
	
			39 lines
		
	
	
		
			1.2 KiB
		
	
	
	
		
			XML
		
	
| 
								 
											11 years ago
										 
									 | 
							
								<?xml version="1.0" encoding="UTF-8" ?>
							 | 
						||
| 
								 | 
							
								<dt-example table-type="html-details" table-class="display nowrap" order="2">
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								<css lib="datatables responsive" />
							 | 
						||
| 
								 | 
							
								<js lib="jquery datatables responsive">
							 | 
						||
| 
								 | 
							
								<![CDATA[
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								$(document).ready(function() {
							 | 
						||
| 
								 | 
							
									$('#example').DataTable( {
							 | 
						||
| 
								 | 
							
										responsive: {
							 | 
						||
| 
								 | 
							
											details: {
							 | 
						||
| 
								 | 
							
												type: 'column'
							 | 
						||
| 
								 | 
							
											}
							 | 
						||
| 
								 | 
							
										},
							 | 
						||
| 
								 | 
							
										columnDefs: [ {
							 | 
						||
| 
								 | 
							
											className: 'control',
							 | 
						||
| 
								 | 
							
											orderable: false,
							 | 
						||
| 
								 | 
							
											targets:   0
							 | 
						||
| 
								 | 
							
										} ],
							 | 
						||
| 
								 | 
							
										order: [ 1, 'asc' ]
							 | 
						||
| 
								 | 
							
									} );
							 | 
						||
| 
								 | 
							
								} );
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								]]>
							 | 
						||
| 
								 | 
							
								</js>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								<title lib="Responsive">Column controlled child rows</title>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								<info><![CDATA[
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								Responsive has two built in methods for displaying the controlling element of the child rows; `inline` which is the default option and shows the control in the first column, and `column` which set a _control column_ as the control. The control column is shown only when there is some other column hidden, and is dedicated only to the show / hide control for the rows.
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								This example shows the `r-init responsive.details.type` option set to `column` to activate the control column. Note that by default the first column is used as the control, so additionally in the initialisation the `dt-init order` and `dt-init columns.orderable` options are used to disable sorting on this column.
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								]]></info>
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								</dt-example>
							 | 
						||
| 
								 | 
							
								
							 |