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

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

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

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

工作版本

$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
“bSort”：错误，
/*问题就在这里，如果启用排序，它将不起作用*/
});
函数appendRow（）{
var t=$（“#示例”）.DataTable（）；
var节点=t.row.add([
“詹姆斯·邦德”，
“间谍”，“55”，“9000美元”
]).node（）；
变量node2=t.row.add([
全名：詹姆斯·邦德·拉里，
无效的
无效的
无效的
]).draw（）.node（）；
$（node2.addClass（'detail-row hide'）；
$（节点）.addClass（'result-row'）.hide（）.fadeIn（'normal'）；
};
$（'#添加'）。单击（函数（）{
appendRow（）；
});
$（“#示例tbody”）。在（'单击'，'结果行'，函数（）上{
var tr=$（this.next（'.detail行'）；
if（tr.hasklass（'hide'））{
tr.removeClass（“隐藏”）；
}否则{
tr.addClass（“隐藏”）；
}
});
} );
正文{
字体：90%/1.45em“Helvetica Neue”，HelveticaNeue，Verdana，Arial，Helvetica，无衬线；
保证金：0；
填充：0；
颜色：#333；
背景色：#fff；
}
.隐藏{
显示：无；
}

DataTables-JS-Bin
名称
位置
年龄
薪水
老虎尼克松
系统架构师
61
$3,120
全名：老虎尼古拉·尼克松









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

下面是一个更新的，它做了以下事情

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

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

您可以在format函数中编写任何内容以获得任何特定的视图。在这里，我添加了一个包含3行的表，但您可以自定义它

在这里，我为每个addrows添加了额外的行，正如我们前面讨论过的，但在这里，我添加了一行，当用户单击该行时，您可以看到单击函数的工作方式

下面是一个小的代码更改：

$(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');
    }
  });
});

$（文档）.ready（函数（）{
/*行详细信息的格式化功能-根据需要进行修改*/
函数格式（d）{
控制台日志（d）；
//`d`是该行的原始数据对象
返回“”+
'' +
'姓名：'+
''+d[0]+''+
'' +
'' +
'全名：'+
''+d[4]+''+
'' +
'' +
'额外信息：'+
'以及此处的任何进一步细节（图像等）…'+
'' +
'';
}
变量表=$（'#示例'）。数据表({
“columnDefs”：[{
“目标”：[4]，
“可见”：假，
“可搜索”：false
}]
/*问题就在这里，如果启用排序，它将不起作用*/
});
函数appendRow（）{
var t=$（“#示例”）.DataTable（）；
var节点=t.row.add([
“詹姆斯·邦德”，
“间谍”，“55”，“9000美元”，“詹姆斯·邦德·拉里”
]).draw（）.node（）；
console.log（节点）；
$（节点）.addClass（'result-row'）.hide（）.fadeIn（'normal'）；
};
$（'#添加'）。单击（函数（）{
appendRow（）；
});
$（“#示例tbody”）。在（'单击'，'结果行'，函数（）上{
var tr=$（this.nexist（'tr'）；
var行=表.行（tr）；
if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
//打开这一排
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
}
});
});



这种情况之所以发生，是因为您对名称列应用了排序，所以datatable非常智能，它会在需要的位置添加行。。。因此，如果您想在名称列的最后一个删除排序选项中添加该选项

下面是一个更新的，它做了以下事情

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

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

您可以在format函数中编写任何内容以获得任何特定的视图。在这里，我添加了一个包含3行的表，但您可以自定义它

在这里，我为每个addrows添加了额外的行，正如我们前面讨论过的，但在这里，我添加了一行，当用户单击该行时，您可以看到单击函数的工作方式

下面是一个小的代码更改：

$(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');
    }
  });
});

$（文档）.ready（函数（）{
/*行详细信息的格式化功能-根据需要进行修改*/
函数格式（d）{
控制台日志（d）；
//`d`是该行的原始数据对象
返回“”+
'' +
'姓名：'+
''+d[0]+''+
'' +
'' +
'全名：'+
''+d[4]+''+
'' +
'' +
'额外信息：'+
'以及此处的任何进一步细节（图像等）…'+
'' +
'';
}
变量表=$（'#示例'）。数据表({
“columnDefs”：[{
“目标”：[4]，
“可见”：假，
“可搜索”：false
}]
/*问题就在这里，如果启用排序，它将不起作用*/
});
函数appendRow（）{
var t=$（“#示例”）.DataTable（）；
var节点=t.row.add([
“詹姆斯·邦德”，
“间谍”，“55”，“9000美元”，“詹姆斯·邦德·拉里”
]).draw（）.node（）；
console.log（节点）；
$（节点）.addClass（'result-row'）.hide（）.fad