Responsive Datatables with Footable-like Behavior
Responsive Datatables with Footable-like Behavior
Comanche
Posts: 5Questions: 0Answers: 0
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
Thanks, Allan, for Datatables and thanks to Brad and Steve for FooTable.
https://github.com/Comanche/datatables-responsive
This discussion has been closed.
Replies
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
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();
}
});
});
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.
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
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
Allan
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
http://myclassprogress.com/responsive/reports.php
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.
@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.
Could you send sample code for us..
Thank you
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.
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.
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.
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
could u send test link......
Thank you.
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
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
That's a cool little feature.
Allan
Sorry for the delay but the data-name attribute is now supported.
Comanche