具有两行标题的表排序 [英] Table sorting with two rows of Header

问题描述

我的表格结构如下:

这是我的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)应排序，依此类推. 像那样，日期/时间"字段也应基于该值进行排序.

When i click on the "Amount" header the amount values ($3400, $400, $12000) should be sorted, etc. Like that Date/Time field also should sort based on the value.

我使用了 Tablesorter 插件，但该插件未对所有列进行排序.它不对该表的最后一列和第二行标题进行排序. 我还使用了 Tinysort 插件，但是它在排序时会改变表结构本身.

I used Tablesorter plugin but that plugin not sorting all columns. It not sorting last column and second row header in this table. I also used Tinysort plugin but it change the table structure itself while sorting.

我无法更改表结构，因为这是我们客户的最大要求.请提供一些有关此排序问题的指南，这对我非常有用.

I cannot able to change the table structure as this is our client biggest requirement. Please provide some guide on this sorting problem which is very useful for me.

我们可以应用的任何自定义排序方式都建议我该怎么做.

Any customized sorting we can apply means please suggest how can i do that.

推荐答案

大概您希望每个条目的两行都保持分组在一起，在这种情况下，Tablesorter并非旨在执行您想要的操作.但是，如果您准备将每对行放入自己的tbody:

Presumably you want the two rows for each entry to remain grouped together, in which case Tablesorter isn't designed to do what you want. Tinysort could work, though, if you were prepared to put each pair of rows into its own 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文档中的表格示例，您的脚本可能会执行以下操作:

Since Tinysort can apparently sort on any kind of element, you should be able to tell it to sort the tbody elements instead of the rows. Your script could do something like this, loosely based on the table example in the Tinysort docs:

$(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行中的单元格数量完全相同.

This relies on there being precisely the same number of cells in the header rows as in the rows of each tbody.

这篇关于具有两行标题的表排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！