Блог

Главная - Вопросы по программированию - Таблицы данных Jquery — Как выполнить сортировку по нескольким столбцам и перерисовать таблицу при нажатии на заголовок, это может быть asc или desc

Таблицы данных Jquery — Как выполнить сортировку по нескольким столбцам и перерисовать таблицу при нажатии на заголовок, это может быть asc или desc

#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. Рад, что вы нашли решение. Вы должны опубликовать свой вопрос о сортировке по нескольким столбцам как новый вопрос, вместо того, чтобы задавать его в ответе. Люди с гораздо большей вероятностью увидят (и, возможно, ответят) на него, если это его собственный вопрос. (И если предположить, что это не дублирующий вопрос).