Merge pull request #101 from RogerDodger/gh-pages

Sort table's tbody elements independently of each other

src/tablesort.js

@@ -186,13 +186,16 @@
       }
 
       that.col = column;
-      var newRows = [],
-          noSorts = {},
-          j,
-          totalRows = 0,
-          noSortsSoFar = 0;
 
       for (i = 0; i < that.table.tBodies.length; i++) {
+        var newRows = [],
+            noSorts = {},
+            j,
+            totalRows = 0,
+            noSortsSoFar = 0;
+
+        if (that.table.tBodies[i].rows.length < 2) continue;
+
         for (j = 0; j < that.table.tBodies[i].rows.length; j++) {
           item = that.table.tBodies[i].rows[j];
           if (item.classList.contains('no-sort')) {
@@ -209,30 +212,29 @@
           }
           totalRows++;
         }
-      }
-
-      // Before we append should we reverse the new array or not?
-      // If we reverse, the sort needs to be `anti-stable` so that
-      // the double negatives cancel out
-      if (sortDir === 'sort-down') {
-        newRows.sort(stabilize(sortFunction, true));
-        newRows.reverse();
-      } else {
-        newRows.sort(stabilize(sortFunction, false));
-      }
-
-      // append rows that already exist rather than creating new ones
-      for (i = 0; i < totalRows; i++) {
-        if (noSorts[i]) {
-          // We have a no-sort row for this position, insert it here.
-          item = noSorts[i];
-          noSortsSoFar++;
+        // Before we append should we reverse the new array or not?
+        // If we reverse, the sort needs to be `anti-stable` so that
+        // the double negatives cancel out
+        if (sortDir === 'sort-down') {
+          newRows.sort(stabilize(sortFunction, true));
+          newRows.reverse();
         } else {
-          item = newRows[i - noSortsSoFar].tr;
+          newRows.sort(stabilize(sortFunction, false));
         }
 
-        // appendChild(x) moves x if already present somewhere else in the DOM
-        that.table.tBodies[0].appendChild(item);
+        // append rows that already exist rather than creating new ones
+        for (j = 0; j < totalRows; j++) {
+          if (noSorts[j]) {
+            // We have a no-sort row for this position, insert it here.
+            item = noSorts[j];
+            noSortsSoFar++;
+          } else {
+            item = newRows[j - noSortsSoFar].tr;
+          }
+
+          // appendChild(x) moves x if already present somewhere else in the DOM
+          that.table.tBodies[i].appendChild(item);
+        }
       }
 
       that.table.dispatchEvent(createEvent('afterSort'));

test/index.html

@@ -133,6 +133,22 @@
   </tbody>
 </table>
 
+<table id="sort-multi">
+  <thead>
+    <tr><th></th></tr>
+  </thead>
+  <tbody>
+    <tr><td>2</td></tr>
+    <tr><td>1</td></tr>
+    <tr><td>3</td></tr>
+  </tbody>
+  <tbody>
+    <tr><td>3</td></tr>
+    <tr><td>2</td></tr>
+    <tr><td>4</td></tr>
+  </tbody>
+</table>
+
 <script src='tape.js'></script>
 
 <script src='../src/tablesort.js'></script>
@@ -149,10 +165,12 @@
 tableExclude = document.getElementById('sort-exclude');
 tableDefault = document.getElementById('sort-default');
 tableRefresh = document.getElementById('sort-refresh');
+tableMulti = document.getElementById('sort-multi');
 new Tablesort(table);
 new Tablesort(tableDescend, { descending: true });
 new Tablesort(tableExclude);
 new Tablesort(tableDefault);
+new Tablesort(tableMulti);
 var refresh = new Tablesort(tableRefresh);
 
 var rowCount = tableRefresh.rows.length;
@@ -165,6 +183,7 @@
 
 <script src='spec/tablesort.js'></script>
 <script src='spec/dotsep.js'></script>
+<script src='spec/multibody.js'></script>
 <script src='spec/filesize.js'></script>
 <script src='spec/date.js'></script>
 <script src='spec/number.js'></script>

test/spec/multibody.js

@@ -0,0 +1,32 @@
+tape('sorts tbodys independently', function(t) {
+  var el = tableMulti.querySelector('th:nth-child(1)');
+  var event = document.createEvent('HTMLEvents');
+  event.initEvent('click', true, false);
+  el.dispatchEvent(event);
+
+  t.equal(tableMulti.rows[1].cells[0].innerHTML, '1');
+  t.equal(tableMulti.rows[2].cells[0].innerHTML, '2');
+  t.equal(tableMulti.rows[3].cells[0].innerHTML, '3');
+  t.equal(tableMulti.rows[4].cells[0].innerHTML, '2');
+  t.equal(tableMulti.rows[5].cells[0].innerHTML, '3');
+  t.equal(tableMulti.rows[6].cells[0].innerHTML, '4');
+
+  event.initEvent('click', true, false);
+  el.dispatchEvent(event);
+
+  t.equal(tableMulti.rows[1].cells[0].innerHTML, '3');
+  t.equal(tableMulti.rows[2].cells[0].innerHTML, '2');
+  t.equal(tableMulti.rows[3].cells[0].innerHTML, '1');
+  t.equal(tableMulti.rows[4].cells[0].innerHTML, '4');
+  t.equal(tableMulti.rows[5].cells[0].innerHTML, '3');
+  t.equal(tableMulti.rows[6].cells[0].innerHTML, '2');
+
+  t.equal(tableMulti.tBodies[0].rows[0].cells[0].innerHTML, '3');
+  t.equal(tableMulti.tBodies[0].rows[1].cells[0].innerHTML, '2');
+  t.equal(tableMulti.tBodies[0].rows[2].cells[0].innerHTML, '1');
+  t.equal(tableMulti.tBodies[1].rows[0].cells[0].innerHTML, '4');
+  t.equal(tableMulti.tBodies[1].rows[1].cells[0].innerHTML, '3');
+  t.equal(tableMulti.tBodies[1].rows[2].cells[0].innerHTML, '2');
+
+  t.end();
+});