数据表实现隐藏某些行的列

时间:2019-03-26 02:46:57

标签: jquery datatables

我已经实现了显示订单的表格。所需的一种逻辑是自动隐藏表中每个订单的所有订单行项目,然后轻松地对其进行扩展。 一个问题是有些订单可以有10个订单项,而其他订单可以有1个。

因此,由于我必须设置适当数量的列,因此该实现将许多不需要的订单的隐藏行显示给不需要的行。

有没有一种方法可以隐藏那些仅显示1个“订单项”的行的列以将其显示出来?然后还能用10个订单项展开另一行并查看所有10个订单项吗?

已将其设计为动态确定订单项的数量。

<thead>
    <tr class="text-center">
        <th></th>
        <th scope="col">{{ __('Order ID') }}</th>
        <th scope="col">{{ __('Status') }}</th>
        <th scope="col">{{ __('Customer Name') }}</th>
        <th scope="col">{{ __('Total Price') }}</th>
        <th scope="col">{{ __('Created') }}</th>
        <th scope="col">{{ __('Updated') }}</th>
        <th scope="col" class="none">{{ __('Order Item 1') }}</th>
        <th scope="col" class="none">{{ __('Order Item 2') }}</th>
        <th scope="col" class="none">{{ __('Order Item 3') }}</th>
        <th scope="col" class="none">{{ __('Order Item 4') }}</th>
        <th scope="col" class="none">{{ __('Order Item 5') }}</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>k</td>
        <td>l</td>
    <tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
        <td>i</td>
        <td></td>
        <td></td>
        <td></td>
    <tr>
</tbody>

因此,当您扩展第二行时,它有两个空的tds,因此不会像最后两个数据表那样在行中呈现th或td,但是如果我扩展第一行,则将全部显示。

0 个答案:

没有答案