PageResize: Working with server-side processing

DD-89 https://datatables.net/forums/discussion/49057/page-resize-and-server-side-processing-initial-draw#latest
4 years ago · 5431d8fa29
parent 26791eba56
commit 5431d8fa29
2 changed files with 125 additions and 1 deletions
--- a/features/pageResize/dataTables.pageResize.js
+++ b/features/pageResize/dataTables.pageResize.js
@ -171,7 +171,7 @@ $.fn.dataTable.PageResize = PageResize;
 $.fn.DataTable.PageResize = PageResize;

 // Automatic initialisation listener
-$(document).on( 'init.dt', function ( e, settings ) {
+$(document).on( 'preInit.dt', function ( e, settings ) {
 	if ( e.namespace !== 'dt' ) {
 		return;
 	}
--- a/features/pageResize/serverSide.html
+++ b/features/pageResize/serverSide.html
@ -0,0 +1,124 @@
+<!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.6/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.24/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>