Таблицы сортировки с двумя рядами заголовка

Question

Моей структура таблицы, как показано ниже:

Это мой HTML:

<table id="jackpotwatch" style="width:700px;"> 
     <thead> 
      <tr> 

       <th>Location</th> 
       <th colspan="2">Full Name</th> 
       <th>Amount</th> 

      </tr> 
      <tr > 
      <th>Asset</th> 
      <th>Patron ID</th> 
      <th>User</th> 
      <th>Date/Time</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Salem</td> 
       <td colspan="2">Bob galvin</td> 
       <td>$3400</td> 
      </tr> 
      <tr> 
      <td>assert1</td> 
      <td>1148</td> 
      <td>sjauser</td> 
      <td>11/12 10:39 AM</td> 
      </tr> 
      <tr> 
       <td>chennai</td> 
       <td colspan="2">sally n safer</td> 
       <td>$400</td> 
      </tr> 
      <tr> 
      <td>sdfsdgt1</td> 
      <td>4747</td> 
      <td>sjauser</td> 
      <td>11/12 10:39 AM</td> 
      </tr> 
      <tr> 
       <td>Mazdgfdg</td> 
       <td colspan="2">afdagadg</td> 
       <td>789769</td> 
      </tr> 
      <tr> 
      <td>qwqeqe</td> 
      <td>47467</td> 
      <td>sjauser</td> 
      <td>11/12 10:39 AM</td> 
      </tr> 
      <tr> 
       <td>hurtyry</td> 
       <td colspan="2">afadfadg</td> 
       <td>$12000</td> 
      </tr> 
      <tr> 
      <td>afadsf</td> 
      <td>25426546</td> 
      <td>sjauser</td> 
      <td>11/12 10:39 AM</td> 
      </tr> 
     </tbody> 
     </table> 

Когда я нажимаю на «Сумме» заголовок значения суммы ($ 3400, $ 400, $ 12000) должны быть отсортированы и т. Д. Как и поле Date/Time также должно сортироваться на основе значения.

Я использовал Tablesorter плагин, но этот плагин не сортировал все столбцы. Это не сортировка последнего столбца и заголовка второй строки в этой таблице. Я также использовал плагин Tinysort, но он меняет структуру таблицы при сортировке.

Я не могу изменить структуру таблицы, так как это наше самое большое требование для наших клиентов. Пожалуйста, предоставьте некоторое руководство по этой проблеме сортировки, которая очень полезна для меня.

Любая индивидуальная сортировка, которую мы можем применить, пожалуйста, предложите, как я могу это сделать.

Answer 1

Предположительно вы хотите два ряда чтобы каждая запись оставалась сгруппированной вместе, и в этом случае Tablesorter не предназначен для того, чтобы делать то, что вы хотите. Tinysort может работать, хотя, если вы готовы положить каждую пару строк в свои tbody:

<table id="jackpotwatch" style="width:700px"> 
    <thead> 
     <tr> 
      <th>Location</th> 
      <th colspan="2">Full Name</th> 
      <th>Amount</th> 
     </tr> 
     <tr > 
     <th>Asset</th> 
     <th>Patron ID</th> 
     <th>User</th> 
     <th>Date/Time</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Salem</td> 
      <td colspan="2">Bob galvin</td> 
      <td>$3400</td> 
     </tr> 
     <tr> 
     <td>assert1</td> 
     <td>1148</td> 
     <td>sjauser</td> 
     <td>11/12 10:39 AM</td> 
     </tr> 
    </tbody> 
    <tbody> 
     <tr> 
      <td>chennai</td> 
      <td colspan="2">sally n safer</td> 
      <td>$400</td> 
     </tr> 
     <tr> 
     <td>sdfsdgt1</td> 
     <td>4747</td> 
     <td>sjauser</td> 
     <td>11/12 10:39 AM</td> 
     </tr> 
    </tbody> 
    ... 
</table> 

С Tinysort, по-видимому рода на любой элемент, вы должны быть в состоянии сказать ему, чтобы отсортировать tbody элементы вместо строк. Ваш скрипт может сделать что-то вроде этого, свободно основанный на примере таблицы в документации Tinysort:

$(document).ready(function() { 
    var aAsc = []; 
    $("#jackpotwatch>thead th").each(function(nr) { 
     $(this).click(function() { 
      aAsc[nr] = aAsc[nr] == 'asc' ? 'desc' : 'asc'; 
      $("#jackpotwatch>tbody").tsort('td:eq(' + nr + ')', {order: aAsc[nr]}); 
     }); 
    }); 
}); 

