How to display a single row in a non table form

PaulVickery

I am new to this and am sorry if this is a stupid question as I am teaching myself Javascript / PHP etc.. I am trying to display data for a single row in a non tabular way but still want to use the Editor to edit the data (from this one row). I have downloaded an example from the Editor generator and can retrieve a single row in a new page by double clicking on a row in a multi row table by requesting the new page by Id (using Alan's suggestion 2 in https://datatables.net/forums/discussion/46125/view-a-single-record . See below

->where( function ( $q ) use ( $task_id ) {
$q->where( 'tasks.id', $task_id,'=' );
} )

The result is a single row in tabular form (all good) which can also be edited. However, as one of the fields can hold a large amount of text I currently limit the displayed text so that on a multi row page, rows are limited to one line (no wrapping). This means that a lot of data is not displayed. I want to be able to be able to treat this new "one row" page as non tabular and arrange the data on the page so that all the data can be viewed. (e.g each column of the "one row" data being displayed on a separate row.

I am using a mysql database to store the data.

My current configuration is:

var table = $('#example').DataTable( {
    dom: 'Bfrtip',
    ajax: 'php/table.example.php',

    columns: [
        {
            "data": "reference"
        },
        {
            "data": "summary"
        },
        {
            "data": "detail"
        }
    ],
    select: true,
    lengthChange: false,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]
} );

HTML

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>reference</th>
<th>summary</th>
<th>detail</th>
</tr>
</thead>
</table>

Any help and suggestions would be gratefully received.

allan

The easiest option is to use CSS to override the table layout. For example:

tbody td {
    display: block;
}

For context, a table cell is normally display: table-cell - this CSS makes it a block, i.e. it acts like a default div does.

You can do a lot of clever layout stuff with that approach. This thread has discussion on this topic. Some links no longer work it seems, but perhaps it will help.

The other approach is to use Editor's standalone mode - see this example. That allows for complete control over the layout of the data being edited.

Allan

PaulVickery

Thank you Alan. I will have a go.