feature: sortable data table

bitumin · Aug 30, 2017 · 5020a46 · 5020a46
1 parent 52a764d
commit 5020a46
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 65 deletions.
diff --git a/src/index.html b/src/index.html
@@ -34,6 +34,7 @@
                                 <div class="item-content">
                                     <div class="item-inner">
                                         <div class="item-input">
+                                            <!--suppress XmlDefaultAttributeValue -->
                                             <input type="text" name="search" placeholder="Pirate Search">
                                         </div>
                                     </div>
@@ -78,28 +79,30 @@
         </div>
     </div>
 </script>
-<script type="text/template" id="results-table">
-<div class="content-block-inner results">
+<script type="text/template" id="results-table-template">
     <div class="data-table data-table-init card">
-        <table>
-            <thead>
-                <tr>
-                    <th data-column="1">Magnet</th>
-                    <th data-column="2" class="label-cell sortable-cell">Name</th>
-                    <th data-column="3">Uploaded</th>
-                    <th data-column="4">Size</th>
-                    <th data-column="5" class="sortable-cell">Uploaded by</th>
-                    <th data-column="6" class="numeric-cell sortable-cell sortable-active">Seeders</th>
-                    <th data-column="7" class="numeric-cell sortable-cell">Leechers</th>
-                </tr>
-            </thead>
-            <tbody></tbody>
-        </table>
+        <div class="card-content">
+            <table id="results-table">
+                <thead>
+                    <tr>
+                        <th>Magnet</th>
+                        <th class="label-cell sortable-cell">Name</th>
+                        <th class="sortable-cell">Uploaded</th>
+                        <th class="sortable-cell">Size</th>
+                        <th class="sortable-cell">Uploaded by</th>
+                        <th class="numeric-cell sortable-cell" data-sort-method="number" data-sort-default>Seeders</th>
+                        <th class="numeric-cell sortable-cell" data-sort-method="number">Leechers</th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
     </div>
-</div>
 </script>
 <!--/templates-->
 <script src="bower_components/framework7/dist/js/framework7.min.js"></script>
+<script src="node_modules/tablesort/dist/tablesort.min.js"></script>
+<script src="node_modules/tablesort/dist/sorts/tablesort.number.min.js"></script>
 <script src="index.js"></script>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -106,20 +106,13 @@ Mgt.preloader.isDone = false;
 Mgt.preloader.done = function () {
     $$('.preloading-block').hide();
     $$('.content-block.results')
-        .append($$('#results-table').html())
+        .append($$('#results-table-template').html())
         .on('click', 'a.magnet', function () {
             clipboard.set($$(this).data('magnet'), 'text');
             myApp.alert('Magnet link for "' + $$(this).data('name') + '" copied to your system clipboard', 'Great success!');
-        })
-        .on('click', 'th.sortable-cell', function () {
-            // Switch active class
-            var th = $$(this);
-            th.siblings().removeClass('sortable-active');
-            th.addClass('sortable-active');
-            // Sort
-            var column = th.data('column');
-            Mgt.results.sort(column);
         });
+    console.log($$('#results-table'));
+    Mgt.results.table = new Tablesort($$('#results-table')[0], {descending: true});
 };
 
 // Results handlers
@@ -156,7 +149,7 @@ Mgt.results.add = function (magnet, name, uploaded, size, uploadedBy, seeders, l
     // Store magnet xt as added result
     Mgt.results.added.push(magnet.xt);
 
-    $$('.content-block-inner.results')
+    $$('#results-table')
         .find('tbody')
         .append($$(
             '<tr>' +
@@ -174,43 +167,7 @@ Mgt.results.add = function (magnet, name, uploaded, size, uploadedBy, seeders, l
             '</tr>'
         ));
 
-    // todo: trigger table sort?
-};
-Mgt.results.sort = function (columnNumber) {
-    var table, rows, switching, i, x, y, shouldSwitch, dir, switchCount = 0;
-    table = $$("#results-table");
-    switching = true;
-    dir = "asc";
-    while (switching) {
-        switching = false;
-        rows = table.find("tr");
-        for (i = 1; i < (rows.length - 1); i++) {
-            shouldSwitch = false;
-            x = rows[i].find("td")[columnNumber];
-            y = rows[i + 1].find("td")[columnNumber];
-            if (dir === "asc") {
-                if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
-                    shouldSwitch= true;
-                    break;
-                }
-            } else if (dir === "desc") {
-                if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
-                    shouldSwitch= true;
-                    break;
-                }
-            }
-        }
-        if (shouldSwitch) {
-            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
-            switching = true;
-            switchCount ++;
-        } else {
-            if (switchCount === 0 && dir === "asc") {
-                dir = "desc";
-                switching = true;
-            }
-        }
-    }
+    Mgt.results.table.refresh();
 };
 
 // Scraper

diff --git a/src/package.json b/src/package.json
@@ -14,6 +14,7 @@
     "cheerio": "^1.0.0-rc.2",
     "magnet-uri": "^5.1.7",
     "request": "latest",
+    "tablesort": "^5.0.1",
     "underscore": "^1.8.3",
     "valid-url": "^1.0.9"
   },