DataTables presenting with a card view - Page 2

DataTables presenting with a card view

2»

Replies

  • hm123hm123 Posts: 80Questions: 23Answers: 1

    @gyrocode yes that css rule does work, thank you.

    But only with exportOptions { columns: [':visible'], rows: [':visible']} in the code instead of exportOptions: { rows: [':visible']}, which you seem to have given in the example, as it still copies hidden columns to the clipboard.

    I've also implemented a rough fix for the hidden thead that takes up space

    example: https://jsfiddle.net/suwznyaf/

  • bfarkasbfarkas Posts: 181Questions: 48Answers: 0

    This is awesome, and so simple in the scheme of things. Is there an easy way to control which view is shown on page load? i.e. have the table load in card view?

  • kthorngrenkthorngren Posts: 20,465Questions: 26Answers: 4,804

    Looks like you will need to add the calls cards to the table tag. The rowCallback converts to card mode if the table has the class cards.

    Kevin

  • mr.eddymamr.eddyma Posts: 1Questions: 0Answers: 0

    The example is very useful! How can make the card view in center position? Besides, how can set the card view as default mode when the page is loaded? Thanks!

  • kthorngrenkthorngren Posts: 20,465Questions: 26Answers: 4,804

    How can make the card view in center position?

    Remove the float: left from this CSS:

    .cards tbody tr {
       float: left;
       ....
    

    how can set the card view as default mode when the page is loaded?

    Add the class cards to the table tag.

    Kevin

  • gegeongegeon Posts: 3Questions: 0Answers: 0

    Hi everyone, thank you for this topic it's so helpful !!
    However, I am stuck on one thing:
    How can I get the amount of columns to adapt window's width ?
    It sounds simple but unless I refresh the page, my table width doesn't adapt.
    Just like here:
    https://ghsfha.org/datatables_cards_button.html

    But in this example, it works:
    https://web.archive.org/web/20170605170544/azguys.com/datatables/index.html

    What am I missing?

    Thanks you!

  • kthorngrenkthorngren Posts: 20,465Questions: 26Answers: 4,804
    edited January 2021

    @gegeon The table looks like this:

    <table id="register" class="table table-sm table-hover" cellspacing="0">
    

    Try adding style="width:100%" as shown in this example.

    Kevin

  • gegeongegeon Posts: 3Questions: 0Answers: 0
    edited January 2021

    @kthorngren
    Thanks for the prompt reply. I tried but it doesn't work, I tried adding this 100% width to every possible div and to the table but it just doesn't want to react to window resizing.

    Would any of those prevent the inline style from working?

            dom: 'tp',
            processing: true,
            displayLength: 30,
            scrollX: false,
            scrollY:2000,
            scrollCollapse: true,
            info: false,
            lengthChange: false,
            deferRender: true,
            autoWidth: false,
    
  • kthorngrenkthorngren Posts: 20,465Questions: 26Answers: 4,804
    edited January 2021

    @gegeon Your example wasn't updated so I moved your code here:
    http://live.datatables.net/kesehabo/1/edit

    Added style="width:100%" to the table tag and it resizes with the web page. However there is a point where the web page width won't display all the columns so the table overflows. You can use scrollX or the Responsive extension for this.

    Kevin

  • gegeongegeon Posts: 3Questions: 0Answers: 0

    Thank you @kthorngren !!
    The above example wasn't actually my code, just a similar example, but you made me notice that I was using a previous version of css/js datatables files.
    I updated them and now it works fine =)

  • galadrianngaladriann Posts: 1Questions: 0Answers: 0
    edited April 2021

    Hi All,
    Thanks to all for your great tips.. I was able to create my "simple recipe" page where I keep all my recipes :smile:
    I wanted to keep the paging so I changed the datable setup like this, in case anyone may be interested, also moved the search field to the left as I find it more convenient.

     var table = $('#register').DataTable({
                "lengthMenu": [[12, 24, 48, 96], [ 12, 24, 48, 96]], 
                dom: '<"left_filter "f><"right_length "l>rt<"bottom"lp><"clear">',
                // pageLength: -1,
                select: 'single', 
    
  • DA84DA84 Posts: 3Questions: 1Answers: 0

    Hi,

    very new to CSS/styling. How can I make this the default view?

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

    @DA84, just includes the cards class in your table from the start.

  • sakissakis Posts: 1Questions: 0Answers: 0

    Hi everyone,
    congratulations on a great job of presenting data in card view. It really works great!
    I will add some code to improve the project as well.

    How can make the card view in center position?

    Just add into the buttons action function this code $("tbody").toggleClass("row").toggleClass("justify-content-center");

    var table = $('#register').DataTable({
                    dom: 'fBti',
                    pageLength: -1,
                    buttons: [
                        {
                            text: '<i class="fa fa-id-badge fa-fw fa-lg" aria-hidden="true"></i>',
                            className: 'animated bounce',
                            action: function () {
                                // Add
                                $("tbody").toggleClass("row").toggleClass("justify-content-center");
    
                                $("#register").toggleClass("cards");
                                $("#register thead").toggle();
                                $("#card-toggle .fa").toggleClass("fa-table");
                                $("#card-toggle .fa").toggleClass("fa-id-badge");
    

    If you have added class cards in table to make card view the default mode, you have also to add manually the above classes to tbody

    <tbody class="row justify-content-center">
    </tbody>
    

    https://live.datatables.net/mirazamo/1/edit

    Enjoy, thanks!

  • allanallan Posts: 62,082Questions: 1Answers: 10,178 Site admin

    Clever solution with the Bootstrap classes - like it!

    Allan

  • ITAppData@HomeStreet.comITAppData@HomeStreet.com Posts: 54Questions: 13Answers: 2
    edited February 16

    Seems this has stopped working with the new 2.0 release. Seems related to the colgroup that is generated now. I've been poking at it but curious if there is a new clever way to do this with the layout functions?

    For clarification it does work but the width of the cards gets messed up

  • colincolin Posts: 15,191Questions: 1Answers: 2,590

    @ITAppData@HomeStreet.com Are you able to link to a page or create a test case that demonstrates this, please? As you say, there have been a few big changes to the code base, but it would be good to ensure these old edge cases are still possible.
    Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Colin

  • allanallan Posts: 62,082Questions: 1Answers: 10,178 Site admin

    It might be that you need to detach the colgroup element when the table draws. This wasn't a plug-in that we tested before 2.0 dropped I'm afraid.

    Allan

  • kthorngrenkthorngren Posts: 20,465Questions: 26Answers: 4,804

    Here is the last example updated with DT 2.0:
    https://live.datatables.net/mirazamo/18

    It displays the cards in one column no matter the width of the page, ie, not responsive as the original example:
    https://live.datatables.net/mirazamo/1/edit

    Kevin

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10
    edited February 16

    It does seem to be the colgroup tag as @allan suggests, When it's removed the cards display as expected.

  • ITAppData@HomeStreet.comITAppData@HomeStreet.com Posts: 54Questions: 13Answers: 2

    Thanks everyone.

    No worries at all @allan - I didn't really consider this ever an officially supported plugin so it wasn't too surprising.

    A quick and dirty solution to resolve is to detach the colgroup. I do it as so in the initComplete

                initComplete: function () {
                    var api = this.api();
                    var apiTable = $(api.table().node());
                    $('colgroup', apiTable).detach();
                }
    

    Doesn't solve for toggling back and forth and isn't the best option, but it works for the interim

  • allanallan Posts: 62,082Questions: 1Answers: 10,178 Site admin

    Nice one.

    This is actually one of the things that I was to do as first class and supported extension for DataTables in future :)

    Allan

  • bowbow Posts: 4Questions: 1Answers: 0
    edited February 26

    I've read about colgroups and probably should put in... After upgrading to 2.0 every refill of the existing table with data generates one more colgroup at the head of the table (even after .clear() ). Of course several colgroups mess the table appearance. May be it's related somehow though I use the only one plugin: "datatable.net-select".

  • allanallan Posts: 62,082Questions: 1Answers: 10,178 Site admin

    Yes, that was a bug unfortunately. I committed a fix and it will be in DataTables 2.0.1 due for release tomorrow.

    Allan

  • bowbow Posts: 4Questions: 1Answers: 0
    edited February 26

    So nice to hear that, Allan, many thanks! :)

Sign In or Register to comment.