This post is 4th part of a series called Getting Started with Datatable 1.10 .
- DataTable demo (Server side) in Php,Mysql and Ajax
- DataTable (Server side) Custom Column Search
- Datatable Scroller (Server Side)
- DataTable Responsive (Server side)
- Datatable Custom Loader
- Datatable Colvis (Column Visibility Customization)
- DataTable Table tools
- DataTable Custom Search By Tags Input (Server side)
- DataTable Search By Datepicker (Server side)
- Datatable Bulk Delete (Server Side)
- 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.
0 Comments