Skip to content
Snippets Groups Projects
Select Git revision
  • d2f37ebe4d4d87d1a8af30aa624f6134150e2360
  • master default protected
  • devel
  • hruska-feature-clients-api
  • malostik-#5066-deduplicate-idea-ids
  • warden-postgresql-port
  • hruska-feature-#6799-filter-keys
  • hruska-feature-5066-duplicateIdeaID
  • warden-client-3.0-beta3
  • warden-server-3.0-beta3
  • warden-client-2.2-final
  • warden-server-2.2-final
  • warden-client-3.0-beta2
  • warden-server-3.0-beta2
  • warden-client-2.2
  • warden-server-2.2-patch3
  • warden-client-3.0-beta1
  • warden-server-3.0-beta1
  • warden-server-2.2-patch1
  • warden-client-3.0-beta0
  • warden-server-3.0-beta0
  • warden-server-2.2
  • warden-server-2.1-patch1
  • warden-client-2.1
  • warden-server-2.1
  • warden-server-2.1-beta6
  • warden-server-2.1-beta5
  • warden-server-2.1-beta4
28 results

form.html

Blame
  • form.html 24.00 KiB
    <!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;
    			
    			$(document).ready(function() {
    				$('#form').submit( function() {
    					var sData = oTable.$('input').serialize();
    					alert( "The following data would have been submitted to the server: \n\n"+sData );
    					return false;
    				} );
    				
    				oTable = $('#example').dataTable();
    			} );
    		</script>
    	</head>
    	<body id="dt_example">
    		<div id="container">
    			<div class="full_width big">
    				DataTables with form elements example
    			</div>
    			
    			<h1>Preamble</h1>
    			<p>The following example shows how form elements can be used within a DataTables enhanced table. The trick here is that DataTables does not include the DOM elements which are not currently being displayed, therefore you need to add a submit event handler to gather together all of the input elements from the table, and then use the handy jQuery <b>serialize()</b> function to string together the data. It can then be posted to the server as you wish.</p>
    			
    			<h1>Live example</h1>
    			<div id="demo">
    				<form id="form">
    					<div style="text-align:right; padding-bottom:1em;">
    						<button type="submit">Submit form</button>
    					</div>
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    	<thead>
    		<tr>
    			<th>Rendering engine</th>
    			<th>Browser</th>
    			<th>Platform(s)</th>
    			<th>Engine version</th>
    			<th>CSS grade</th>
    			<th>Check</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr class="gradeX">
    			<td>Trident</td>
    			<td>Internet
    				 Explorer 4.0</td>
    			<td>Win 95+</td>
    			<td class="center">4</td>
    			<td class="center">X</td>
    			<td class="center"><input type="checkbox" name="check1" value="1"></td>
    		</tr>
    		<tr class="gradeC">
    			<td>Trident</td>
    			<td>Internet
    				 Explorer 5.0</td>
    			<td>Win 95+</td>
    			<td class="center">5</td>
    			<td class="center">C</td>