Question

我有一个包含一些行的小表，其中一些包含额外的信息，这些信息将通过jQuery toggle（）显示或隐藏。一切正常，但我不能在这种情况下使用DataTable。我的jQuery看起来像这样：

typedef std::basic_string<unsigned char> ustring;

std::ostream& operator << (std::ostream& stream, const ustring& str) {
    if (const auto len = str.size())
       stream.write(reinterpret_cast<const char*>(&str[0]), len);
    return stream;
}

但是当我想以最简单的方式使用DataTable时，就像https://datatables.net/examples/advanced_init/events_live.html

一样



    $(document).ready(function() {
        $('#serien tbody').on('click', 'td.details-control', function () {

            if ( $(this).hasClass('showDetails') ) {
                $(this).closest('tr').removeClass('shown');
            }
            else {
                $(this).closest('tr').addClass('shown');
            }

            $(this).toggleClass('showDetails');
            $(this).parent().next().toggle();
        });
    });

它不会工作，有人可以给我一个暗示吗？

Answer 1

您正在使用this传递到row()功能。在此上下文中，this指向td。你应该传入那个td的父tr元素。

$(document).ready(function() {
    var table = $('#serien').DataTable();

    $('#serien tbody').on('click', 'td.details-control', function () {
        var data = table.row( $(this).closest("tr")[0] ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
} );

Answer 2

该表的一部分看起来像




<table id="serien" class="table table-hover">
  <thead>
    <tr class="success">
      <th colspan="3">The Avengers</th>
    </tr>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Vorname</th>
    </tr>
  </thead>
  <tbody>  
    <tr>
      <td class="details-control"></td>
      <td>Peel</td>
      <td>Emma</td>
    </tr>
    <tr class="showDetails">
      <td colspan="3">
        <table class="table table-bordered">
          <tr>
            <th>Name</th><th>Vorname</th>
          </tr>
          <tr>  
            <td>Rigg</td><td>Diana</td>           
          </tr>
        </table>
        </td>
      </tr>
      ....
    </tbody>        
</table>


<table id="serien" class="table table-hover">
  <thead>
    <tr class="success">
      <th colspan="3">The Avengers</th>
    </tr>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Vorname</th>
    </tr>
  </thead>
  <tbody>  
    <tr>
      <td class="details-control"></td>
      <td>Peel</td>
      <td>Emma</td>
    </tr>
    <tr class="showDetails">
      <td colspan="3">
        <table class="table table-bordered">
          <tr>
            <th>Name</th><th>Vorname</th>
          </tr>
          <tr>  
            <td>Rigg</td><td>Diana</td>           
          </tr>
        </table>
        </td>
      </tr>
      ....
    </tbody>        
</table>

使用jQuery和DataTable表行切换（）

2 个答案: