Jquery 数据表 - 单击标题时如何进行多列排序和重绘表，它可以是 asc 或 desc
Posted
技术标签:
【中文标题】Jquery 数据表 - 单击标题时如何进行多列排序和重绘表，它可以是 asc 或 desc【英文标题】：Jquery Data Tables - How to do multicolumn sort and redraw table when click on header it can be asc or desc 【发布时间】：2021-02-03 22:23:48 【问题描述】：大家好， 我遇到了数据表的问题，我需要有一个带有一个标题“数字”的单列，它将有两个子标题 1）移动 2）单元格。此列标题将具有相同的移动/单元格数据。我试图用屏幕截图来解释这个场景。 拥有该列后，我需要单击 Mobile，它将使用 Orderdata 子句以不同的排序顺序对相同的数据进行排序。 C。如果我点击 Home 它将有不同的多列排序。我尝试使用 Rowspan 和 colspan 将其视为不同的列，这对我不起作用。 请给我建议。我附上了JSFiddle 链接并粘贴了代码供您参考。 一旦我有了这些标题，我将捕获点击事件并获取标题的名称，并将根据标题名称重绘表格。 首先，我想看看它是否可以使用 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",
"Country" : "USA",
"Office" : "Los Angeles",
"Phone Number":"2408564578"
,
"FirstName" : "Priyanka",
"LastName" : "Jonas",
"City" : "New York",
"Country" : "USA",
"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,"searchable":true,
"targets": [ 5 ],"visible": true,"searchable":false
],
columns: [
data: "FirstName","orderData": [0,1,2,3],
data: "LastName","orderData": [0,2,3,4],
data: "City","orderData": [0,2,3,4],
data: "Country","orderData": [1,2] ,
data: "Office","orderData": [4,0,1] ,
data: "Phone Number","orderData": [5,1]
]
);
);
html:`
<!DOCTYPE html>
<html>
<head>
<style>
.dataTable > thead > tr > th[class*="sort"]::afterdisplay: 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>
`
谢谢大家
【问题讨论】：
【参考方案1】：感谢您阅读我的帖子。我通过使用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 不能两者兼而有之。 谢谢
【讨论】：
很高兴您找到了解决方案。您应该将有关多列排序的问题作为新问题发布，而不是在答案中提出。如果它是它自己的问题，人们将更有可能看到（并可能回答）它。 （假设这不是一个重复的问题）。以上是关于Jquery 数据表 - 单击标题时如何进行多列排序和重绘表，它可以是 asc 或 desc的主要内容，如果未能解决你的问题，请参考以下文章