This post is 4th 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)

Today I will explain how can we make a datatable responsive. If you not aware about responsive design! Please make a visit to Wikipedia, Responsive web design. Meanwhile I have also prepared a demo. Try to open it in different browser on mobile, tablet or desktop.Datatable itself change/break its viewport according to device screen width.

Before proceed you may visit my first post about datatable where I have shown how to initialize datatable.js with server side json data.

For responsive datatable I have added two assets dataTables.responsive.css and dataTables.responsive.js

1
2
<link rel="stylesheet" type="text/css" href="css/dataTables.responsive.css">
<script type="text/javascript" language="javascript" src="js/dataTables.responsive.min.js"></script>

you can enable responsive in your existing datatable by ” responsive: true “.

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

Now if you want to customize column details style or markup, you have to call responsive.details.renderer api. By default it will create a ul/li list. Lets change ul-li by

tag.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
$(document).ready(function() {
   var dataTable =  $('#employee-grid').DataTable( {
        responsive: {
        details: {
            renderer: function ( api, rowIdx ) {
            var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
                var header = $( api.column( cell.column ).header() );
                return  '<p style="color:#00A">'+header.text()+' : '+api.cell( cell ).data()+'</p>';  // changing details mark up.
            } ).toArray().join('');
 
            return data ?    $('<table/>').append( data ) :    false;
            }
        }
        },
    processing: true,
    serverSide: true,
    ajax: "employee-grid-data.php", // json datasource
    } );
} );

You can also define your own break point for your datatable by responsive.breakpoints api.

My server side code is remain same as my first post about datatable. I just added some extra fields in “employee” table.
Just download full code from below and post your feedback in comment section.