<!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>