对损坏的子行进行排序的数据表

Datatables sorting ruined child rows

本文关键字：数据表 排序 损坏      更新时间：2023-09-26

不确定我是如何解决这个问题的，试了两天都解决不了。我想用add方法进行预处理，但排序也通过对隐藏行进行排序来运行。隐藏行充当子行，为父行提供更多信息。我必须做好分类工作，否则我就无法做好准备工作。

尝试取消注释"bSort"：false，然后您将看到损坏的版本。

var table = $('#example').DataTable({
    "bSort": false,
    /* the problem is here, it won't work if I enable sorting*/
  });

工作版本

$(document).ready( function () {
  var table = $('#example').DataTable({
    "bSort": false,
    /* the problem is here, it won't work if I enable sorting*/
  });
  
  function appendRow() {
            var t = $('#example').DataTable();                        
           
            var node = t.row.add([
                "James Bond",
              "Spy","55","$9000"
                ]).node();
            var node2 = t.row.add([
              "<p>Full Name: James Bond Larry</p>",
                null,
                null,
                null
                ]).draw().node();
            $(node2).addClass('detail-row hide');
            $(node).addClass('result-row').hide().fadeIn('normal');
        };
  
  $('#add').click(function(){
    appendRow();
  });
  
  $('#example tbody').on('click','.result-row',function(){
            var tr = $(this).next('.detail-row');
            if(tr.hasClass('hide')){
                tr.removeClass('hide');
            }else{
                tr.addClass('hide');
            }
        });
  
} );
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
.hide{
  display:none;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Age</th>
            <th>Salary</th>
          </tr>
        </thead>
        <tbody>
          <tr class="result-row">
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>61</td>
            <td>$3,120</td>
          </tr>
          <tr class="detail-row hide">
            <td><p>Full Name: Tiger Nikola Nixon</p></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
          
        </tbody>
      </table>
    </div>
    
    <br>
    <br>
    <br>
    <br>
    
    <div id="add"><button>Add row</button></div>
  </body>
</html>

之所以会这样，是因为您在名称列上应用了排序，所以datatable非常智能，它会将行添加到需要的位置…所以如果您想在名称列的最后一个移除排序选项中添加它。。。

这是一个更新的小提琴，它做以下事情

在这里，我添加了一个隐藏列，下面配置

"columnDefs": [{
  "targets": [ 4 ],// Hide 4th column
  "visible": false,
  "searchable": false
}]

你可以用format函数写任何东西来获得任何特定的视图，在这里我添加了一个有3行的表，但你可以自定义它

正如我们前面讨论的那样，我在这里为每个地址添加了额外的行，但在这里，当用户点击行时，我会添加一行，您可以看到点击函数的工作原理。。

这里有一个小的代码更改：

$(document).ready(function() {
  /* Formatting function for row details - modify as you need */
  function format(d) {
    console.log(d);
    // `d` is the original data object for the row
    return '<table cellpadding="4" cellspacing="0" border="0" style="padding-left:50px;">' +
      '<tr>' +
      '<td>Name:</td>' +
      '<td>' + d[0] + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td>Full Name:</td>' +
      '<td>' + d[4] + '</td>' +
      '</tr>' +
      '<tr>' +
      '<td>Extra info:</td>' +
      '<td>And any further details here (images etc)...</td>' +
      '</tr>' +
      '</table>';
  }
  var table = $('#example').DataTable({
    "columnDefs": [{
        "targets": [4],
        "visible": false,
        "searchable": false
      }]
      /* the problem is here, it won't work if I enable sorting*/
  });
  function appendRow() {
    var t = $('#example').DataTable();
    var node = t.row.add([
      "James Bond",
      "Spy", "55", "$9000", "James Bond Larry"
    ]).draw().node();
    console.log(node);
    $(node).addClass('result-row').hide().fadeIn('normal');
  };
  $('#add').click(function() {
    appendRow();
  });
  $('#example tbody').on('click', '.result-row', function() {
    var tr = $(this).closest('tr');
    var row = table.row(tr);
    if (row.child.isShown()) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
    } else {
      // Open this row
      row.child(format(row.data())).show();
      tr.addClass('shown');
    }
  });
});

参考1-分拣

参考2-行添加

referce 3-点击添加行

相关文章：