grid view mode for datatables?
grid view mode for datatables?
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!
This question has an accepted answers - jump to answer
Answers
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
andscrollY
. 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
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
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 simplediv
for the#thumbs_container
container.- Move the
return nRow;
outside of the if statement inrowCallback
Looks like searching the table and paging both work.
Kevin
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:
do I have to add something to get the data of the third column?
Your data is object based not array based. So you would access the third column with
data.super3
instead ofdata[2]
.Kevin
oh god thank you so much! I was mentally blocked