Merge pull request #198 from jmlee2k/custom-sort-attributes

Adds ability to sort via a custom attribute
tristen · Oct 30, 2021 · 1a1bcda · 1a1bcda
2 parents efdb520 + 6aa16dc
commit 1a1bcda
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 11 deletions.
diff --git a/demo/index.md b/demo/index.md
@@ -59,6 +59,13 @@ Sometimes text inside cells is not normalized. Using a `data-sort` attribute you
 </tr>
 {% endhighlight %}
 
+You can use a custom attribute (instead of `data-sort`) using the `sortAttribute` option:
+
+{% highlight js %}
+var table = document.getElementById('table-id');
+var sort = new Tablesort(table, { sortAttribute: 'data-custom-sort-val'});
+{% endhighlight %}
+
 ### Specify the sort method for a column
 
 By adding a `data-sort-method` attribute to a table heading you can force Tablesort to use a specific sorting method rather than guessing it. The value of `data-sort-method` corresponds to the name of a sort function.

diff --git a/dist/sorts/tablesort.date.min.js b/dist/sorts/tablesort.date.min.js
@@ -1,5 +1,5 @@
 /*!
- * tablesort v5.2.1 (2020-06-02)
+ * tablesort v5.2.1 (2020-07-06)
  * http://tristen.ca/tablesort/demo/
  * Copyright (c) 2020 ; Licensed MIT
 */

diff --git a/dist/sorts/tablesort.dotsep.min.js b/dist/sorts/tablesort.dotsep.min.js
@@ -1,5 +1,5 @@
 /*!
- * tablesort v5.2.1 (2020-06-02)
+ * tablesort v5.2.1 (2020-07-06)
  * http://tristen.ca/tablesort/demo/
  * Copyright (c) 2020 ; Licensed MIT
 */

diff --git a/dist/sorts/tablesort.filesize.min.js b/dist/sorts/tablesort.filesize.min.js
diff --git a/dist/sorts/tablesort.monthname.min.js b/dist/sorts/tablesort.monthname.min.js
@@ -1,5 +1,5 @@
 /*!
- * tablesort v5.2.1 (2020-06-02)
+ * tablesort v5.2.1 (2020-07-06)
  * http://tristen.ca/tablesort/demo/
  * Copyright (c) 2020 ; Licensed MIT
 */

diff --git a/dist/sorts/tablesort.number.min.js b/dist/sorts/tablesort.number.min.js
@@ -1,5 +1,5 @@
 /*!
- * tablesort v5.2.1 (2020-06-02)
+ * tablesort v5.2.1 (2020-07-06)
  * http://tristen.ca/tablesort/demo/
  * Copyright (c) 2020 ; Licensed MIT
 */

diff --git a/dist/tablesort.min.js b/dist/tablesort.min.js
diff --git a/src/tablesort.js b/src/tablesort.js
@@ -23,8 +23,8 @@
     return evt;
   };
 
-  var getInnerText = function(el) {
-    return el.getAttribute('data-sort') || el.textContent || el.innerText || '';
+  var getInnerText = function(el,options) {
+    return el.getAttribute(options.sortAttribute || 'data-sort') || el.textContent || el.innerText || '';
   };
 
   // Default sort method if no better sort method is found
@@ -172,7 +172,7 @@
           }
 
           // Treat missing cells as empty cells
-          item = cell ? getInnerText(cell) : "";
+          item = cell ? getInnerText(cell,that.options) : "";
 
           item = item.trim();
 
@@ -228,7 +228,7 @@
             // Save the index for stable sorting
             newRows.push({
               tr: item,
-              td: cell ? getInnerText(cell) : '',
+              td: cell ? getInnerText(cell,that.options) : '',
               index: totalRows
             });
           }

diff --git a/test/index.html b/test/index.html
@@ -201,6 +201,28 @@
   </tbody>
 </table>
 
+<table id="sort-custom-attribute">
+  <thead>
+    <tr>
+      <th>Heros</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td data-realname="Tony Stark">Iron Man (Tony Stark)</td>
+    </tr>
+    <tr>
+      <td data-realname="Peter Parker">Spider-Man (Peter Parker)</td>
+    </tr>
+    <tr>
+      <td data-realname="Natasha Romanoff">Black Widow (Natasha Romanoff)</td>
+    </tr>
+    <tr>
+      <td data-realname="Steve Rogers">Captain America (Steve Rogers)</td>
+    </tr>
+  </tbody>
+</table>
+
 <script src='tape.js'></script>
 
 <script src='../src/tablesort.js'></script>
@@ -221,6 +243,7 @@
 tableSortRowSet = document.getElementById('sort-row-set');
 tableSortRowAuto = document.getElementById('sort-row-auto');
 tableSortColumnKeys = document.getElementById('sort-column-keys');
+tableSortCustomAttr = document.getElementById('sort-custom-attribute');
 new Tablesort(table);
 new Tablesort(tableDescend, { descending: true });
 new Tablesort(tableExclude);
@@ -229,6 +252,7 @@
 new Tablesort(tableSortRowSet);
 new Tablesort(tableSortRowAuto);
 new Tablesort(tableSortColumnKeys);
+new Tablesort(tableSortCustomAttr, { sortAttribute: "data-realname" });
 var refresh = new Tablesort(tableRefresh);
 
 var rowCount = tableRefresh.rows.length;

diff --git a/test/spec/tablesort.js b/test/spec/tablesort.js
@@ -193,3 +193,18 @@ tape('sorts with column keys', function(t) {
   t.equal(tableSortColumnKeys.rows[3].cells[1].innerHTML, '3', 'was 3');
   t.end();
 })
+
+tape('uses custom sort attribute', function(t) {
+  var tbl = tableSortCustomAttr;
+  var h = tbl.querySelector('th');
+
+  var clickEvent = document.createEvent('HTMLEvents');
+  clickEvent.initEvent('click', true, false);
+  h.dispatchEvent(clickEvent);
+
+  t.equal(tbl.rows[1].cells[0].innerHTML, 'Black Widow (Natasha Romanoff)');
+  t.equal(tbl.rows[2].cells[0].innerHTML, 'Spider-Man (Peter Parker)');
+  t.equal(tbl.rows[3].cells[0].innerHTML, 'Captain America (Steve Rogers)');
+  t.equal(tbl.rows[4].cells[0].innerHTML, 'Iron Man (Tony Stark)');
+  t.end();
+})