Responsive Datatables with Footable-like Behavior

Responsive Datatables with Footable-like Behavior

ComancheComanche Posts: 5Questions: 0Answers: 0
edited July 2013 in Announcements
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
«1

Replies

  • allanallan Posts: 48,908Questions: 1Answers: 7,133 Site admin
    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
  • ComancheComanche Posts: 5Questions: 0Answers: 0
    Updated license to GNU version 2.
  • jvmisc22jvmisc22 Posts: 1Questions: 0Answers: 0
    Please consider releasing this under the Apache 2 / MIT licenses too.
  • ComancheComanche Posts: 5Questions: 0Answers: 0
    Added BSD license.
  • PravesPraves Posts: 1Questions: 0Answers: 0
    edited August 2013
    Thanks Comanche for this plugins. It is awesome on top of DataTables.
  • smodekurtismodekurti Posts: 1Questions: 0Answers: 0
    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();
    }
    });
    });
  • ComancheComanche Posts: 5Questions: 0Answers: 0
    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_mrthe_new_mr Posts: 3Questions: 0Answers: 0
    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?
  • allanallan Posts: 48,908Questions: 1Answers: 7,133 Site admin
    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_mrthe_new_mr Posts: 3Questions: 0Answers: 0
    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]
  • allanallan Posts: 48,908Questions: 1Answers: 7,133 Site admin
    It doesn't look like you've used the `ResponsiveDatatablesHelper` function as shown in the plug-ins read me page.

    Allan
  • the_new_mrthe_new_mr Posts: 3Questions: 0Answers: 0
    Ah I see. My mistake, I should have looked at the ajax-bootstrap example. Thanks for pointing me in the right direction.
  • gbalugbalu Posts: 16Questions: 0Answers: 0
    How to add colvis functionality to responsive datatable? Is it possible to add this functionality? Please help me......
  • allanallan Posts: 48,908Questions: 1Answers: 7,133 Site admin
    @gbalu - What have you tried? Please link to a test case.

    Allan
  • gbalugbalu Posts: 16Questions: 0Answers: 0
    "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
  • allanallan Posts: 48,908Questions: 1Answers: 7,133 Site admin
    @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
  • ryanyorkryanyork Posts: 5Questions: 0Answers: 0
    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
  • allanallan Posts: 48,908Questions: 1Answers: 7,133 Site admin
    @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
  • gbalugbalu Posts: 16Questions: 0Answers: 0
    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.
  • ryanyorkryanyork Posts: 5Questions: 0Answers: 0
    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.
  • gbalugbalu Posts: 16Questions: 0Answers: 0
    Hello ryanyork,
    Could you send sample code for us..

    Thank you
  • gbalugbalu Posts: 16Questions: 0Answers: 0
    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.
  • gbalugbalu Posts: 16Questions: 0Answers: 0
    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.
  • gbalugbalu Posts: 16Questions: 0Answers: 0
    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.
  • allanallan Posts: 48,908Questions: 1Answers: 7,133 Site admin
    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
  • gbalugbalu Posts: 16Questions: 0Answers: 0
    @ryanyork,
    could u send test link......


    Thank you.
  • kpapageorgioukpapageorgiou Posts: 1Questions: 0Answers: 0
    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
  • bejoworkbejowork Posts: 1Questions: 0Answers: 0
    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
  • allanallan Posts: 48,908Questions: 1Answers: 7,133 Site admin
    I'm sure a pull request would be welcomed ;-)

    That's a cool little feature.

    Allan
  • ComancheComanche Posts: 5Questions: 0Answers: 0
    Hello bejowork,

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

    Comanche
This discussion has been closed.