问题描述:

Using datatable I am able to display all required information in a single row.

Due to space constraints I wish to display one of the column (comment) under another column (name) in the same row

.

Current:

Row1 Column1 | Row1 column2 | Row1 column3


Row2 Column1 | Row2 column2 | Row2 column3


Row3 Column1 | Row3 column2 | Row3 column3


.

Required:

Row1 Column1 | Row1 column2

Row1 column3 |


Row2 Column1 | Row2 column2

Row2 column3 |


Row3 Column1 | Row3 column2

Row3 column3 |


Code

dishTable = $('#dishtable').dataTable({

//"bJQueryUI": true,

// "sPaginationType": "full_numbers",

// "iDisplayLength": 7,

"sScrollY": "80%",

"sScrollX": "100%",

"bPaginate": false,

"sAjaxSource": "amsrequestprocessor?action=amsretrieveorder&source=ams",

..........

"aoColumns": [

{ "sTitle": "SNo", "sClass":"dish_ID", "mDataProp": "sno" },

{ "sTitle": "Name", "sClass":"d_name", "mDataProp": "dishname" },

{ "sTitle": "List-Price", "sClass":"dish_per_price", "mDataProp": "price" },

{ "sTitle": "Bill-Price", "sClass":"dish_per_billprice", "mDataProp": "billprice" },

{ "sTitle": "Qty", "sClass":"dish_qty", "mDataProp": "qty" },

{ "sTitle": "Total", "sClass":"dish_tot", "mDataProp": "total" },

{ "sTitle": "Customization", "sClass":"dish_comment", "mDataProp": "comment" },

{ "mDataProp": null,"sClass":"rowEdit","bSortable": false},

{ "sClass":"rowDel", "mDataProp": null,"bSortable": false},

{ "sClass":"rowId", "bSortable": false, "mDataProp": "id"}

]

});

}

HTML:

<table id="dishtable" class="display">

<thead>

<tr>

<th class="sno">SNo</th>

<th class="d_name">Name</th>

<th>List-Price</th>

<th>Bill-Price</th>

<th>Qty</th>

<!-- <th>State</th> -->

<th>Total</th>

<th>Customizations</th>

<th width=16px height=16px></th>

<th width=16px height=16px></th>

<th class="rowId"></th>

</tr>

</thead>

<tbody>

</tbody>

</table>

网友答案:

Thanks @Beetroot-Beetroot

I have managed to tweak my backend service to render appropriately than to find a way through JavaScript - As the solution seems to be complex and more demanding to make it work in all the browsers

网友答案:

By using colspan we can split the td and using width we can align the table..

 <table width="100%">
    <tr><td width="50%">td1</td><td width="50%">td2</td>
    <td colspan="2">td1&2</td></tr>
    </table>
相关阅读:
Top