Bootstrap v3.3.6 Update
This commit is contained in:
David Miller
@@ -13,7 +13,6 @@ $(document).ready(function() {
|
||||
{ "data": "name" },
|
||||
{ "data": "position" },
|
||||
{ "data": "office" },
|
||||
{ "data": "age" },
|
||||
{ "data": "start_date" },
|
||||
{ "data": "salary" },
|
||||
{ "data": "extn" }
|
||||
@@ -47,7 +46,7 @@ Additionally, there are three special class names:
|
||||
|
||||
Please [refer to the Responsive manual](//datatables.net/extensions/responsive/) for further details of these options.
|
||||
|
||||
This example shows the `salary` column visible on a desktop only - `office` and `age` require a tablet, while the `position` column requires a phone in landscape or larger. The `name` column is always visible and the `start date` is never visible.
|
||||
This example shows the `salary` column visible on a desktop only - `office` requires a tablet, while the `position` column requires a phone in landscape or larger. The `name` column is always visible and the `start date` is never visible.
|
||||
|
||||
This can be useful if you wish to change the format of the data shown on different devices, for example using a combination of `mobile` and `not-mobile` on two different columns would allow information to be formatted suitable for each device type.
|
||||
|
||||
@@ -61,7 +60,6 @@ This can be useful if you wish to change the format of the data shown on differe
|
||||
<th class="all">Name</th>
|
||||
<th class="min-phone-l">Position</th>
|
||||
<th class="min-tablet">Office</th>
|
||||
<th class="min-tablet">Age</th>
|
||||
<th class="never">Start date</th>
|
||||
<th class="desktop">Salary</th>
|
||||
<th class="none">Extn.</th>
|
||||
@@ -73,7 +71,6 @@ This can be useful if you wish to change the format of the data shown on differe
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
position: relative;
|
||||
min-height: 41px;
|
||||
}
|
||||
span {
|
||||
th span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -46,7 +46,7 @@ This example shows how Responsive can be used with _complex headers_ (i.e. heade
|
||||
|
||||
We use jQuery to find the header cells which have a `colspan` attribute and wrap their contents in a `-tag span` tag. That `-tag span` is then set to `position: absolute;` using `text-overflow: ellipsis`. The result is that the text of the `colspan` cell will reduce automatically to fit the available area based on the contents of the column cells below it.
|
||||
|
||||
This functionality is not currently built into Responsive. It likely will be for v1.1.
|
||||
This functionality is not currently built into Responsive. It might be included in future.
|
||||
|
||||
]]></info>
|
||||
|
||||
|
||||
@@ -13,7 +13,6 @@ $(document).ready(function() {
|
||||
{ "data": "name", className: "all" },
|
||||
{ "data": "position", className: "min-phone-l" },
|
||||
{ "data": "office", className: "min-tablet" },
|
||||
{ "data": "age", className: "min-tablet" },
|
||||
{ "data": "start_date", className: "never" },
|
||||
{ "data": "salary", className: "desktop" },
|
||||
{ "data": "extn", className: "none" }
|
||||
@@ -40,7 +39,6 @@ This example exactly matches the functionality of the [class control example](cl
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
@@ -52,7 +50,6 @@ This example exactly matches the functionality of the [class control example](cl
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
<th>Extn.</th>
|
||||
|
||||
@@ -20,7 +20,7 @@ $(document).ready(function() {
|
||||
|
||||
<info>< framework providing the styling. The [DataTables / Bootstrap integration files](//datatables.net/manual/styling/bootstrap) prove seamless integration for DataTables to be used in a Bootstrap page.
|
||||
This example shows DataTables and the Responsive extension being used with the [Bootstrap](http://getbootstrap.com) framework providing the styling. The [DataTables / Bootstrap integration](//datatables.net/manual/styling/bootstrap) prove seamless integration for DataTables to be used in a Bootstrap page.
|
||||
|
||||
Note that the `dt-responsive` class is used to indicate to the extension that it should be enabled on this page, as `responsive` [has special meaning in Bootstrap](http://getbootstrap.com/css/#tables-responsive). The `r-init responsive` option could also be used if required.
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@
|
||||
<![CDATA[
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable();
|
||||
|
||||
new $.fn.dataTable.Responsive( table );
|
||||
var table = $('#example').DataTable( {
|
||||
responsive: true
|
||||
} );
|
||||
} );
|
||||
|
||||
]]>
|
||||
|
||||
@@ -1,13 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<dt-example table-type="html-wide" table-class="tdisplay responsive" order="2">
|
||||
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="2" framework="foundation">
|
||||
|
||||
<css lib="foundation datatables-foundation responsive">
|
||||
table.dataTable th,
|
||||
table.dataTable td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</css>
|
||||
<js lib="jquery datatables responsive datatables-foundation">
|
||||
<css lib="datatables responsive"/>
|
||||
<js lib="jquery datatables responsive">
|
||||
< framework providing the styling. The [DataTables / Foundation integration files](//datatables.net/manual/styling/foundation) prove seamless integration for DataTables to be used in a Foundation page.
|
||||
This example shows DataTables and the Responsive extension being used with the [Foundation](http://foundation.zurb.com) framework providing the styling. The [DataTables / Foundation integration](//datatables.net/manual/styling/foundation) prove seamless integration for DataTables to be used in a Foundation page.
|
||||
|
||||
]]></info>
|
||||
|
||||
|
||||
24
bower_components/datatables-responsive/examples/styling/jqueryui.xml
vendored
Normal file
24
bower_components/datatables-responsive/examples/styling/jqueryui.xml
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="3" framework="jqueryui">
|
||||
|
||||
<css lib="datatables responsive"/>
|
||||
<js lib="jquery datatables responsive">
|
||||
<![CDATA[
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
]]>
|
||||
</js>
|
||||
|
||||
<title lib="Responsive">jQuery UI styling</title>
|
||||
|
||||
<info>< providing the base styling information.
|
||||
|
||||
]]></info>
|
||||
|
||||
</dt-example>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<dt-example table-type="html-wide" table-class="display nowrap" order="3">
|
||||
<dt-example table-type="html-wide" table-class="display responsive nowrap" order="5">
|
||||
|
||||
<css lib="datatables responsive">
|
||||
div.container { max-width: 1200px }
|
||||
@@ -12,8 +12,6 @@ $(document).ready(function() {
|
||||
scrollY: 300,
|
||||
paging: false
|
||||
} );
|
||||
|
||||
new $.fn.dataTable.Responsive( table );
|
||||
} );
|
||||
|
||||
]]>
|
||||
|
||||
Reference in New Issue
Block a user