Added assets + dependencies

This commit is contained in:
Bill Zimmerman
2015-02-25 14:08:14 +01:00
parent cb37f12f56
commit d5678d622e
748 changed files with 154165 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
<?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>

View File

@@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display nowrap" order="5">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
renderer: function ( api, rowIdx ) {
// Select hidden columns for the given row
var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
var header = $( api.column( cell.column ).header() );
return '<tr>'+
'<td>'+
header.text()+':'+
'</td> '+
'<td>'+
api.cell( cell ).data()+
'</td>'+
'</tr>';
} ).toArray().join('');
return data ?
$('<table/>').append( data ) :
false;
}
}
}
} );
} );
]]>
</js>
<title lib="Responsive">Custom child row renderer</title>
<info><![CDATA[
The child row's for a collapsed table in Responsive, by default, show a `-tag ul/li` list of the data from the hidden columns. The `r-init responsive.details.renderer` option provide the ability to create your own custom renderer. It is given two parameters: the DataTables API instance for the table and the row index to use.
This example shows the `dt-api cells()` method being used to select the hidden columns and constructing a table of the data. You could refine the selector to select only certain columns, or show all columns, etc.
]]></info>
</dt-example>

View File

@@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-wide" table-class="display nowrap" order="1">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: false
}
} );
} );
]]>
</js>
<title lib="Responsive">Disable child rows</title>
<info><![CDATA[
By default, when Responsive collapses a table, it will show an option for the end user to expand the row, showing the details of the hidden columns in a child row. This can be disabled using the `r-init responsive.details` option and setting it to `false`, as shown in the example below. In this case the hidden data is not directly accessible to the end user.
]]></info>
</dt-example>

View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example order="0">
<title lib="Responsive">Child row control</title>
<info><![CDATA[
When a column is removed from display by Responsive, the data is still available in the table and can be displayed in a DataTables _child row_ (see `dt-api row().child()`). By default Responsive will show child row controls in the first column when the table has been collapsed, allowing the end user to show / hide the information from the hidden columns.
Responsive has a number of options for display of the child rows:
* If child row display is enabled: `r-init responsive.details`
* How the show / hide control is displayed: `r-init responsive.details.type`
* How the child row is rendered: `r-init responsive.details.renderer`
This section shows examples of these options being used.
]]></info>
</dt-example>

View File

@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-details-right" table-class="display nowrap" order="3">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
type: 'column',
target: -1
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: -1
} ]
} );
} );
]]>
</js>
<title lib="Responsive">Column control - right</title>
<info><![CDATA[
When using the `column` child row control type, Responsive has the ability to use any column or element as the show / hide control for the row details. This is provided through the `r-init responsive.details.target` option, which can be either a column index, or a jQuery selector.
This example shows the last column in the table being used as the control column.
]]></info>
</dt-example>

View File

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-details" table-class="display nowrap" order="4">
<css lib="datatables responsive" />
<js lib="jquery datatables responsive">
<![CDATA[
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
} );
} );
]]>
</js>
<title lib="Responsive">Whole row child row control</title>
<info><![CDATA[
When using the `column` details type in Responsive the `r-init responsive.details.target` option provides the ability to control what element is used to show / hide the child rows when the table is collapsed.
This example uses the `tr` selector to have the whole row act as the control.
]]></info>
</dt-example>