jQsimpleXmpl.html

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Simple jQuery-DataTable Example</title>
	<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico" />
	<title>Simple jQuery-DataTable Example</title>
	<style type="text/css" title="currentStyle">
		@import "/css/demo_page.css";
		@import "/css/demo_table.css";
	</style>
	<script type="text/javascript" language="javascript" src="/js/jquery.js"></script>
	<script type="text/javascript" language="javascript" src="/js/jquery.dataTables.js"></script>
	<script type="text/javascript" charset="utf-8">
		/* Global var for counter */
		var giCount = 1;
		
		$(document).ready(function() {
			$('#example').dataTable();
		} );
		
		function fnClickAddRow() {
			$('#example').dataTable().fnAddData( [
				giCount+".1",
				giCount+".2",
				giCount+".3",
				giCount+".4" ] );
			
			giCount++;
		}
	</script>
</head>
</head>
<body id="dt_example">
		<div id="container">
			<div class="full_width big">
				<i>DataTables</i> add row example
			</div>
 
			<h1>Preamble</h1>
			<p><i>DataTables</i> adding rows in DataTables is done by assigning the DataTables jQuery object to a variable when initialising it, and then using it's API methods to add a new row. Deleting rows can be done in a similar manner.</p>
			
			<h1>Live example</h1>
			<p><a href="javascript:void(0);" onclick="fnClickAddRow();">Click to add a new row</a></p>
			
			<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th>Column 1</th>
			<th>Column 2</th>
			<th>Column 3</th>
			<th>Column 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>allan</td>
			<td>allan</td>
			<td>allan</td>
			<td>allan</td>
		</tr>
	</tbody>
</table>
			</div>
			<div class="spacer"></div>
			
			
			<h1>Initialisation code</h1>
			<pre>/* Global var for counter */
var giCount = 1;
 
$(document).ready(function() {
	$('#example').dataTable();
} );
 
function fnClickAddRow() {
	$('#example').dataTable().fnAddData( [
		giCount+".1",
		giCount+".2",
		giCount+".3",
		giCount+".4" ] );
	
	giCount++;
}</pre>
</div>
</body>
</html>