<commit_before><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
		
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../../media/css/demo_page.css";
			@import "../../media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			var oTable;
			
			/* Formating function for row details */
			function fnFormatDetails ( nTr )
			{
				var aData = oTable.fnGetData( nTr );
				var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
				sOut += '<tr><td>Rendering engine:</td><td>'+aData[2]+' '+aData[5]+'</td></tr>';
				sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
				sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
				sOut += '</table>';
				
				return sOut;
			}
			
			$(document).ready(function() {
				oTable = $('#example').dataTable( {
					"bProcessing": true,
					"bServerSide": true,
					"sAjaxSource": "../examples_support/server_processing_details_col.php",
					"aoColumns": [
						{ "sClass": "center", "bSortable": false },
						null,
						null,
						null,
						{ "sClass": "center" },
						{ "sClass": "center" }
					],
					"aaSorting": [[1, 'asc']],
				} );
				
				$('#example tbody td img').live( 'click', function () {
					var nTr = this.parentNode.parentNode;
					if ( this.src.match('details_close') )
					{
						/* This row is already open - close it */
						this.src = "../examples_support/details_open.png";
						oTable.fnClose( nTr );
					}
					else
					{
						/* Open this row */
						this.src = "../examples_support/details_close.png";
						oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
					}
				} );
			} );
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				<i>DataTables</i> server-side processing example with hidden row information
			</div>
			
			<h1>Preamble</h1>
			<p>This example shows how you might modify the client-side show/hide details rows example for use with DataTables 1.5's server-side processing option.</p>
			
			<h1>Live example</h1>
			<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th width="4%"></th>
			<th width="25%">Rendering engine</th>
			<th width="20%">Browser</th>
			<th width="25%">Platform(s)</th>
			<th width="16%">Engine version</th>
			<th width="10%">CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="5" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th></th>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</tfoot>
</table>
			</div>
			<div class="spacer"></div>
			
			
			<h1>Initialisation code</h1>
			<pre>var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
	var aData = oTable.fnGetData( nTr );
	var sOut = '&lt;table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"&gt;';
	sOut += '&lt;tr&gt;&lt;td&gt;Rendering engine:&lt;/td&gt;&lt;td&gt;'+aData[2]+' '+aData[5]+'&lt;/td&gt;&lt;/tr&gt;';
	sOut += '&lt;tr&gt;&lt;td&gt;Link to source:&lt;/td&gt;&lt;td&gt;Could provide a link here&lt;/td&gt;&lt;/tr&gt;';
	sOut += '&lt;tr&gt;&lt;td&gt;Extra info:&lt;/td&gt;&lt;td&gt;And any further details here (images etc)&lt;/td&gt;&lt;/tr&gt;';
	sOut += '&lt;/table&gt;';
	
	return sOut;
}

