DataTable Responsive (Server side) Part:4

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


<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 “.


$(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.

$(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.

DownloadDemo


  • Jiman Ji

    Hi, its not working on mobile. At least I have expected that only 2-3 column will shown, but all are there with little-little font….unreadable. So its not OK.

  • Jiman Ji

    Because you forgot to put this into the first line:

  • Mariano Alvira

    I get: table id = employee-grid – invalid JSON response…
    I need help since I am an inexperienced programer
    Mariano at gvdnft@yahoo.com

  • Mariano Alvira

    Hello all,

    I was able to figure out why I get an invalid JSON response!

    In the employee-grid-data.php file check the following lines of code:

    // getting total number records without any search
    $sql = “SELECT employee_id”;
    $sql.=” FROM employee1″; //change it to: $sql.=” FROM employee”;
    $query=mysqli_query($conn, $sql) or die(“employee-grid-data.php: get employees”);
    $totalData = mysqli_num_rows($query);
    $totalFiltered = $totalData; // when there is no search parameter then total number rows = total number filtered rows.
    $sql = “SELECT employee_name, employee_salary, employee_position, employee_city, employee_extension, employee_joining_date, employee_age “;
    $sql.=” FROM employee1 WHERE 1=1″; //change it to: $sql.=” FROM employee”;

    There is no table named employee1. It was obviously a ẗypo¨

    Hope it helps some one. This code otherwise is awesome!!!

  • Imran Shah

    Hello Mr. Majumder,
    Could you please provide a demo for DataTable expendable(Server side) where one can retrieve data from MySQL table using PHP and shows only limited values in a row at first place and remaining values should be visible after expand the parent row.
    for example: I have 10 columns in every row of my table but only first 5 are visible on datatable and remaining 5 will be visible after expanding the row.
    Please help me on this.

  • Kevin

    I got this working with using 2.0 https://cdn.datatables.net/responsive/2.0.0/#Files
    I only have 3 columns, but I added 2 more columns in the html but not in the dB, and it is not working when I reduce to 3 columns, I have to make the screen smaller(less wide) for the plus signs to appear. any ideas? tks