Это зависит от наличия точно такое же количество ячеек в строках заголовка, как в строках каждого TBODY.

Answer 2

См. Здесь Demo.

Я не имею плагин для вас, но я придумал следующий подход для вашей конкретной ситуации:

/** 
* This approach assumes that records are always comprised of 2 rows. It is possible to make this configurable. 
*/ 
;(function() { 
    //Get the table 
    var table = $("#jackpotwatch"); 

    //Make head header in the THEAD sortable. 
    $("thead th", table).on("click", onSortableClicked); 

    //Handle the sortable clicked event. 
    function onSortableClicked(e) { 
     //Find the column position. 
     var c = -1, child = e.target; 
     while ((child = child.previousSibling) != null) 
      if (child.nodeType == 3) ++c; 

     //Find the row position. 
     var r = -1, child = e.target.parentNode; 
     while ((child = child.previousSibling) != null) 
      if (child.nodeType == 3) ++r; 


     var subject = $("tbody", table); 

     var replacement = sort(subject, r, c); 

     subject.replaceWith(replacement); 
    } 

    function sort(subject, r, c) { 
     var rows = $("tr", subject); //Get all the rows from the tbody. 
     var sorted = document.createElement("tbody"); 

     var vals = []; 
     for (var i = 0; i < rows.length; i+=2) { 
      var record = [rows.get(i), rows.get(i+1)]; //Record is two rows. 
      var sub = record[r].children[c].innerText; //This is our sort subject. 

      vals.push({"sub": sub, "record": record}); 
     } 

     vals.sort(compare); 

     for (var i = 0; i < vals.length; ++i) { 
      var val = vals[i]; 
      sorted.appendChild(val.record[0]); 
      sorted.appendChild(val.record[1]); 
     } 

     return sorted; 
    } 

    function compare(a, b) { 
     var atext = a.sub.toLowerCase(); 
     var btext = b.sub.toLowerCase(); 
     return atext < btext ? -1 : atext > btext ? 1 : 0; 
    } 
})(); 

Это делает каждый TH элемент в THEAD элементе, сортируемом. Он сортирует его на основе текстового, нижнего, сравнения.

Он жестко закодирован только для работы с записями, которые представляют собой 2 набора строк, но могут быть расширены, чтобы можно было настроить, сколько строк составляет одну запись, или даже вывести это автоматически, подсчитав количество строк в THEAD.

Я использовал это на следующий HTML:

<table id="jackpotwatch"> 
    <thead> 
     <tr> 
      <th>Location</th> 
      <th colspan="2">Full Name</th> 
      <th>Amount</th> 
     </tr> 
     <tr> 
      <th>Asset</th> 
      <th>Patron ID</th> 
      <th>User</th> 
      <th>Date/Time</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Salem</td> 
      <td colspan="2">Bob galvin</td> 
      <td>$3400</td> 
     </tr> 
     <tr> 
      <td>assert1</td> 
      <td>1148</td> 
      <td>sjauser</td> 
      <td>11/12 10:39 AM</td> 
     </tr> 
     <tr> 
      <td>chennai</td> 
      <td colspan="2">sally n safer</td> 
      <td>$400</td> 
     </tr> 
     <tr> 
      <td>sdfsdgt1</td> 
      <td>4747</td> 
      <td>sjauser</td> 
      <td>11/12 10:39 AM</td> 
     </tr> 
     <tr> 
      <td>Mazdgfdg</td> 
      <td colspan="2">afdagadg</td> 
      <td>789769</td> 
     </tr> 
     <tr> 
      <td>qwqeqe</td> 
      <td>47467</td> 
      <td>sjauser</td> 
      <td>11/12 10:39 AM</td> 
     </tr> 
     <tr> 
      <td>hurtyry</td> 
      <td colspan="2">afadfadg</td> 
      <td>$12000</td> 
     </tr> 
     <tr> 
      <td>afadsf</td> 
      <td>25426546</td> 
      <td>sjauser</td> 
      <td>11/12 10:39 AM</td> 
     </tr> 
    </tbody> 
</table> 

Убедитесь в том, чтобы поместить скрипт либо после HTML, или в готовом обработчика событий:

$(document).ready(function() { 
    //Sorting code from above goes here. 
});