使用两行 Header 进行表格排序

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 美元）应进行排序，等等。 就像那个日期/时间字段也应该根据值进行排序。

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

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

我们可以应用的任何自定义排序意味着请建议我该怎么做。

Answer 1

大概您希望每个条目的两行保持组合在一起，在这种情况下，Tablesorter 并非旨在执行您想要的操作。不过，如果您准备将每对行放入自己的 tbody 中，Tinysort 可以工作：

<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;
    }
})();

这使得THEAD 元素中的每个TH 元素都可以排序。它根据文本的小写比较对其进行排序。

硬编码只能处理 2 行集的记录，但可以扩展为允许配置多少行组成一条记录，甚至可以通过计算 @ 中有多少行来自动推断这一点987654325@.

我在以下 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.
});