Multiple Column Data Distribution on Datatable

vinhtvu2

Is there any way we can distribute the datatable into multiple rows without applying multiple tables?

Right now, I have one data table listing an employee directory. When the name is clicked, it drop into a child item with more information about that employee and picture, in a business card format with a button for VCF download.

Everything is working great!

The management team would prefer a more simplistic view, and would like three columns of smaller business card style layout.

Something like this:
https://az158878.vo.msecnd.net/marketing/Partner_21474839629/Product_42949676365/Asset_ea018bef-0b4e-46df-9fe7-3f8eec180843/ss1512x384.png

Is there anyway to populate this using Datatables, without creating three separate datatables, and linking the display together?

allan

I'm sorry to say not. DataTables is a row / column table display library, not a grid library. The repeating aspect in DataTables are the rows, not the cells, so this kind of layout isn't possible.

Allan

vinhtvu2

What if it fills the data object into a column, with a counter so that it only fills three, then go onto the next row and continue to fill the data from the table?

The data object would be a fixed function to display certain items?

I am trying to write it from scratch, but then I'd have to write the functions that are already available in DataTables from scratch as well like the pagination and server side processings.

allan

Yes you could write the data for three elements into a single row, and then display them as such. But paging, filtering etc wouldn't work as expected since it is row based.

I'm afraid DataTables just is not designed to work like that.

Allan

vinhtvu2

I think adding this feature to Datatables would be a great addition!

People could use this to display an inventory with picture with pagination and search, almost useable as an inventory listing to sell things for an E commerce page.

I'll try to see if I can get it working. Should be able to just set a variable so that if it's normally 1, then the pagination and search leave it alone. But when change to 2, or 3, or even 5 columns. The pagination or drop down display would just skips however many or multiply before loading.

Thanks for all the help so far! This plug in is amazing and saved me so much time already.

vinhtvu2

For anyone else looking to do this, I found this discussion here:
http://datatables.net/forums/discussion/6711/grid-mode

And here:
http://www.datatables.net/forums/discussion/5937/how-to-display-results-as-rows-instead-of-columns/p1

Will definitely try to put those together. Should work how I want it to. Thanks!

allan

Yes it would be a good additional, but to implement t fully and correctly would be a ground up write for the software, so it isn't likely to be included in DataTables core.

Allan

vinhtvu2

I can get the tbody to now show, and leave the column names and my search query and selection drop down working, but I cant seem to get anything displayed.

Can you point me to an example of serverside code to display any random table?

Where is the data stored locally when you're using server side processing?

When the page paint, it shows 15 of 784 items showing, but doesn't actually show the 15 items... which is because I hide them in the tbody.

Here is my table initiation:

   var table = $('#Employee_Directory').DataTable( {
        "processing": true,
        "bPaginate": true,
        "serverSide": true,
        "lengthMenu": [ [15, 30, 45, -1], [15, 30, 45, "All"] ],
        searchHighlight: true,
        "ajax": {
            "url": "../directory/get_employee.php",
            "type": "POST"
            },
        "columns": 
        [
            {"data":           null,    "defaultContent": '' , "orderable": false, },
            {"data":  "LastName"},
            { "data": "FirstName" },
            {"data":  "Department",    "defaultContent": '', "orderable": false, }
        ],
        "order": [[1, 'asc']]
        } );

I wrote a separate function to display the person in a separate table, but where do I call the data from?

function format ( d ) {
    // `d` is the original data object for the row
    return '<table height=90% width=90% align="center" id="Employee">'+
        '<tr>'+
            '<td rowspan="8"><img class="Employee" style="display:block;" width="100%" height="100%" src="'+d.Picture+'" oncontextmenu="return false" /></td>'+
        '</tr>'+
        '<tr>'+
            '<td>Full Name:</td>'+
            '<td>'+d.DisplayName+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Title:</td>'+
            '<td>'+d.Title+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Email:</td>'+
            '<td>'+d.Email+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Telephone:</td>'+
            '<td>'+d.Telephone+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Fax:</td>'+
            '<td>'+d.Fax+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Office:</td>'+
            '<td>'
            +d.Office+
            '</td>'+
        '</tr>'+
        '<tr>'+
            '<td colspan="2"><center><a href="vcard.php?eID='+d.ID+'"><img style="display:block;" width="40px" src="vcard_download.png"/></a></center></td>'+
        '</tr>'+
    '</table>';
}

vinhtvu2

If I can figure out where the data is located,

I should be able to just write a simple loop function to go through the amount of filtered rows, and call the function to create 3 separate individual tables per row to display things.

But I'm just not sure where these integers are initialize and where the JSON data are stored in an array.

I need: filtered length, total data length, and the data array.

Thanks for any help.

allan

Where is the data stored locally when you're using server side processing?

In DataTables internal cache. You would need to utilise a number of aspects of the settings object that DataTables maintains for every table. In particular look into aiDisplay, aiDisplayMaster and aoData. However, these are internal parameters and accessing them externally is very much not supported. As I keep saying, DataTables is not at all designed to operate this way!

Allan

vinhtvu2

Using things the way it's not designed to operate to further your cause would be innovations right? I'll look into the three component you mentioned and report back.

It's probably not an efficient way to do it, but it should work. I could also switch off server-side processing and when the site queries the PHP, it creates a fixed flat file, then DataTables query that from AJAX source and it wouldn't be server-side, which mean I should be able to use AoColumns and aData[]? I hope not to have to go to that though, but the database we're polling only have about 750 items, so not a big deal eitherway.

More fun!