$(document).ready(function() {
	oTable = $('#example').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "../examples_support/server_processing_details_col.php",
		"aoColumns": [
			{ "sClass": "center", "bSortable": false },
			null,
			null,
			null,
			{ "sClass": "center" },
			{ "sClass": "center" }
		],
		"aaSorting": [[1, 'asc']],
	} );
	
	$('#example tbody td img').live( 'click', function () {
		var nTr = this.parentNode.parentNode;
		if ( this.src.match('details_close') )
		{
			/* This row is already open - close it */
			this.src = "../examples_support/details_open.png";
			oTable.fnClose( nTr );
		}
		else
		{
			/* Open this row */
			this.src = "../examples_support/details_close.png";
			oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
		}
	} );
} );</pre>
			
			
			<h1>Other examples</h1>
			<h2>Basic initialisation</h2>
			<ul>
				<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
				<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
				<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
				<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
				<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li><commit_msg>Fix: Remove tailing comma for IE6/7<commit_after><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
		
		<title>DataTables example</title>
		<style type="text/css" title="currentStyle">
			@import "../../media/css/demo_page.css";
			@import "../../media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
		<script type="text/javascript" charset="utf-8">
			var oTable;
			
			/* Formating function for row details */
			function fnFormatDetails ( nTr )
			{
				var aData = oTable.fnGetData( nTr );
				var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
				sOut += '<tr><td>Rendering engine:</td><td>'+aData[2]+' '+aData[5]+'</td></tr>';
				sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
				sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
				sOut += '</table>';
				
				return sOut;
			}
			
			$(document).ready(function() {
				oTable = $('#example').dataTable( {
					"bProcessing": true,
					"bServerSide": true,
					"sAjaxSource": "../examples_support/server_processing_details_col.php",
					"aoColumns": [
						{ "sClass": "center", "bSortable": false },
						null,
						null,
						null,
						{ "sClass": "center" },
						{ "sClass": "center" }
					],
					"aaSorting": [[1, 'asc']]
				} );
				
				$('#example tbody td img').live( 'click', function () {
					var nTr = this.parentNode.parentNode;
					if ( this.src.match('details_close') )
					{
						/* This row is already open - close it */
						this.src = "../examples_support/details_open.png";
						oTable.fnClose( nTr );
					}
					else
					{
						/* Open this row */
						this.src = "../examples_support/details_close.png";
						oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
					}
				} );
			} );
		</script>
	</head>
	<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				<i>DataTables</i> server-side processing example with hidden row information
			</div>
			
			<h1>Preamble</h1>
			<p>This example shows how you might modify the client-side show/hide details rows example for use with DataTables 1.5's server-side processing option.</p>
			
			<h1>Live example</h1>
			<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th width="4%"></th>
			<th width="25%">Rendering engine</th>
			<th width="20%">Browser</th>
			<th width="25%">Platform(s)</th>
			<th width="16%">Engine version</th>
			<th width="10%">CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="5" class="dataTables_empty">Loading data from server</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th></th>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</tfoot>
</table>
			</div>
			<div class="spacer"></div>
			
			
			<h1>Initialisation code</h1>
			<pre>var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
	var aData = oTable.fnGetData( nTr );
	var sOut = '&lt;table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"&gt;';
	sOut += '&lt;tr&gt;&lt;td&gt;Rendering engine:&lt;/td&gt;&lt;td&gt;'+aData[2]+' '+aData[5]+'&lt;/td&gt;&lt;/tr&gt;';
	sOut += '&lt;tr&gt;&lt;td&gt;Link to source:&lt;/td&gt;&lt;td&gt;Could provide a link here&lt;/td&gt;&lt;/tr&gt;';
	sOut += '&lt;tr&gt;&lt;td&gt;Extra info:&lt;/td&gt;&lt;td&gt;And any further details here (images etc)&lt;/td&gt;&lt;/tr&gt;';
	sOut += '&lt;/table&gt;';
	
	return sOut;
}

$(document).ready(function() {
	oTable = $('#example').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "../examples_support/server_processing_details_col.php",
		"aoColumns": [
			{ "sClass": "center", "bSortable": false },
			null,
			null,
			null,
			{ "sClass": "center" },
			{ "sClass": "center" }
		],
		"aaSorting": [[1, 'asc']]
	} );
	
	$('#example tbody td img').live( 'click', function () {
		var nTr = this.parentNode.parentNode;
		if ( this.src.match('details_close') )
		{
			/* This row is already open - close it */
			this.src = "../examples_support/details_open.png";
			oTable.fnClose( nTr );
		}
		else
		{
			/* Open this row */
			this.src = "../examples_support/details_close.png";
			oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
		}
	} );
} );</pre>
			
			
			<h1>Other examples</h1>
			<h2>Basic initialisation</h2>
			<ul>
				<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
				<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
				<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
				<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
				<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
{'fraction_non_alphanumeric': 0.212, 'fraction_numerical': 0.009904761904761904, 'mean_word_length': 3.4552397114976667, 'pattern_counts': {'":': 36, '<': 245, '<?xml version=': 0, '>': 245, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6597092', 'n_tokens_mistral': 4523, 'n_tokens_neox': 3817, 'n_words': 728}