Changing standard table layout

christh

Hi

With DT the standard table layout on one column would be

Item1
Item2
Item3
Item4
Item5
Item6

What I'm trying to do is create the layout like this

Item1 Item2 Item3
Item4 Item5 Item6

I've sort of achieved this server side by taking the first 3 items from a query, poping them into 3 columns and then looping back to take items 4 to 6 for the next row etc.

This works perfectly with bServerSide:false however with bServerSide:true it it a little all over the place.

it occurred to me that manipulating the layout serverside may not be the best option and that there may be a better way to achieve the desired layout (CSS, a built in function or addon?).

Hopefully the above is clear enough as I'm not sure what the correct term would be for the layout - any suggestions greatly appreciated.

Thanks

Chris

allan

See: http://datatables.net/forums/discussion/11976/help-and-questions-using-dt-as-a-grid . Basically the answer is no - DataTables can't be used in this way. It might be possible to hack it using server-side processing, but it isn't intended to be used that way!

Allan

christh

Thanks Allan

I managed to hack it on the server side and it works really well with filtering etc.

Basically, with styling it gives me a "business card" type look.

Below is simplified code that may prove to be a useful starting point for somebody at some stage.
[code]
<?php

$sEcho=$_POST['sEcho'];
$filter=$_POST['sSearch'];
$data = array();
$json = array();
$cell = array();
$sLimit = "";

if ( isset( $_POST['iDisplayStart'] ) && $_POST['iDisplayLength'] != '-1' ) {
$sLimit = "LIMIT ".mysql_real_escape_string( $_POST['iDisplayStart'] ).", ".mysql_real_escape_string( $_POST['iDisplayLength'] );
}

$result_total = mysql_query("SELECT * FROM database");
$count_total=mysql_num_rows($result_total);

$result_filter = mysql_query(" SELECT SQL_CALC_FOUND_ROWS * FROM database $sLimit");
$rResultFilterTotal = mysql_query("SELECT FOUND_ROWS()");
$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
$iFilteredTotal = $aResultFilterTotal[0];

$output = '{"sEcho": '.$sEcho.', "iTotalRecords":'.$count_total.', "iTotalDisplayRecords":'.$iFilteredTotal.', "aaData":';

//step-loop through the filtered results - example below is based on 3 horizontal cells
//use +=3 to step through results 3 at a time
for ($count=0; $count <= mysql_numrows($result_filter)-1; $count+=3) {
//loop through the first 3 results...
for ($cell_count=0; $cell_count <= 3; $cell_count++) {
$picture_url = mysql_result($result_filter, $count+$cell_count, "picture_url");
$name = mysql_result($result_filter, $count+$cell_count, "name");
$age = mysql_result($result_filter, $count+$cell_count, "age");
$sex = mysql_result($result_filter, $count+$cell_count, "sex");
//...and put them in an array
$cell[$cell_count] = "

allan

Excellent - thanks for sharing this - I'm sure others will find it very useful.

Out of interest, I presume you've hidden the column headers, since sorting by column is effectively useless here. Although you could use fnSort to allow sorting on abstract items such as name, price etc.

Like it :-)

Allan

christh

Yup, column headers are hidden - I didn't try any sorting but filtering works well.

I'll leave a working example here for as long as I can - very much a work in progress so it's a bit rough and not been checked in IE however it demonstrates the look and the search/filtering and basic concept.

www (dot) forisleofmanjobs (dot) com/grid_layout_example.php

MikeS

Hey christh, that's very cool.

Thanks for the sample. Hopefully this will give Allan (and/or others) a starting point to allow dataTables to display grid layouts. I like the "card" look and was hoping to do something like this for "contacts".

I can verify that it seems to be working in IE9.

allan

I don't think DataTables itself will ever directly support this on the client-side since it would involve either recreating the DOM on every draw (which is what server-side processing does), or manipulating the DOM, which would be horribly expensive (computationally) to move cells between rows. At least not in its current form!

However, this is a nice way of leveraging that unique aspect of server-side processing to display information in this way.

Allan