不知道如何解决这个问题，尝试了2天未能解决。我想使用 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>最佳答案
之所以发生这种情况，是因为您对名称列应用了排序，因此数据表非常智能，它会在需要的位置添加行...所以如果您想在名称的最后一个删除排序选项中添加该行专栏...
这是更新的fiddle它做了以下事情
这里我添加了一个隐藏列，配置如下
"columnDefs": [{
"targets": [ 4 ],// Hide 4th column
"visible": false,
"searchable": false
}]
您可以在格式函数中编写任何内容以获得任何特定 View ，这里我添加了一个包含 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');
}
});
});
关于javascript - 数据表对损坏的子行进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37240604/