Question

我有以下代码来显示一个表，其中第一行包含8列以显示数据。用户点击该行后，将展开下一行以显示细分/面板中的所有详细信息。现在当我使用插件添加排序功能时的问题。该问题抱怨为什么我在一行中有8列，而在第二行中只有一列。

                    <tr id="row-<?php echo $_id?>" class="trigger <?php echo $_rma->getIsEven() ? 'even' : 'odd'?>">
                        <td class="small-1"><a class="action" href="#" onclick="return false"><span></span></a></td>
                        <td class="small-1"><?php echo $_rma->getIncrementId() ?></td>
                        <td class="small-2"><?php echo $_rma->getOrderIncrementId() ?></td>
                        <td class="small-2"><?php echo $_orderDate ?></td>
                        <td class="small-2"><?php echo Mage::helper('core')->formatDate($_rma->getCreatedAt(), 'short', true) ?></td>
                        <td class="small-2" id="status-<?php echo $_id ?>"><?php echo $_rma->getRmaStatusName() ?></td>
                        <td class="small-1" id="reason-<?php echo $_id ?>"><?php echo $_rma->getRmaReasonName() ?></td>
                        <td class="small-1"><?php echo $_rma->getTotalQty()*1 ?></td>
                    </tr>
                    <tr id="info-<?php echo $_id?>" style="display:none">
                        <td id="container-<?php echo $_id?>" class="small-12 no-pad" colspan="12">
                            <span class="urma-info-loader"><?php echo Mage::helper('udropship')->__('Please wait, loading RMA information...')?></span>
                        </td>
                    </tr>

错误如下所述：https://datatables.net/manual/tech-notes/4 我似乎找不到其他方法，除了有空的隐藏列来完成计数。我尝试使用colspan但仍然得到错误。

Answer 1

Datatable在每行上需要相同数量的列。这是一种愚蠢的方式，你可以隐藏剩下的不需要的行。

jsfiddle.net/9wppdkpe /

更新：

不幸的是，必须禁用排序功能，否则切换功能将无法正常工作。

＆＃13;

$(document).ready(function() {
  $('#example').DataTable({
    // This has to be disabled otherwise, the toggle fuction won't work
    "ordering": false,
    rowCallback: function(row, data) {
      if ($(row).hasClass('target')) {
        if ($(row).find('td').not('.colspan').length > 0) {
          $(row).find('td').not('.colspan').remove();
        }
        $(row).find('.colspan').attr('colspan', 5);
      }
    },
  });
  $('#example').on('click', '.clickable', function() {
    $(this).next('.target').toggle();
  });
});

＆＃13;

.clickable {
  cursor: pointer;
}

.target {
  display: none;
}

.colspan {
  text-align: center;
}

＆＃13;

<table id="example">
  <thead>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
      <th>Heading 4</th>
      <th>Heading 5</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable">
      <td>Click me 1</td>
      <td>Click me 1</td>
      <td>Click me 1</td>
      <td>Click me 1</td>
      <td>Click me 1</td>
    </tr>
    <tr class="target">
      <td class="colspan">Colspan row 1</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr class="clickable">
      <td>Click me 2</td>
      <td>Click me 2</td>
      <td>Click me 2</td>
      <td>Click me 2</td>
      <td>Click me 2</td>
    </tr>
    <tr class="target">
      <td class="colspan">Colspan 2</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

＆＃13;

每行不同列数的数据表

1 个答案: