#jquery #sorting #datatables
#jquery #сортировка #таблицы данных
Вопрос:
Привет всем, я столкнулся с проблемой для таблицы данных, где мне нужно иметь один столбец с одним заголовком «Номер», который будет иметь два подзаголовка 1) Мобильный 2) Ячейка.Заголовок этого столбца будет содержать те же данные для мобильного / ячейки. Я попытался объяснить сценарий с помощью снимка экрана. Как только у меня будет этот столбец, мне нужно нажать на мобильный, который будет сортировать одни и те же данные с другой последовательностью сортировки с помощью предложения Orderdata. c. если я нажму на Home, он будет иметь другую сортировку по нескольким столбцам. Я пробовал с помощью Rowspan и colspan, которые обрабатывают его как другой столбец, который не будет работать для меня. Пожалуйста, предоставьте мне предложение. Я прикрепил ссылку на JSFiddle, а также вставил код для вашей справки. Как только у меня появятся эти заголовки, я запишу событие щелчка и получу имя заголовка и перерисую таблицу на основе имени заголовка. Сначала я хотел бы посмотреть, возможно ли это с таблицами данных. Я открыт для предложений. Файл 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"]::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>
`
Спасибо всем
Ответ №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 amp;nbsp;amp;nbsp;</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, это не может быть и то, и другое.
Спасибо
Комментарии:
1. Рад, что вы нашли решение. Вы должны опубликовать свой вопрос о сортировке по нескольким столбцам как новый вопрос, вместо того, чтобы задавать его в ответе. Люди с гораздо большей вероятностью увидят (и, возможно, ответят) на него, если это его собственный вопрос. (И если предположить, что это не дублирующий вопрос).