This post is 11th part of a series called Getting Started with Datatable 1.10 .

  1. DataTable demo (Server side) in Php,Mysql and Ajax
  2. DataTable (Server side) Custom Column Search
  3. Datatable Scroller (Server Side)
  4. DataTable Responsive (Server side)
  5. Datatable Custom Loader
  6. Datatable Colvis (Column Visibility Customization)
  7. DataTable Table tools
  8. DataTable Custom Search By Tags Input (Server side)
  9. DataTable Search By Datepicker (Server side)
  10. Datatable Bulk Delete (Server Side)
  11. Datatable Page Resize (Server Side)

datatable-page-resize

Do you know guys that Datatable has been updated to stable version 1.10.7. So I was going through the datatable blog, where I have found a post about “datatable page resize”. It’s nice a usable feature for better user experience, You just drag the bottom bar and resize the datatable height as you need. On the basis of your datatable height datatable will draw request and fetch needed rows.

In this tutorial I have shown the datatable page resize with server side data. So before moving into details please check out demo here. To generate server side data on you can check first part of this tutorial series.

Recommended: DataTable demo (Server side) in Php,Mysql and Ajax Part:1

First I have modified the markup, use a container for the table. Also append a bar to handle drag operation.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<div id="resize_wrapper">
    <table id="employee-grid"  class="display dataTable" cellspacing="0" style="width:100%;" width="100%" >
        <thead>
            <tr>
                <td>Employee name</td>
                <td>Salary</td>
                <td>Position</td>
                <td>City</td>
                <td>Extension</td>
                <td>Joining date</td>
                <td>Age</td>
            </tr>
        </thead>
    </table>
    <div id="resize_handle">Drag to resize</div>
</div><!--#resize_wrapper-->

Now we need add an additional script for page resize, which can be found here

1
<script type="text/javascript" language="javascript" src="js/dataTables.pageResize.min.js"></script>

Its time to initialize the dataTable as well as page resize.

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
    // initialize datatable with custom parameters
    var dataTable =  $('#employee-grid').DataTable( {
        pageResize: true,  // enable page resize
        processing: true,
        serverSide: true,
        ajax: "employee-grid-data.php", // json datasource
    });
});

As you can see I have added an extra attribute for page resizing.

pageResize: true

Now, we need to configure dragging bar.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
// 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 < 200 ) {
                height = 200;
            }
 
            wrapper.height( height );
        } )
        .on( 'mouseup.demo', function (e) {
            $(document).off( 'mousemove.demo mouseup.demo' );
        } );
 
    return false;
} );

I just copied above code from the blog. As you can see here, first getting the height of the container (ie, #resize_wrapper) div, onmousemove event of the bar (ie, #resize_handle) we are resizing the table. Make sure you have defined a minimum height for resize. At last onmouseup event we need to stop the resizing.

Its cool and easy, isn’t it? As I have previously mentioned I have found it on dataTable blog, so I thought I should post it here. I am eagerly waiting for your next dataTable tutorial request. Feel free to comment your queries below.