"Grid" mode?

tommck

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?

allan

Hi tommch,

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

tommck

well, we're still using a , it's just got 3 data items per row instead of 1. To me, that's not that much different. We're already using DataTables for it, we're just not using filtering and sorting with it yet

allan

It might not seem like much of a conceptual step from what is currently done, but DataTables doesn't rearrange individual columns at all - it would be a _lot_ less work to write a new program to do what you are looking for, that it would be to modify DataTables!

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

tommck

Yes, it would be smart to separate the data and view there... I'll go check the couch and see if I have any money under the cushions :)

fbas

With a few lines of jquery, you can write a new table based on DataTable's that accomplishes your alternate gridding.

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

tommck

Interesting. I thought of doing something similar to support animated page swiping on the iPad.. Food for thought...

fbas

slight correction: in my code I don't use , but just drop in anchors with css specified width and let them fill up the container as needed, so resizing will respond logically.

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.

johnchiu

Hi fbas,

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.

allan

DataTables wasn't really designed to work quite like this (although it is a very clever mod :-) ), so its quite possible you will need a work around for this. What I suspect you might have to do is use fnDrawCallback to modify the height of the scrolling element to what you want it to be on each draw. Or if there is a proper bug in DataTables then of course it should be fixed, but we'd need a test case using a standard configuration.

Thanks,
Allan

fbas

what does it look like if you don't hide the original table? (in console you can turn it back on with $('#searchtable').show(); )

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]

fbas

also curious that it maxes out at 3780px, which is 252px * 15 (max rows per page). 252px is the height of each row of the original table.

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.