使用数据表,我可以在一行中显示所有必需的信息。由于空间限制,我希望在同一行的另一列(名称)下显示一列(评论)
.
当前的:
行 1 列 1 | 第 1 行第 2 行 | 行 1 列 3
第 2 行第 1 列 | 第 2 行第 2 列 | 行 2 列 3
第 3 行第 1 列 | 第 3 行第 2 列 | 第 3 行第 3 列
.
必需的:
行 1 列 1 | 行 1 列 2
第 1 行第 3 行 |
第 2 行第 1 列 | 行 2 列 2
第 2 行第 3 列 |
第 3 行第 1 列 | 第 3 行第 2 列
第 3 行第 3 列 |
代码
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>