Question

我正在尝试对数据进行排序，为不需要排序的描述类型数据添加额外的行。我无法隐藏/显示此行，因为它对其他数据至关重要。

有没有办法用datatables做这个？

<table>
  <tr>
    <th>Rank Col</th>
    <th>Power Col</th>
    <th>Money Col</th>
  </tr>
  <tr>
    <td colspan=3>Image - Name goes here</td>
  </tr>
  <tr>
    <td>Rank</td>
    <td>Power Level</td>
    <td>Money</td>
  </tr>
  <tr>
    <td colspan=3>Image - Name goes here</td>
  </tr>
  <tr>
    <td>Rank</td>
    <td>Power Level</td>
    <td>Money</td>
  </tr>
  <tr>
    <td colspan=3>Image - Name goes here</td>
  </tr>
  <tr>
    <td>Rank</td>
    <td>Power Level</td>
    <td>Money</td>
  </tr>
  <tr>
    <td colspan=3>Image - Name goes here</td>
  </tr>
  <tr>
    <td>Rank</td>
    <td>Power Level</td>
    <td>Money</td>
  </tr>
</table>

Answer 1

是的，DataTables确实支持您要执行的操作，但不支持您显示的方式。您需要在行中添加child elements。在您的示例中，一种简单的方法是使用隐藏列（fiddle）：

HTML

<table id="example" class="display">
    <thead>
      <tr>
        <th>Rank Col</th>
        <th>Power Col</th>
        <th>Money Col</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Rank</td>
        <td>Power Level</td>
        <td>Money</td>
        <td>Image - Name goes here</td>
      </tr>
      <tr>
        <td>Rank</td>
        <td>Power Level</td>
        <td>Money</td>
        <td>Image - Name goes here</td>
      </tr>
      <tr>
        <td>Rank</td>
        <td>Power Level</td>
        <td>Money</td>
        <td>Image - Name goes here</td>
      </tr>
      <tr>
        <td>Rank</td>
        <td>Power Level</td>
        <td>Money</td>
        <td>Image - Name goes here</td>
      </tr>
    </tbody>
</table>

JavaScript

function addChild ( data ) {

    // data contains all of your information,
    // e.g. data.rank, data.power_level, etc.

    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td colspan="3">' + data.description + '</td>'+
        '</tr>'+
    '</table>';
}

var table = $('#example').DataTable({ 
    "columns": [
      { "data": "rank" },
      { "data": "power_level" },
      { "data": "money" },
      { "data": "description", "visible": false }
    ]
});

// Add children
table.$('tbody tr').each(function() {
    var row = table.row( $(this) );
    row.child( addChild(row.data()) ).show();
});

在上面的代码中，我们隐藏了description列并将子表附加到父表行。

每隔一行数据表对表进行排序

1 个答案: