Using datatables for grid of thumbnails

ianweatherhogg

I'd like my users to be able to switch my datatable from "details view" to "small icons" or "large icons" - where I'd obviously expect to have to provide the markup, but I'd like to keep using the DT sorting, filtering, etc.

Has anyone done this before? Any extensions knocking about?
If not can someone suggest the right approach?

Many thanks,
Ian

glenderson

You can set up dataTables to use a different column for sorting. Something like this below will cause a 3 column table to sort based upon the contents of the 3rd column (zero based index)

$('#example').dataTable( {
  "columns": [
    { "orderData":  2  },
    { "orderData": 2 },
    { "orderData":  2  }
  ]
} );

allan

I'm afraid I'm not entirely clear on how using columns.orderData would address the issue of displaying data in a grid?

To answer the original question - there isn't a built in way of doing this, but if you are happy to put a little bit of work into it, what you could do is use a draw callback (drawCallback or draw) to create the DOM elements for the grid based on the current state of the table. That way the filtering and sorting could be reflected in the grid and it would be updated on each draw (use table.rows( { page: 'current' } ).data() to get the data for the current page in the current order).

Allan

ianweatherhogg

Thanks Allan - yes, we're up for it and will share some code here when we've got it working.

allan

Looking forward to seeing what you cook up. This is something that has been requested a few times as it happens :-)

Allan

glenderson

Based upon the original question, the user would load the dataTables json data via three diffents means, each with a different set of columns / data. Click "details View", get json data with lots of columns, click "small icons", get json data with the sorting column and just small icon image.

In order to sort on the small icon column, use the orderdata from the sorting column.