Responsive Datatables with Footable-like Behavior

Comanche

I've been playing around with the idea of making Datatables responsive. I found the wonderful FooTable and decided to put something together for Datatables that make it behave similarly. Hopefully it helps some of you.

Thanks, Allan, for Datatables and thanks to Brad and Steve for FooTable.

https://github.com/Comanche/datatables-responsive

allan

This is fantastic! Very nicely done and thank you for making it available to everyone! There have been a number of requests for this recently, so I suspect quite a lot of people will find it very useful.

I've added it into the DataTables news feed and I'm sure I'll be linking to it a fair few times in the future!

Just one suggestion - could you add a license to your repo (assuming you want to have it as open source that is!).

Regards,
Allan

Comanche

Updated license to GNU version 2.

jvmisc22

Please consider releasing this under the Apache 2 / MIT licenses too.

Comanche

Added BSD license.

Praves

Thanks Comanche for this plugins. It is awesome on top of DataTables.

smodekurti

Hi Comanche,
Thank you very much for writing this plugin. The features are exactly what I have been searching for several days. Everything works as expected but one small hitch. I wanted to use vertical scrolling using sScrollY value from dataTables. However the table goes out of shape for smaller form-factors (Phone view). For some reason the moment I add sScrollY value, the table stops hiding columns. Here is what I am trying to do, appreciate your help

$(document).ready(function () {
var responsiveHelper = undefined;
var breakpointDefinition = {
tablet: 1024,
phone : 480
};
var tableElement = $('#example');

tableElement.dataTable({
sDom : "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
bSortable:false,
bPaginate:false,
sScrollX: "",
bAutoWidth : false,
aaSorting:[],
bFilter:false,
sScrollY:"200px",
bScrollCollapse:false,
fnPreDrawCallback: function () {
// Initialize the responsive datatables helper once.
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
},
fnRowCallback : function (nRow) {
responsiveHelper.createExpandIcon(nRow);
},
fnDrawCallback : function (oSettings) {
responsiveHelper.respond();
}
});
});

Comanche

When sScrollY is added, three tables are created in order to have the scrollbar: one for the headers, one for the rows and one for the footers. Datatables does not handle the table widths and columns widths for the headers and footer tables it created.

For example, in the non-responsive table with flexible width (https://datatables.net/release-datatables/examples/basic_init/flexible_width.html), if you add sScrollY and resize the window, the table with the rows will have it's width and column widths changed. The other two header and footers table will not.

It may be possible to write javascript to update the two other tables to reflect the changes.

Now the reason why you don't see columns being hid is because when Datatables automatically builds the three tables, the initialization code called from fnPreDrawCallback no longer sees the needed data-hide attributes. If you put the initialization code

[code]
if (!responsiveHelper) {
responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition);
}
[/code]

inside fnDrawCallback, the data-hide attributes will be seen. The reason why the initialization code is put in fnPreDrawCallback in the first place is so that initialization will not be checked on every redraw.

the_new_mr

This is great man! Really nice work.

I'm trying to get it to work by setting the data in JavaScript (as opposed to having the table already defined in the DOM). I have everything working but I'm not sure how to set certain columns as data-hide. Is this possible?

allan

You'd just use a little bit of jQuery after the table has initialised - `$('#example th:eq(2)').attr('data-hide', 'phone,tablet' );` for example.

Allan

the_new_mr

Thanks for that. I'm still learning jQuery so that didn't occur to me straight away. That got the attributes on the columns okay but they don't disappear when the viewport is small.

I'm guessing this is because there are no breakpoints defined. I tried to define them in my call as below but no joy =/

[code]
$('#example').dataTable( {
breakpoints: {
phone: 320,
tablet: 768
},
"aaData": aDataSet,
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center centered-cell" },
{ "sTitle": "Grade", "sClass": "center centered-cell" }
]
} );
[/code]

allan

It doesn't look like you've used the `ResponsiveDatatablesHelper` function as shown in the plug-ins read me page.

Allan

the_new_mr

Ah I see. My mistake, I should have looked at the ajax-bootstrap example. Thanks for pointing me in the right direction.

gbalu

How to add colvis functionality to responsive datatable? Is it possible to add this functionality? Please help me......

allan

@gbalu - What have you tried? Please link to a test case.

Allan

gbalu

"sDom": '<"tbl-tools-searchbox"p<"tbl-tools-searchbox1"CT">fl"<"clear">>,<"table_content"t>,<"widget-bottom"p<"clear">>',
I need to include colvis functionality in responsive datatables.

