数据库排列破坏的子行 [英] Datatables sorting ruined child rows
本文介绍了数据库排列破坏的子行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
不知道我如何解决这个问题，尝试了2天无法解决。我想使用add方法进行前缀，但排序是通过排序隐藏行来运行的。隐藏行作为子行，给父行更多的信息。我必须进行排序工作，否则我无法做预备。
尝试取消注释bSort：false，那么您将看到破碎的版本。
var table = $（'＃example'）。DataTable（{
bSort：false，
/ *问题在这里，如果我启用排序* /
}）将不起作用;
工作版本
$（document） ）{var table = $（'＃example'）。DataTable（{bSort：false，/ *的问题在这里，如果我启用排序* /}将不起作用）; function appendRow（）{var t = $（'＃example'）DataTable（）; var node = t.row.add（[James Bond，Spy，55，$ 9000]）node（）; var node2 = t 。draw（）。node（）; $（node2）.addClass（'detail-row隐藏'）; $（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;保证金：0;填充：0;颜色：＃333; background-color：#fff;}隐藏{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 =stylesheettype =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 =exampleclass =display nowrapwidth =100％> < thead> < tr> < th>名称< / th> < th>位置< < th>年龄< / th> < th>工资< / 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>全名：Tiger Nikola Nixon< / p>< / td> < td>< / td> < td>< / td> < td>< / td> < / tr> < / tbody> < / table> < / div> < br> < br> < br> < br> < div id =add>< button>添加行< / button>< / div> < / body>< / html>
解决方案
它是以这种方式发生的，因为您在名称列上应用排序，所以datatable是非常聪明的，它添加了它需要的行，所以如果你想添加到最后一个删除排序选项名称列...
这是一个更新的小提琴做了以下事情
这里我添加了一个隐藏的列，下面配置
columnDefs：[{
targets：[4]，//隐藏第4列
visible：false，
可搜索：false
}]
您可以在格式函数中写任何内容以具有任何特定视图在这里我添加了一个有3行的表，但是您可以自定义它
在这里，我已经为每个addrow添加了额外的行，就像我们之前讨论过的，使用时添加一行r点击行，你可以看到点击功能如何工作。
这里是一个小的代码更改：
$ b $ （$（$）$（$）$（$）$（$）$（$）$（$） ）{
console.log（d）;
//`d`是行的原始数据对象
return'< table cellpadding =4cellspacing =0border =0style =padding-left：50px; +
'< tr>'+
'< td>名称：< / td>'+
'< td>'+ d [0] '< / td>'+
'< / tr>'+
'< tr>'+
'< td>全名：< / td&
'< td>'+ d [4] +'< / td>'+
'< / tr>'+
'< tr>'+
'< td>额外信息：< / td>'+
'< td>此处还有其他详细信息（图像等）...< / td>'+
' ; / tr>'+
'< / table>';
}
var table = $（'＃example'）。DataTable（{
columnDefs：[{
targets：[4]，
visible：false，
可搜索：false
}]
/ *问题在这里，如果我启用排序* /
}）;
函数appendRow（）{
var t = $（'＃example'）。
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（））{
//这行已经打开了 - 关闭它
row.child.hide（）;
tr.removeClass（'shown'）;
} else {
//打开此行
row.child（format （row.data（）））。show（）;
tr.addClass（'shown'）;
}
}）;
}）;
Not sure how I solve this issue, tried 2 days couldn't solve it. I want to prepend using add method but the sorting is running it by sorting hidden row too. The hidden row act as child row which give the parent row more information. I must make the sorting work otherwise I couldn't do prepend.
try to uncomment the "bSort":false then you will see the broken version.
var table = $('#example').DataTable({
"bSort": false,
/* the problem is here, it won't work if I enable sorting*/
});
Working version
$(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>
解决方案
it is happening in this way because you applied sorting on the name column, so datatable being quite smart it adds the row where it needs to be... so if you want to add that in the last remove sorting option on name column...
Here is an updated fiddle which does following things
Here I have added one hidden column with below config
"columnDefs": [{
"targets": [ 4 ],// Hide 4th column
"visible": false,
"searchable": false
}]
You can write anything in format function to have any specific view aswell here I have added a table with 3 rows, but you can customize it
Here I have adding extra rows for every addrows as we have discussed earlier, but here I am adding a row when user clicks on the row, you can see click function how it works..
and here is a small code change:
$(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');
}
});
});
referece 3 - Adding row on click
这篇关于数据库排列破坏的子行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
