"Grid" mode?
"Grid" mode?
We normally use DataTables to display things in a typical table structure
Object 1
Object 2
Object 3
Object 4
...
In one view, however, we use a grid like:
| Object 1 | Object 2 | Object 3 |
| Object 4 | Object 5 | Object 6 |
Additionally, we do all sorting and filtering through External UI elements.
Currently, I'm doing a few hacks to split the data into 3 row columns and then overriding the row drawing, etc.
Is there a way to do this in a supported way and still have sorting and other stuff like that?
Object 1
Object 2
Object 3
Object 4
...
In one view, however, we use a grid like:
| Object 1 | Object 2 | Object 3 |
| Object 4 | Object 5 | Object 6 |
Additionally, we do all sorting and filtering through External UI elements.
Currently, I'm doing a few hacks to split the data into 3 row columns and then overriding the row drawing, etc.
Is there a way to do this in a supported way and still have sorting and other stuff like that?
This discussion has been closed.
Replies
I'm afraid that the answer to this question is "no" - this isn't possible with DataTables as it stands, and isn't a design goal for the project. DataTables is specifically designed for tables, which have structured data in columns and rows (not just visually). For example with column sorting, this wouldn't be possible with having objects coming in and out. Also if you had a 2x3 grid as above, but only 5 elements, which was then filtered to 4 - it would require the entire table to be recreated.
So I'm afraid that the answer to this is no, nor is DataTables likely to see support for such a structure, due to the use of the TABLE tag. Having said that, presumably the only thing you really want for such a structure is filtering (possibly paging as well), some of the core code from DataTables could be used to help drive that, and it would involve much less overhead that the full DataTables library.
Regards,
Allan
Having said that, it would be perfectly possible to create a new plug-in for DataTables which would hide the table, and create a new grid (using floats rather than a table), based on each redraw of the table - a little bit like what FixedColumns does. This is something we can talk about if you are interested in me developing this plug-in.
Ultimately what would be good would be to entirely separate the data engine from the display engine, so DataTables could be used for any display mechanism at all. To some extent I've been moving the program in this direction already, but it will take a good bit of development to get it all the way there!
Anyone fancy sponsoring a month's development on DataTables? ;-)
Regards,
Allan
I've done this to make a 'google images' style grid of thumbnails.
http://www.datatables.net/forums/discussion/6288/datatables-can-render-icon-view-style/p1
http://www.datatables.net/forums/discussion/5937/how-to-display-results-as-rows-instead-of-columns/p1
I keep the original table (hidden) and use the pagination controls in DataTables, so minimal work to convert to the grid-view
It required surprisingly little code.
1) hide original table's tbody [**edit: originally said to hide table, but my code just hides the tbody - I do this in css, setting a class whose tbody is display:none and adding this class in the HTML table]
2) create a container for grid items
3) add items to grid
in my case I was already returning an image and related wrappings in my table in column 9, so I just had to copy aData[9] into my thumbs container
[code]
"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;
},
[/code]
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:
[code]
/* 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;
}
[/code]
here's a cropped screenshot of the end result. I size my container to fit 10 icons across
and set iDisplayLength to 100.
http://i.imgur.com/vx5Zb.jpg
The user can use all the same search/filter and sorting by columns action as the original table in order to alter the grid contents order.
Thanks for your great contribution. I successfully create a 5x3 grid view with sorting and pagination. It looks like http://www.masterlecture.com/mod/tutorrank/
But I have a problem. The dataTables_scrollbody height continues to expand for every redraw (by clicking next and previous repeatedly). Inside the dataTable function, I add
"sScrollY": "720px",
"bScrollCollapse": true,
Only the first page at first visit can maintain the height 720px. I have checked the jquery.dataTables.js it seems to be involved the following script:
if ( o.oScroll.sY !== "" && o.oScroll.bCollapse )
{
nScrollBody.style.height = _fnStringToCss( o.oScroll.sY );
var iExtra = (o.oScroll.sX !== "" && o.nTable.offsetWidth > nScrollBody.offsetWidth) ?
o.oScroll.iBarWidth : 0;
if ( o.nTable.offsetHeight < nScrollBody.offsetHeight )
{
nScrollBody.style.height = _fnStringToCss( $(o.nTable).height()+iExtra );
}
}
Please help.
Thanks.
Thanks,
Allan
When I turned it back on, it regularly reset the dataTables_scrollBody height to 720px.. how did you hide the table? I wonder if that has something to do with it.
To hide my table I set up a class in css with tbody to display none (only the tbody is hidden) and added this class to my HTML table.
table.no_table {
border-collapse: collapse;
font-size: 12px;
}
table.no_table tbody {
display: none;
}
----------------
However, Allan is right that if you override the css height value, it seems fine - you could do this in fnDrawCallback.
[code]$('div.dataTables_scrollBody').css('height', '720px');[/code]
----------------
I have both sScrollX and Y set and bCollapse true. Never had an issue with the container resizing. perhaps set sScrollX?
I also have autowidth set false. not sure if that comes into play.
[code] "sScrollY": "900px",
"sScrollX": "950px",
"bScrollCollapse": true,
"bAutoWidth": false,
[/code]
I probably never had an issue with my heights simply because my row heights * iDisplayLength were less than my thumbnails' combined height.
If this is the reason, then it's not really a bug and not anything you did wrong, simply that this issue only appears when your original row height is large and you move to a smaller row height by putting more than one thumbnail per line.
Two fixes would seem obvious:
1) override the height on every draw (code in previous post) [this is the easiest fix for you, but I wonder if there will be flickering as the div resizes.. ?]
2) make your original table data take up less row-height - instead of outputting the images, you could output a row of text data (link, name, title, join date, id) then combine them together to create the thumbnail div on the client side.