jquery - 2行のヘッダーを使用したテーブルの並べ替え

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プラグインを使用しましたが、そのプラグインはすべての列をソートしていません。このテーブルの最後の列と2番目の行のヘッダーは並べ替えられません。Tinysortプラグインも使用しましたが、並べ替え中にテーブル構造自体が変更されます。

これはクライアントの最大の要件であるため、テーブル構造を変更できません。私にとって非常に役立つこのソートの問題に関するガイドを提供してください。

適用できるカスタマイズされた並べ替えは、その方法を提案してください。

score 1 · Accepted Answer

おそらく、各エントリの2つの行をグループ化したままにする必要があります。その場合、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の行とまったく同じ数のセルがヘッダー行にあることに依存しています。

score 1 · Accepted Answer

ここでデモを参照してください。

私はあなたのためのプラグインを持っていませんが、あなたの特定の状況に対して次のアプローチを思い付きました:

/**
 * 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.
});

jquery - 2行のヘッダーを使用したテーブルの並べ替え

2 に答える 2

Related

Reference