mirror of
https://github.com/billz/raspap-webgui.git
synced 2025-03-01 10:31:47 +00:00
Added assets + dependencies
This commit is contained in:
38
bower_components/datatables-responsive/examples/child-rows/column-control.xml
vendored
Executable file
38
bower_components/datatables-responsive/examples/child-rows/column-control.xml
vendored
Executable 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>
|
||||
|
50
bower_components/datatables-responsive/examples/child-rows/custom-renderer.xml
vendored
Executable file
50
bower_components/datatables-responsive/examples/child-rows/custom-renderer.xml
vendored
Executable 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>
|
||||
|
28
bower_components/datatables-responsive/examples/child-rows/disable-child-rows.xml
vendored
Executable file
28
bower_components/datatables-responsive/examples/child-rows/disable-child-rows.xml
vendored
Executable 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>
|
||||
|
20
bower_components/datatables-responsive/examples/child-rows/index.xml
vendored
Executable file
20
bower_components/datatables-responsive/examples/child-rows/index.xml
vendored
Executable 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>
|
38
bower_components/datatables-responsive/examples/child-rows/right-column.xml
vendored
Executable file
38
bower_components/datatables-responsive/examples/child-rows/right-column.xml
vendored
Executable 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>
|
||||
|
39
bower_components/datatables-responsive/examples/child-rows/whole-row-control.xml
vendored
Executable file
39
bower_components/datatables-responsive/examples/child-rows/whole-row-control.xml
vendored
Executable 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>
|
||||
|
Reference in New Issue
Block a user