"sDom": '<"tbl-tools-searchbox"p<"tbl-tools-searchbox1"C">fl"<"clear">>,<"table_content"t>,<"widget-bottom"p<"clear">>',
I included colvis functionality in dom-bootstrap.js but not showing show / hide button

allan

@gbalu - As with all questions in the forum, please link to a test case: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

ryanyork

Allan, here is a test case that I bet is similar to what gBalu is trying, I have been having the same issue.

http://myclassprogress.com/responsive/reports.php

allan

@ryanyork - It took me a good half hour to realise, but you are loading both jQuery and DataTables twice. Any particular reason? ColVis isn't working since you load DataTables, ColVis and then DataTables again. ColVis has attached itself to the first, and the second overwrites the first...

Allan

gbalu

Hello Allan,
here is a test case,
We are able to add "Show / Hide Columns" Functionality, but it is not working properly.
"Show / Hide Columns" Functionality:
* Once we select data, other fields are not working like search, sort and pagination.
* Once we un-check the button, then we are unable to re-check that corresponding button.
* Not working in Responsive mode.
http://sprmarketing.co.in/testcase/datatables-responsive-master/example/dom-bootstrap.html
can you please help us...
Thank you.

ryanyork

That fixed the problem, thanks allan, I was unclear about how to implement the responsive version of dataTables. Since removing the second instance (non-responsive) of dataTables ColVis has worked wonderfully.

@gbalu, I was having the same issue, I went into ColVis.js and commented out lines 856 - 859 and that fixed the problem for me.

gbalu

Hello ryanyork,
Could you send sample code for us..

Thank you

gbalu

Hello Allan,
here is a test case,
Previously you had given the solution that was working fine but here another problem raised again if I click on Show/ Hide button drop down were coming if I Uncheck the buttons table columns are hiding when I click on Unchecked button table columns are coming fine but the check box not showing checked mark, Other than that if I minimize the browser for responsive checking initially + plus symbol was working if I click on Show/ Hide buttons, and uncheck the field that functionality not working its giving so much stress to me please help me out from this problem. Below is the Url for this Test case.
http://sprmarketing.co.in/testcase/datatables-responsive-master/example/dom-bootstrap.html
can you please help us...
Thank you.

gbalu

Hello ryanyork,
here is a test case,
Previously you had given the solution that was working fine but here another problem raised again if I click on Show/ Hide button drop down were coming if I Uncheck the buttons table columns are hiding when I click on Unchecked button table columns are coming fine but the check box not showing checked mark, Other than that if I minimize the browser for responsive checking initially + plus symbol was working if I click on Show/ Hide buttons, and uncheck the field that functionality not working its giving so much stress to me please help me out from this problem. Below is the Url for this Test case.
http://sprmarketing.co.in/testcase/datatables-responsive-master/example/dom-bootstrap.html
can you please help us...
Thank you.

gbalu

Hello ryanyork,
Please check this link
http://sprmarketing.co.in/testcase/datatables-responsive-master/example/dom-bootstrap.html
It is working in chrome fine.... but not working in firefox... Please help us

Thank you.

allan

Thanks for posting a test case. I'm not sure I really understand the point of mixing ColVis with the responsive tables in fairness. For example, if you shrink the windows to have the table show only two columns, what would be the point of using ColVis to show the third.

Having said that, it probably is possible, but it look like you'll need to modify the code in ColVis and / or the responsive code to have it working.

Allan

gbalu

@ryanyork,
could u send test link......


Thank you.

kpapageorgiou

Hello guys,

comanche, I have fallen in love with your responsive table but i must implement it on Yii framework.
This is probably out of topic in this forum, and I'm truly sorry for that, but I'm lost since I'm new in developing web applications and Yii.
Has anyone integrated before these awesome css/js scripts with Yii's Cgridview?

Thank you for your time

bejowork

Hi Comanche,
I was starting to code exactly the same mix of DataTables + FooTable, but you just wrote it, so really thank you. Just a little thing... FooTable accept this syntax:
[code]BBB[/code]
In this case, column header is [code]BBB[/code] while the column is visible, but when the column is collapsed (in phone layout, in this case) the label for the column data is [code]AAA[/code].
Can you integrate this in your code please?

Thanks and really nice job,
Alex

allan

I'm sure a pull request would be welcomed ;-)

That's a cool little feature.

Allan

Comanche

Hello bejowork,

Sorry for the delay but the data-name attribute is now supported.

Comanche