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