<!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" />
		
		<title>DataTables page resize example</title>

		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
		<style type="text/css">
			div.container {
				margin: 0 auto;
				max-width: 980px;
			}

			#resize_wrapper {
				position: relative;
				height: 300px;
				padding: 0.5em 0.5em 1.5em 0.5em;
				border: 1px solid #aaa;
				border-radius: 0.5em;
				background-color: #f9f9f9;
			}

			#resize_handle {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 1.5em;
				border-bottom-right-radius: 0.5em;
				border-bottom-left-radius: 0.5em;
				text-align: center;
				font-size: 0.8em;
				line-height: 1.5em;
				background-color: #4d90fe;
				color: white;
				cursor: pointer;
			}

			table.dataTable th,
			table.dataTable td {
				white-space: nowrap;
			}

			div.dataTables_length {
				display: none;
			}
		</style>

		<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" language="javascript" src="dataTables.pageResize.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready( function () {
				// Resize the demo table container with mouse drag
				var wrapper = $('#resize_wrapper');
				$('#resize_handle').on( 'mousedown', function (e) {
					var mouseStartY = e.pageY;
					var resizeStartHeight = wrapper.height();

					$(document)
						.on( 'mousemove.demo', function (e) {
							var height = resizeStartHeight + (e.pageY - mouseStartY);
							if ( height < 180 ) {
								height = 180;
							}

							wrapper.height( height );
						} )
						.on( 'mouseup.demo', function (e) {
							$(document).off( 'mousemove.demo mouseup.demo' );
						} );

					return false;
				} );

				// DataTables initialisation
				var table = $('#example').DataTable( {
					pageResize: true,
					serverSide: true,
					ajax: "../../../../examples/server_side/scripts/server_processing.php",
				} );
			} );
		</script>
	</head>
	<body>
		<div class="container">
			<div id="resize_wrapper">
				<table id="example" class="display" cellspacing="0" width="100%">
					<thead>
						<tr>
							<th>Name</th>
							<th>Position</th>
							<th>Office</th>
							<th>Age</th>
							<th>Start date</th>
							<th>Salary</th>
						</tr>
					</thead>

					<tfoot>
						<tr>
							<th>Name</th>
							<th>Position</th>
							<th>Office</th>
							<th>Age</th>
							<th>Start date</th>
							<th>Salary</th>
						</tr>
					</tfoot>

					<tbody>
						<tr>
							<th colspan="6">Loading...</th>
						</tr>
					</tbody>
				</table>

				<div id="resize_handle">Click and drag me!</div>
			</div>
			
		</div>
	</body>
</html>