0

使用数据表，我可以在一行中显示所有必需的信息。由于空间限制，我希望在同一行的另一列（名称）下显示一列（评论）

.

当前的：

行 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>
4

2 回答 2

1

谢谢@Beetroot-甜菜根

我已经设法调整我的后端服务以适当地呈现而不是通过 JavaScript 找到一种方法 - 因为该解决方案似乎很复杂，并且要求它在所有浏览器中工作

于 2013-04-02T08:00:45.797 回答
-1

通过使用 colspan 我们可以拆分 td 并使用 width 我们可以对齐表格..

 <table width="100%">
    <tr><td width="50%">td1</td><td width="50%">td2</td>
    <td colspan="2">td1&2</td></tr>
    </table>
于 2013-03-26T07:03:30.047 回答