grid view mode for datatables?

redsunset

I would like to create a grid view mentioned in this thread: https://datatables.net/forums/discussion/comment/26107/#Comment_26107

preview: http://i.imgur.com/vx5Zb.jpg

The mod code comes from @fbas :

    "fnPreDrawCallback": function (oSettings) {
    // create a thumbs container if it doesn't exist. put it in the dataTables_scrollbody div
    if ($('#thumbs_container').length < 1) $('.dataTables_scrollbody').append("");

    // clear out the thumbs container
    $('#thumbs_container').html('');

    return true;
    },
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    $('#thumbs_container').append(aData[9]);

    return nRow;
    },


    here's a sample of one of my "thumbnails"
    [code]

    [/code]

    I use fancybox to manage popup window (which is a larger view of the image with a few attributes displayed as well).

    using this css:

    /* img thumbnail container and items */
    #thumbs_container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    }

    .thumb_item {
    display: block;
    float: left;
    padding: 0px;
    margin: 10px;

    height: 70px;
    width: 70px;
    }

    .thumb_item img {
    border: 1px solid #333;
    }

    a.thumb_item:hover img, a.thumb_item:active img{
    border-color: #006;
    }

It seems like there are some parts missing or some parts that needs to be changed. Copy & paste do not get me the results shown in the pictzre. What do I have to edit and change. And what do I have to add to those code snippets? Do I have to add a div with id="#thumbs_container" and a div with class=".thumb_item" to the html code? If yes how and where? Do I need to change any of the id or class names?
I also searched in the html page source code for a class called "dataTables_scrollbody" but I could not find any.

Thank you in advance!

kthorngren

There is a lot going on with that thread and code to simply look at to debug. Looks like in the thread the code uses scrollX and scrollY. Did you enable those in your Datatable init code?

In order for us to help you debug we will need a test case to work with. Please post a link to your page or a test case replicating the issue so we can help and offer suggestions. A test case we can work with would be better.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

redsunset

thank you for your help. here is a test case: http://live.datatables.net/ludowela/1/edit
I would prefer a solution where scrollX and scrollY is not used. But anyway I tried it and it is not working with or without scrollX or scrollY

kthorngren

I would prefer a solution where scrollX and scrollY is not used.

Enabling one or both of these is what creates the .dataTables_scrollbody div tag. The example seems to be made from Datatables 1.9. Inspecting the 1.10.x Datatables table the case of the class name has changed to .dataTables_scrollBody. I updated you test case a bit.
http://live.datatables.net/roferewi/3/edit

Its a basic test case. You will need to update it to display exactly the data in the way you want. Hopefully it will get you started.

Changes I made:
- Changed the options to use current DT 1.10 naming. The 1.9 to 1.0 Conversion Chart provides more info.
- Reformatted the code to make it easier to read.
- Changed the $('.dataTables_scrollBody').append(""); to use the proper case and to append a simple div for the #thumbs_container container.
- Move the return nRow; outside of the if statement in rowCallback

Looks like searching the table and paging both work.

Kevin

redsunset

thank you very much! One problem left:

If I change $('#thumbs_container').append(data[2]); to $('#thumbs_container').append("test"); it is working great but it seems like that data[2] is not holding any data.

I am getting the table data with an ajax call like:

 "ajax": "data-mtgstandbuylist.php?job=get_cards&xyz="+xyz+"&abc="+abc+"&abc2="+abc2+"&abc3="+abc3,
     "columns": [
       { "data": "super1" },
       { "data": "super2",   "sClass": "cardname" },
       { "data": "super3" },
       { "data": "super4"},
       { "data": "super5", "sClass": "integer2"},
       { "data": "super6", "sClass": "integer"},
       { "data": "super7", "sClass": "integer"},
       { "data": "super8"},
       { "data": "super9"},
       { "data": "super10" },
       { "data": "super11" }
     ],

do I have to add something to get the data of the third column?

kthorngren

Your data is object based not array based. So you would access the third column with data.super3 instead of data[2].

Kevin

redsunset

oh god thank you so much! I was mentally blocked