Examples: Starting work on building up the example set

css/dataTables.responsive.css

@@ -18,6 +18,7 @@ table.dataTable.dtr-inline.collapsed tbody th:first-child:before {
   text-align: center;
   line-height: 14px;
   box-shadow: 0 0 3px #444;
+  box-sizing: content-box;
   content: '+';
   background-color: #31b131;
 }
@@ -50,6 +51,7 @@ table.dataTable.dtr-column tbody th.control:before {
   text-align: center;
   line-height: 14px;
   box-shadow: 0 0 3px #444;
+  box-sizing: content-box;
   content: '+';
   background-color: #31b131;
 }

css/dataTables.responsive.scss

@@ -11,6 +11,7 @@
 	text-align: center;
 	line-height: 14px;
 	box-shadow: 0 0 3px #444;
+	box-sizing: content-box;
 }
 
 @mixin control-open() {

examples/child-rows/disable-child-rows.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html-wide" table-class="display no-wrap" order="2">
+
+<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>
+

examples/child-rows/index.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example order="0">
+
+<title lib="Responsive">Child row control</title>
+
+<info><![CDATA[
+
+
+
+]]></info>
+
+</dt-example>

examples/display-control/index.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example order="0">
+
+<title lib="Responsive">Display control</title>
+
+<info><![CDATA[
+
+
+
+]]></info>
+
+</dt-example>

examples/index.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example order="0">
+
+<title lib="Responsive">Responsive DataTables</title>
+
+<info><![CDATA[
+
+
+
+]]></info>
+
+</dt-example>

examples/initialisation/ajax.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="ajax" table-class="display responsive no-wrap" order="1">
+
+<css lib="datatables responsive">
+	div.container { max-width: 1200px }
+</css>
+<js lib="jquery datatables responsive">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"ajax": "../../../examples/ajax/data/objects.txt",
+		"columns": [
+			{ "data": "name" },
+			{ "data": "position" },
+			{ "data": "office" },
+			{ "data": "extn" },
+			{ "data": "start_date" },
+			{ "data": "salary" }
+		]
+	} );
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Ajax data</title>
+
+<info><![CDATA[
+
+This example shows the Responsive extension working with [Ajax sourced data](//datatables.net/manual/data) in the DataTable. Note that no special initialisation is required. Responsive is enabled by adding the `-string responsive` class to the `-tag table` element.
+
+]]></info>
+
+</dt-example>
+

examples/initialisation/index.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example order="0">
+
+<title lib="Responsive">Initialisation</title>
+
+<info><![CDATA[
+
+
+
+]]></info>
+
+</dt-example>

examples/initialisation/init-option.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html-wide" table-class="display no-wrap" order="2">
+
+<css lib="datatables responsive">
+	div.container { max-width: 1200px }
+</css>
+<js lib="jquery datatables responsive">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable( {
+		responsive: true
+	} );
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Initialisation - option</title>
+
+<info><![CDATA[
+
+The Responsive extension for DataTables can be applied to a DataTable in one of two ways; with a specific class name on the table, or using the DataTables initialisation options. This method shows the latter, with the `r-init responsive` option being set to the boolean value `true`.
+
+The `r-init responsive` option can be given as a boolean value, or as an object with configuration options. If as a boolean, as in this case, the default options are used.
+
+]]></info>
+
+</dt-example>
+

examples/initialisation/simple.xml

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html-wide" table-class="display responsive no-wrap" order="1">
+
+<css lib="datatables responsive">
+	div.container { max-width: 1200px }
+</css>
+<js lib="jquery datatables responsive">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable();
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Initialisation - class name</title>
+
+<info><![CDATA[
+
+The easiest way to initialise the Responsive extension for DataTables is simply to add the class `-string responsive` to the table's class name. When the DataTable is initialised the Responsive extension will automatically enable itself on these tables.
+
+The may also use the class `dt-responsive` to perform the same action, since `responsive` may be used in your stylesheet, or may have some other meaning in a CSS framework being used (for example Bootstrap).
+
+]]></info>
+
+</dt-example>
+

examples/styling/bootstrap.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html-wide" table-class="table table-striped table-hover dt-responsive" order="8">
+
+<css lib="bootstrap datatables-bootstrap responsive">
+	body { font-size: 140% }
+
+	table.dataTable th,
+	table.dataTable td {
+		white-space: nowrap;
+	}
+</css>
+<js lib="jquery datatables responsive datatables-bootstrap">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable(;
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Bootstrap styling</title>
+
+<info><![CDATA[
+
+This example shows DataTables and the Responsive extension being used with the [Bootstrap](http://getbootstrap.com) 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.
+
+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.
+
+]]></info>
+
+</dt-example>
+

examples/styling/foundation.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html-wide" table-class="tdisplay responsive" order="8">
+
+<css lib="foundation datatables-foundation responsive">
+	table.dataTable th,
+	table.dataTable td {
+		white-space: nowrap;
+	}
+</css>
+<js lib="jquery datatables responsive datatables-foundation">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable();
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Foundation styling</title>
+
+<info><![CDATA[
+
+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 files](//datatables.net/manual/styling/foundation) prove seamless integration for DataTables to be used in a Foundation page.
+
+]]></info>
+
+</dt-example>
+

examples/styling/index.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example order="0">
+
+<title lib="Responsive">Styling</title>
+
+<info><![CDATA[
+
+
+
+]]></info>
+
+</dt-example>

make.sh

@@ -23,7 +23,7 @@ js_compress $OUT_DIR/js/dataTables.responsive.js
 
 # Copy and build examples
 rsync -r examples $OUT_DIR
-examples_process $OUT_DIR
+examples_process $OUT_DIR/examples
 
 # Readme
 cp Readme.md $OUT_DIR