0

datatableを使用すると、必要なすべての情報を1行に表示できます。スペースの制約により、同じ行の別の列（名前）の下に列（コメント）の1つを表示したい

。

現在：

Row1 Column1 | 行1列2| 行1列3

Row2 Column1 | Row2 column2 | 行2列3

Row3 Column1 | Row3 column2 | 行3列3

。

必須：

Row1 Column1 | 行1列2

行1列3|

Row2 Column1 | 行2列2

Row2 column3 |

Row3 Column1 | 行3列2

Row3 column3 |

コード

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 に答える