Table sorting with two rows of Header

Question

My Table structure is like below:

enter image description here

This is my 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>

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.

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.

Can you at least show us the table structure? Do they wrap each set of two rows in TBODY elements for example? It would really help to know the structure of the table. — crush
– crush, Commented Feb 15, 2013 at 14:13
try to create a more simplified and more user-friendly table... this one you're currently using is pretty messed up! — user1386320
– user1386320, Commented Feb 15, 2013 at 14:13
@Zlatan It's two rows per record - there is nothing wrong with the layout of the table. Go away. — crush
– crush, Commented Feb 15, 2013 at 14:16
@Zlatan, this is actually a common format for tables that need to display more data than can fit in a single row. It needs some styling per CSS to display separation between records, but that is not the users question or concern. Other than that, it is perfectly fine. Take your amateurish opinions elsewhere. — crush
– crush, Commented Feb 15, 2013 at 14:24

antialiasis · Accepted Answer · 2013-02-15 15:44:29Z

1

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>

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

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

edited Feb 15, 2013 at 15:44

answered Feb 15, 2013 at 15:35

antialiasis

8311 gold badge9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

crush Over a year ago

The author said that he cannot manipulate the table structure.

antialiasis Over a year ago

I assumed by that he meant he can't change the apparent structure of the table, i.e. the fact the data is presented in this two-row format. If the requirement is that he cannot make any changes to the HTML at all, then this won't work, no.

crush Over a year ago

You might be right. I definitely think it would be better if each record was surrounded by a TBODY element, so if that is the case, then he should definitely go this route. Maybe I just misunderstood what he meant.

crush · Accepted Answer · 2013-02-15 15:47:39Z

See the Demo here.

I don't have a plugin for you, but I came up with the following approach for your specific situation:

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

This makes each TH element in the THEAD element, sortable. It sorts it based on a textual, lowercased, comparison.

It is hard coded to only work with records that are 2 row sets, but could be expanded to allow the configuration of how many rows make up a single record, or even deduce this automagically by counting how many rows are in the THEAD.

I used this on the following 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>

Make sure to place the script either after the HTML, or in a ready event handler:

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

Really useful. Looking into this solution. I think need to add sorting condition for date foramt. Thank you so much.

Collectives™ on Stack Overflow

Table sorting with two rows of Header

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related