如何解决jQuery数据表-如何在单击标题为asc或desc时执行多列排序和重绘表
大家好， 我在数据表中遇到问题，我需要具有一个标题为“ Number”的单个列，该标题将具有两个子标题1）移动2）单元。此列标题将具有相同的移动/单元数据。我试图用屏幕截图来解释这种情况。 有了该列后，我需要单击Mobile，它将使用Orderdata子句对具有不同排序顺序的相同数据进行排序。 C。如果单击“主页”，它将具有不同的多列排序。我尝试使用Rowspan和colspan将其视为不同的列，这对我不起作用。 请给我建议。我已经附加了JSFiddle链接和粘贴的代码，以供您参考。 一旦有了这些标题，我将捕获click事件并获取标题的名称，并将基于标题名称重新绘制表。 首先，我想看看Datatables是否有可能。我愿意征求意见。 Js文件：
//Script
var data = [ {
"FirstName" : "John","LastName" : "Stroops","City" : "Las Vegas","Country" : "USA","Office" : "Las Vegas","Phone Number":"2045556789"
},{
"FirstName" : "Nick","LastName" : "Jonas","City" : "Los Angeles","Office" : "Los Angeles","Phone Number":"2408564578"
},{
"FirstName" : "Priyanka","City" : "New York","Office" : "New York","Phone Number":"5612547845"
}
];
$(document).ready(function() {
$('#example thead').on('click','th',function () {
var index = $('#example').DataTable().column(this).index();
alert('index : '+index);
});
$('#example').DataTable( {
data: data,"aaSorting": [],"columnDefs": [
{"targets": [ 2 ],"visible": false,"searchable":true},{"targets": [ 3 ],"visible": true,{"targets": [ 5 ],"searchable":false}
],columns: [
{ data: "FirstName","orderData": [0,1,2,3]},{ data: "LastName",3,4]},{ data: "City",{ data: "Country","orderData": [1,2] },{ data: "Office","orderData": [4,1] },{ data: "Phone Number","orderData": [5,1] }
]
} );
} );
HTML：`
<!DOCTYPE html>
<html>
<head>
<style>
.dataTable > thead > tr > th[class*="sort"]::after{display: none}
</style>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="container">
<table id="example" class="display" style="width: 80%">
<thead>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>City</th>
<th>Country</th>
<th>Office</th>
<th>Phone number</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
`
谢谢大家
解决方法
感谢您阅读我的文章。我已经通过使用initComplete:function()和innerHTML找到了答案。现在，我可以基于不同的列获取点击事件了。
'initComplete: function() {
const table = this.api();
[1,2].forEach(column => table.column(column).header().innerHTML += '</br><span name="cell" class="cell">cell </span> </br> <span name="home" class="home">home</span>');
}
$('span.home').on('click',function(event) {
$('#example').DataTable().order( [[ 1,'asc' ],[ 2,'asc' ]] ).draw();
//event.stopPropagation();
});'
任何人都可以指导我如何像我对“ orderData”所做的那样对多列进行排序并重绘表格。单击来自表标题，因此可以是asc或desc。订单具有选项asc或desc，不能两者都选。 谢谢
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
