Fix: When replacing child row information, detach the element rather than removing which would destroy the event handlers. A remove action will still call $().remove() to clean up any event handlers.

- Thread 38093

.datatables-commit-sync

@@ -1 +1 @@
-5a6f2da4a3e53276070716451263e36290165ce9
+daab3d4ae9b45f31a62693121a52d3663fa3bcf9

examples/advanced_init/column_render.html

@@ -55,6 +55,7 @@ $(document).ready(function() {
 				<p>This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links,
 				assigning colours based on content rules and any other form of text manipulation you require.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/complex_header.html

@@ -50,6 +50,7 @@ $(document).ready(function() {
 				it to apply ordering.</p>
 				<p>The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/defaults.html

@@ -46,6 +46,7 @@ $(document).ready(function() {
 				initialisation object, but in this case you are setting the default for all future initialisations of DataTables.</p>
 				<p>This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/dom_multiple_elements.html

@@ -52,6 +52,7 @@ $(document).ready(function() {
 				should be included only once).</p>
 				<p>This is shown in the demo below where for four key build-in features are duplicated above and below the table.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/dom_toolbar.html

@@ -56,6 +56,7 @@ $(document).ready(function() {
 				"//datatables.net/extensions/buttons">Buttons</a> is a feature plug-in for DataTables that adds buttons into a toolbar for a table (copy to clipboard, save to
 				Excel / PDF, and more).</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/dt_events.html

@@ -54,7 +54,9 @@ $(document).ready(function() {
 				"//datatables.net/reference/event/page"><code class="event" title="DataTables event">page</code></a> events by adding a notification that the event fired to an
 				element on the page to show that they have indeed fired.</p>
 			</div>
-			<div id="demo_info" class="box"></div>
+			<div class="demo-html">
+				<div id="demo_info" class="box"></div>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/events_live.html

@@ -46,6 +46,7 @@ $(document).ready(function() {
 				also uses the DataTables <a href="//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> method to
 				retrieve information about the selected row - the row's data so we can show it in the <code>alert</code> message in this case.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/footer_callback.html

@@ -78,6 +78,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/api/column().footer()"><code class="api" title="DataTables API method">column().footer()</code></a> for writing the value into the
 				footer.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/html5-data-attributes.html

@@ -49,6 +49,7 @@ $(document).ready(function() {
 				has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally, although the last column contains non-numeric data in it,
 				the column will correctly order numerically as the <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric data.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/html5-data-options.html

@@ -48,6 +48,7 @@ $(document).ready(function() {
 				<a href="//datatables.net/reference/option/columns.orderable"><code class="option" title="DataTables initialisation option">columns.orderable</code></a> option on
 				the fifth column below.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" width="100%" data-page-length="25" data-order="[[ 1, &quot;asc&quot; ]]">
 				<thead>
 					<tr>

examples/advanced_init/language_file.html

@@ -44,6 +44,7 @@ $(document).ready(function() {
 				option.</p>
 				<p>The following example shows DataTables reading a German language file which is hosted on the <a href="http://cdn.datatables.net">DataTables CDN</a></p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/length_menu.html

@@ -46,6 +46,7 @@ $(document).ready(function() {
 				</ul>
 				<p>The example below shows a 2D array being used to include a "Show all" records option.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/object_dom_read.html

@@ -63,6 +63,7 @@ $(document).ready(function() {
 </code></pre>
 				<p>Please note that this feature requires DataTables 1.10.3 or newer.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/row_callback.html

@@ -52,6 +52,7 @@ $(document).ready(function() {
 				Note that <a href="//datatables.net/reference/option/columns.createdCell"><code class="option" title=
 				"DataTables initialisation option">columns.createdCell</code></a> could also be used to create exactly the same effect.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/row_grouping.html

@@ -78,6 +78,7 @@ $(document).ready(function() {
 				function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A <code>click</code> event handler is
 				added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/advanced_init/sort_direction_control.html

@@ -59,6 +59,7 @@ $(document).ready(function() {
 				<p>It's worth noting that I don't have a good use case for when you might what to mix such complex ordering behaviour into a single table, but the example shows
 				how these options can be use and therefore applied across all columns.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/ajax/custom_data_flat.html

@@ -60,6 +60,7 @@ $(document).ready(function() {
 				"DataTables initialisation option">ajax.dataSrc</code></a> being used as an empty string. This tells DataTables that the JSON loaded is a plain array, not an
 				object with an array inside it as is the default.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/ajax/custom_data_property.html

@@ -53,6 +53,7 @@ $(document).ready(function() {
 				"string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
 				<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/ajax/deep.html

@@ -66,6 +66,7 @@ $(document).ready(function() {
 }
 </code></pre>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/ajax/defer_render.html

@@ -45,6 +45,7 @@ $(document).ready(function() {
 				<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit
 				significantly from simply enabling this parameter.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/ajax/null_data_source.html

@@ -64,6 +64,7 @@ $(document).ready(function() {
 				"DataTables initialisation option">columns.data</code></a> option for the column has been set to <code>null</code> to indicate that the column has no information
 				that should be obtained data source object.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/ajax/objects.html

@@ -61,6 +61,7 @@ $(document).ready(function() {
 </code></pre>
 				<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/ajax/objects_subarrays.html

@@ -75,6 +75,7 @@ $(document).ready(function() {
 }
 </code></pre>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/ajax/orthogonal-data.html

@@ -66,6 +66,7 @@ $(document).ready(function() {
 }
 </code></pre>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/ajax/simple.html

@@ -56,6 +56,7 @@ $(document).ready(function() {
 </code></pre>
 				<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/add_row.html

@@ -61,7 +61,10 @@ $(document).ready(function() {
 				<p>This example shows a single row being added each time the button below is clicked upon.</p>
 				<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a
 				DataTable.</p>
-			</div><button id="addRow">Add new row</button>
+			</div>
+			<div class="demo-html">
+				<button id="addRow">Add new row</button>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/api_in_init.html

@@ -53,6 +53,7 @@ $(document).ready(function() {
 				<p>It is also worth noting that this same effect could be achieved by attaching a delegated click event after the table has been initialised - but the example
 				shows the use of the API inside the callbacks!</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/counter_columns.html

@@ -57,6 +57,7 @@ $(document).ready(function() {
 				Note that the <code>filter</code> and <code>order</code> options are using in the <a href="//datatables.net/reference/api/column()"><code class="api" title=
 				"DataTables API method">column()</code></a> method to get the nodes in the current order and with the currently applied filter.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/form.html

@@ -52,7 +52,10 @@ $(document).ready(function() {
 				<code>alert()</code> is used to show the information from the form, but an Ajax call to the server with the form data could easily be performed.</p>
 				<p>If you are interested in a complete CRUD editing suit for DataTables have a look at the <a href="//editor.datatables.net">Editor extension</a> which provides
 				simple setup and complete integration with DataTables.</p>
-			</div><button type="submit">Submit form</button>
+			</div>
+			<div class="demo-html">
+				<button type="submit">Submit form</button>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/highlight.html

@@ -56,6 +56,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()</code></a> methods to remove old classes and
 				apply the new highlighted class, respectively.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/multi_filter.html

@@ -72,6 +72,7 @@ $(document).ready(function() {
 				<code>*index*:visible</code> option is used for the column selector to ensure that the <a href="//datatables.net/reference/api/column()"><code class="api" title=
 				"DataTables API method">column()</code></a> method takes into account any hidden columns when selecting the column to act upon.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/multi_filter_select.html

@@ -76,6 +76,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a> is useful to execute code
 				after the data has been loaded.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/regex.html

@@ -69,60 +69,62 @@ $(document).ready(function() {
 				intuitive.</p>
 				<p>This example allows you to "play" with the various searching options that DataTables provides.</p>
 			</div>
-			<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
+			<div class="demo-html">
-				<thead>
+				<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
-					<tr>
+					<thead>
-						<th>Target</th>
+						<tr>
-						<th>Search text</th>
+							<th>Target</th>
-						<th>Treat as regex</th>
+							<th>Search text</th>
-						<th>Use smart search</th>
+							<th>Treat as regex</th>
-					</tr>
+							<th>Use smart search</th>
-				</thead>
+						</tr>
-				<tbody>
+					</thead>
-					<tr id="filter_global">
+					<tbody>
-						<td>Global search</td>
+						<tr id="filter_global">
-						<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
+							<td>Global search</td>
-						<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
+							<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
-						<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
+							<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
-					</tr>
+							<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
-					<tr id="filter_col1" data-column="0">
+						</tr>
-						<td>Column - Name</td>
+						<tr id="filter_col1" data-column="0">
-						<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
+							<td>Column - Name</td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
+							<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
-					</tr>
+							<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
-					<tr id="filter_col2" data-column="1">
+						</tr>
-						<td>Column - Position</td>
+						<tr id="filter_col2" data-column="1">
-						<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
+							<td>Column - Position</td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
+							<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
-					</tr>
+							<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
-					<tr id="filter_col3" data-column="2">
+						</tr>
-						<td>Column - Office</td>
+						<tr id="filter_col3" data-column="2">
-						<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
+							<td>Column - Office</td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
+							<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
-					</tr>
+							<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
-					<tr id="filter_col4" data-column="3">
+						</tr>
-						<td>Column - Age</td>
+						<tr id="filter_col4" data-column="3">
-						<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
+							<td>Column - Age</td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
+							<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
-					</tr>
+							<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
-					<tr id="filter_col5" data-column="4">
+						</tr>
-						<td>Column - Start date</td>
+						<tr id="filter_col5" data-column="4">
-						<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
+							<td>Column - Start date</td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
+							<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
-					</tr>
+							<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
-					<tr id="filter_col6" data-column="5">
+						</tr>
-						<td>Column - Salary</td>
+						<tr id="filter_col6" data-column="5">
-						<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
+							<td>Column - Salary</td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col5_regex"></td>
+							<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked="checked"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col5_regex"></td>
-					</tr>
+							<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked="checked"></td>
-				</tbody>
+						</tr>
-			</table>
+					</tbody>
+				</table>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/row_details.html

@@ -102,6 +102,7 @@ $(document).ready(function() {
 				you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra
 				information to show.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/select_row.html

@@ -48,7 +48,10 @@ $(document).ready(function() {
 				selected rows, but much more complex interactions can easily be developed.</p>
 				<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
 				provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
-			</div><button id="button">Row count</button>
+			</div>
+			<div class="demo-html">
+				<button id="button">Row count</button>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/select_single_row.html

@@ -57,7 +57,10 @@ $(document).ready(function() {
 				reset to the first page).</p>
 				<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
 				provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
-			</div><button id="button">Delete selected row</button>
+			</div>
+			<div class="demo-html">
+				<button id="button">Delete selected row</button>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/api/show_hide.html

@@ -56,10 +56,12 @@ $(document).ready(function() {
 				<p>If you are looking for a more complete column visibility interaction controls, check out the <a href="https://datatables.net/extras/buttons">Buttons extension
 				for DataTables</a> provides a comprehensive module for column visibility control.</p>
 			</div>
-			<div>
+			<div class="demo-html">
-				Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column=
+				<div>
-				"2">Office</a> - <a class="toggle-vis" data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis" data-column=
+					Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column=
-				"5">Salary</a>
+					"2">Office</a> - <a class="toggle-vis" data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis" data-column=
+					"5">Salary</a>
+				</div>
 			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>

examples/api/tabs_and_scrolling.html

@@ -62,6 +62,7 @@ $(document).ready(function() {
 				method and running the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title="DataTables API method">columns.adjust()</code></a> method
 				on them.</p>
 			</div>
+			<div class="demo-html"></div>
 			<div>
 				<ul class="nav nav-tabs" role="tablist">
 					<li class="active">

examples/basic_init/alt_pagination.html

@@ -54,6 +54,7 @@ $(document).ready(function() {
 				be altered through the use of plug-in pagination renderers.</p>
 				<p>The example below shows the <code class="string" title="String">full_numbers</code> type of pagination.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/comma-decimal.html

@@ -50,6 +50,7 @@ $(document).ready(function() {
 				required.</p>
 				<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/complex_header.html

@@ -39,6 +39,7 @@ $(document).ready(function() {
 				"DataTables initialisation option">orderCellsTop</code></a> option can be used to tell DataTables to use the top cell if you prefer.</p>
 				<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/dom.html

@@ -88,6 +88,7 @@ $(document).ready(function() {
 				<p>In the example below, the table information is moved to the top of the table, and all the interaction elements to the bottom, each wrapper in a container
 				<code>div</code>.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/filter_only.html

@@ -40,6 +40,7 @@ $(document).ready(function() {
 				options that can be used is <a href="https://datatables.net/reference/option">available in the DataTables reference</a>.</p>
 				<p>In the following example only the search feature is left enabled (which it is by default).</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/flexible_width.html

@@ -43,6 +43,7 @@ $(document).ready(function() {
 				<p>This example shows a table with <code>width="100%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
 				dynamically.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/hidden_columns.html

@@ -54,6 +54,7 @@ $(document).ready(function() {
 				information for a row entry might used).</p>
 				<p>In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/language.html

@@ -44,6 +44,7 @@ $(document).ready(function() {
 				title="DataTables initialisation option">language</code></a> object to the DataTable constructor.</p>
 				<p>The example above shows a different set of English string being used, rather than the defaults.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/multi_col_sort.html

@@ -61,6 +61,7 @@ $(document).ready(function() {
 				<p>The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied
 				directly to the first and the salary column to the first name column.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/multiple_tables.html

@@ -44,6 +44,7 @@ $(document).ready(function() {
 				<p>The example below shows two tables initialised with a single line of code, through the use of the <code>table.display</code> selector (i.e. select all elements
 				which have the class of <code>table.display</code> (which is suitable in this example, you might wish to use a different selector).</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/scroll_x.html

@@ -46,6 +46,7 @@ $(document).ready(function() {
 				<p>The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of <code>th, td { white-space: nowrap; }</code> is
 				also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display nowrap" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/scroll_xy.html

@@ -43,6 +43,7 @@ $(document).ready(function() {
 				<p>In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and
 				the scrolling accounts for this.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display nowrap" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/scroll_y.html

@@ -47,6 +47,7 @@ $(document).ready(function() {
 				the table if that height is smaller than that given height by the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
 				"DataTables initialisation option">scrollY</code></a>.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/scroll_y_dynamic.html

@@ -43,6 +43,7 @@ $(document).ready(function() {
 				<p>A relatively modern browser is <a href="http://caniuse.com/#feat=viewport-units">required for <code>vh</code> units</a> to operate correctly. IE9+ supports the
 				<code>vh</code> unit and all other evergreen browsers.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/state_save.html

@@ -48,6 +48,7 @@ $(document).ready(function() {
 				<p>The example below simply shows state saving enabled in DataTables with the <a href="//datatables.net/reference/option/stateSave"><code class="option" title=
 				"DataTables initialisation option">stateSave</code></a> option.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/table_sorting.html

@@ -43,6 +43,7 @@ $(document).ready(function() {
 				title="DataTables initialisation option">order</code></a> is a 2D array to allow multi-column ordering to be defined.</p>
 				<p>The table below is ordered (descending) by the Age column.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/basic_init/zero_configuration.html

@@ -38,6 +38,7 @@ $(document).ready(function() {
 				<code>$().DataTable();</code>.</p>
 				<p>Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/data_sources/ajax.html

@@ -45,6 +45,7 @@ $(document).ready(function() {
 				<p>The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the <a href=
 				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/data_sources/dom.html

@@ -39,6 +39,7 @@ $(document).ready(function() {
 				<p>For further and more complex examples of using DataTables with DOM sourced data, please refer to the <a href="../basic_init">basic initialisation</a> and
 				<a href="../advanced_init">advanced</a> examples.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/data_sources/js_array.html

@@ -92,6 +92,7 @@ $(document).ready(function() {
 				based on the <a href="//datatables.net/reference/option/columns.title"><code class="option" title="DataTables initialisation option">columns.title</code></a>
 				configuration option.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" width="100%"></table>
 			<ul class="tabs">
 				<li class="active">Javascript</li>

examples/data_sources/server_side.html

@@ -46,6 +46,7 @@ $(document).ready(function() {
 				<p>This example shows a very simple table, matching the other examples, but in this instance using server-side processing. For further and more complex examples of
 				using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/plug-ins/api.html

@@ -63,7 +63,9 @@ $(document).ready(function() {
 				"//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()</code></a> method and the options for its selectors.</p>
 				<p>For more information about API plug-ins; creating them and their requirements, please refer to the plug-in development documentation.</p>
 			</div>
-			<div id="demo"></div>
+			<div class="demo-html">
+				<div id="demo"></div>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/plug-ins/dom_sort.html

@@ -85,6 +85,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> or <a href=
 				"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> methods.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/plug-ins/range_filtering.html

@@ -62,16 +62,18 @@ $(document).ready(function() {
 				functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not.</p>
 				<p>This example shows a search being performed on the age column in the data, based upon two inputs.</p>
 			</div>
-			<table border="0" cellspacing="5" cellpadding="5">
+			<div class="demo-html">
-				<tr>
+				<table border="0" cellspacing="5" cellpadding="5">
-					<td>Minimum age:</td>
+					<tr>
-					<td><input type="text" id="min" name="min"></td>
+						<td>Minimum age:</td>
-				</tr>
+						<td><input type="text" id="min" name="min"></td>
-				<tr>
+					</tr>
-					<td>Maximum age:</td>
+					<tr>
-					<td><input type="text" id="max" name="max"></td>
+						<td>Maximum age:</td>
-				</tr>
+						<td><input type="text" id="max" name="max"></td>
-			</table>
+					</tr>
+				</table>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/plug-ins/sorting_auto.html

@@ -60,6 +60,7 @@ $(document).ready(function() {
 				<p>This example shows ordering with using an enumerated type.</p>
 				<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/plug-ins/sorting_manual.html

@@ -58,6 +58,7 @@ $(document).ready(function() {
 				<p>This example shows ordering with using an enumerated type.</p>
 				<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/resources/demo.js

@@ -28,9 +28,15 @@ if ( window.$ ) {
 
 		// init html
 		var table = $('<p/>').append( $('table').clone() ).html();
+		var demoHtml = $.trim( $('div.demo-html').html() );
+
+		if ( demoHtml ) {
+			demoHtml = demoHtml+'\n\n';
+		}
+
 		$('div.tabs div.table').append(
 			'<code class="multiline language-html">\t\t\t'+
-				escapeHtml( table )+
+				escapeHtml( demoHtml + table )+
 			'</code>'
 		);
 		//SyntaxHighlighter.highlight({}, $('#display-init-html')[0]);

examples/server_side/custom_vars.html

@@ -54,6 +54,7 @@ $(document).ready(function() {
 				<p>The example below shows server-side processing being used with an extra parameter being sent to the server by using the <code>ajax.data</code> option as a
 				function.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/server_side/defer_loading.html

@@ -48,6 +48,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this
 				data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/server_side/ids.html

@@ -52,6 +52,7 @@ $(document).ready(function() {
 				"https://datatables.net/manual/server-side">server-side processing section of the manual</a> for full details.</p>
 				<p>This example below shows <code>DT_RowId</code> being used to add information to the table. In addition objects are used as the data source for the rows.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/server_side/jsonp.html

@@ -50,6 +50,7 @@ $(document).ready(function() {
 				<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
 				used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/server_side/object_data.html

@@ -51,6 +51,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> property given for each
 				column.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/server_side/pipeline.html

@@ -171,6 +171,7 @@ $(document).ready(function() {
 				<p>Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set,
 				when using server-side processing, is only available at the server.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/server_side/post.html

@@ -58,6 +58,7 @@ $(document).ready(function() {
 				<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
 				used with the <code>type</code> option set to <code class="string" title="String">POST</code> to make a POST request.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/server_side/row_details.html

@@ -113,6 +113,7 @@ $(document).ready(function() {
 				automatically reopen when the table is redrawn, we need to track a unique identifier for each row - in this case the row <code>id</code>. This is required because
 				in server-side processing mode rows are automatically destroyed and recreated on each draw.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/server_side/select_rows.html

@@ -66,6 +66,7 @@ $(document).ready(function() {
 				<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
 				provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/server_side/simple.html

@@ -45,6 +45,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
 				<p>This example shows a very simple table, matching the other client-side processing examples, but in this instance using server-side processing.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/bootstrap.html

@@ -42,6 +42,7 @@ $(document).ready(function() {
 				<p>This integration is done simply by including the DataTables Bootstrap files (CSS and JS) which will set the defaults needed for DataTables to be initialised as
 				normal, as shown in this examples.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/bootstrap4.html

@@ -42,6 +42,7 @@ $(document).ready(function() {
 				<p>These integration libraries are not currently available in the DataTables download builder, but will become so when Bootstrap 4 is released. Until then they
 				need to be included from source.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/cell-border.html

@@ -34,6 +34,7 @@ $(document).ready(function() {
 			<div class="info">
 				<p>This example shows DataTables with just the <code>cell-border</code> class specified, giving a strong delineation between individual cells.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="cell-border" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/compact.html

@@ -35,6 +35,7 @@ $(document).ready(function() {
 				<p>The <code>compact</code> class is used to reduce the amount of white-space the default styling for the DataTable uses, increasing the information density on
 				screen, as shown below.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display compact" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/display.html

@@ -46,6 +46,7 @@ $(document).ready(function() {
 				<p>The <code>display</code> class is a short-cut for specifying the <code>stripe hover order-column row-border</code> as the class name for a table. This is shown
 				in the example below.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/foundation.html

@@ -42,6 +42,7 @@ $(document).ready(function() {
 				<p>This integration is done simply by including the DataTables Foundation files (CSS and JS) which will set the defaults needed for DataTables to be initialised as
 				normal, as shown in this examples.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/hover.html

@@ -35,6 +35,7 @@ $(document).ready(function() {
 				<p>This example shows DataTables with just the <code>hover</code> class specified. This class will instruct DataTables' styling to highlight a row when the mouse
 				is hovered over it.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="hover" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/jqueryUI.html

@@ -45,6 +45,7 @@ $(document).ready(function() {
 				deprecated in DataTables 1.10 and will be removed DataTables 1.11, matching how styling integration is provided for other libraries - a more modular, maintainable
 				and extensible method. The method presented on this page is the method that will be use in future.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/material.html

@@ -48,6 +48,7 @@ $(document).ready(function() {
 				in a Material integration for DataTables and also to estimate the work that would be involved in fully supporting the styling library. As such, the Material design
 				implementation for DataTables can currently only be installed from source and is not available in package managers or the DataTables downloader.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="mdl-data-table" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/no-classes.html

@@ -34,6 +34,7 @@ $(document).ready(function() {
 			<div class="info">
 				<p>This example shows the base DataTables style file being used, with none of the additional feature style classes being used.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/order-column.html

@@ -35,6 +35,7 @@ $(document).ready(function() {
 				<p>This example shows DataTables with just the <code>order-column</code> class specified. Typically you would want to use the <code>stripe</code> feature class in
 				addition to <code>order-column</code> (possibly <code>hover</code> as well), but this example shows just the ordered column highlighting.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="order-column" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/row-border.html

@@ -34,6 +34,7 @@ $(document).ready(function() {
 			<div class="info">
 				<p>This example shows DataTables with just the <code>row-border</code> class specified, which can create a pleasing, minimalist, interface for your tables.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="row-border" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/semanticui.html

@@ -40,6 +40,7 @@ $(document).ready(function() {
 				<p>This example shows DataTables integrated with <a href="http://semantic-ui.com/">Semantic UI</a>. Semantic UI is a comprehensive framework that uses CSS class
 				names like words to create natural language styling library.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="ui celled table" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/stripe.html

@@ -34,6 +34,7 @@ $(document).ready(function() {
 			<div class="info">
 				<p>This example shows DataTables with just the <code>stripe</code> class specified.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="stripe" cellspacing="0" width="100%">
 				<thead>
 					<tr>

examples/styling/uikit.html

@@ -39,6 +39,7 @@ $(document).ready(function() {
 				<p>The DataTables integration with UIKit is still in development and not all elements might work correctly yet. Only once all of DataTables extensions fully
 				support UIKit will the integration be complete and available via the DataTables download builder.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="uk-table uk-table-hover uk-table-striped" cellspacing="0" width="100%">
 				<thead>
 					<tr>

media/js/jquery.dataTables.js

@@ -8148,7 +8148,7 @@
 		addRow( data, klass );
 	
 		if ( row._details ) {
-			row._details.remove();
+			row._details.detach();
 		}
 	
 		row._details = $(rows);

media/js/jquery.dataTables.min.js

@@ -116,7 +116,7 @@ g=0;for(h=e.length;g<h;g++)if(i=e[g],l=i.anCells,null!==i.nTr&&(i.nTr._DT_RowInd
 h.push(oa(b,c)[0]):h.push(N(b,c));return h},1),c=this.rows(-1);c.pop();h.merge(c,b);return c});p("row()",function(a,b){return db(this.rows(a,b))});p("row().data()",function(a){var b=this.context;if(a===k)return b.length&&this.length?b[0].aoData[this[0]]._aData:k;b[0].aoData[this[0]]._aData=a;da(b[0],this[0],"data");return this});p("row().node()",function(){var a=this.context;return a.length&&this.length?a[0].aoData[this[0]].nTr||null:null});p("row.add()",function(a){a instanceof h&&a.length&&(a=a[0]);
 var b=this.iterator("table",function(b){return a.nodeName&&"TR"===a.nodeName.toUpperCase()?oa(b,a)[0]:N(b,a)});return this.row(b[0])});var eb=function(a,b){var c=a.context;if(c.length&&(c=c[0].aoData[b!==k?b:a[0]])&&c._details)c._details.remove(),c._detailsShow=k,c._details=k},Wb=function(a,b){var c=a.context;if(c.length&&a.length){var d=c[0].aoData[a[0]];if(d._details){(d._detailsShow=b)?d._details.insertAfter(d.nTr):d._details.detach();var e=c[0],f=new u(e),g=e.aoData;f.off("draw.dt.DT_details column-visibility.dt.DT_details destroy.dt.DT_details");
 0<D(g,"_details").length&&(f.on("draw.dt.DT_details",function(a,b){e===b&&f.rows({page:"current"}).eq(0).each(function(a){a=g[a];a._detailsShow&&a._details.insertAfter(a.nTr)})}),f.on("column-visibility.dt.DT_details",function(a,b){if(e===b)for(var c,d=ba(b),f=0,h=g.length;f<h;f++)c=g[f],c._details&&c._details.children("td[colspan]").attr("colspan",d)}),f.on("destroy.dt.DT_details",function(a,b){if(e===b)for(var c=0,d=g.length;c<d;c++)g[c]._details&&eb(f,c)}))}}};p("row().child()",function(a,b){var c=
-this.context;if(a===k)return c.length&&this.length?c[0].aoData[this[0]]._details:k;if(!0===a)this.child.show();else if(!1===a)eb(this);else if(c.length&&this.length){var d=c[0],c=c[0].aoData[this[0]],e=[],f=function(a,b){if(h.isArray(a)||a instanceof h)for(var c=0,k=a.length;c<k;c++)f(a[c],b);else a.nodeName&&"tr"===a.nodeName.toLowerCase()?e.push(a):(c=h("<tr><td/></tr>").addClass(b),h("td",c).addClass(b).html(a)[0].colSpan=ba(d),e.push(c[0]))};f(a,b);c._details&&c._details.remove();c._details=h(e);
+this.context;if(a===k)return c.length&&this.length?c[0].aoData[this[0]]._details:k;if(!0===a)this.child.show();else if(!1===a)eb(this);else if(c.length&&this.length){var d=c[0],c=c[0].aoData[this[0]],e=[],f=function(a,b){if(h.isArray(a)||a instanceof h)for(var c=0,k=a.length;c<k;c++)f(a[c],b);else a.nodeName&&"tr"===a.nodeName.toLowerCase()?e.push(a):(c=h("<tr><td/></tr>").addClass(b),h("td",c).addClass(b).html(a)[0].colSpan=ba(d),e.push(c[0]))};f(a,b);c._details&&c._details.detach();c._details=h(e);
 c._detailsShow&&c._details.insertAfter(c.nTr)}return this});p(["row().child.show()","row().child().show()"],function(){Wb(this,!0);return this});p(["row().child.hide()","row().child().hide()"],function(){Wb(this,!1);return this});p(["row().child.remove()","row().child().remove()"],function(){eb(this);return this});p("row().child.isShown()",function(){var a=this.context;return a.length&&this.length?a[0].aoData[this[0]]._detailsShow||!1:!1});var gc=/^([^:]+):(name|visIdx|visible)$/,Xb=function(a,b,
 c,d,e){for(var c=[],d=0,f=e.length;d<f;d++)c.push(B(a,e[d],b));return c};p("columns()",function(a,b){a===k?a="":h.isPlainObject(a)&&(b=a,a="");var b=cb(b),c=this.iterator("table",function(c){var e=a,f=b,g=c.aoColumns,j=D(g,"sName"),i=D(g,"nTh");return bb("column",e,function(a){var b=Qb(a);if(a==="")return X(g.length);if(b!==null)return[b>=0?b:g.length+b];if(typeof a==="function"){var e=Da(c,f);return h.map(g,function(b,f){return a(f,Xb(c,f,0,0,e),i[f])?f:null})}var k=typeof a==="string"?a.match(gc):
 "";if(k)switch(k[2]){case "visIdx":case "visible":b=parseInt(k[1],10);if(b<0){var m=h.map(g,function(a,b){return a.bVisible?b:null});return[m[m.length+b]]}return[$(c,b)];case "name":return h.map(j,function(a,b){return a===k[1]?b:null});default:return[]}if(a.nodeName&&a._DT_CellIndex)return[a._DT_CellIndex.column];b=h(i).filter(a).map(function(){return h.inArray(this,i)}).toArray();if(b.length||!a.nodeName)return b;b=h(a).closest("*[data-dt-column]");return b.length?[b.data("dt-column")]:[]},c,f)},