Fix colspan for non default sorts. (#91)

* Add example table for manual colspan testing in conjunction with data-sort class

* Handling colspan for non default sorts such as data-sort.

* Add test for clicking data-sort twice.

public/index.html

@@ -17,53 +17,53 @@ <h1>Manual testing of table sort js</h1>
           <th>Department</th>
           <th>Runtime</th>
           <th class="onload-sort">File Size</th>
-          <th>dates in dd/mm/yyyy</th>
           <th class="data-sort">data-sort days</th>
+          <th>dates in dd/mm/yyyy</th>
         </tr>
       </thead>
       <tr class="table-row-1">
         <td>Franklin</td>
         <td>Benjamin</td>
-        <td>1706/1/17</td>
+        <td>1706-1-17</td>
         <td>1</td>
         <td>k-level</td>
         <td>1h 1m 17s</td>
         <td>10b</td>
-        <td>17/6/1978</td>
         <td data-sort="2">Tuesday</td>
+        <td>17/6/1978</td>
       </tr>
       <tr class="table-row-2">
         <td>da Vinci</td>
         <td>Zarlo</td>
-        <td>1452/4/15</td>
+        <td>1452-4-15</td>
         <td>13000</td>
         <td></td>
         <td>1m 45s</td>
         <td>192038998987021b</td>
-        <td>18/10/2027</td>
         <td data-sort="3">Wednesday</td>
+        <td>18/10/2027</td>
       </tr>
       <tr>
         <td>Statham</td>
         <td>Jason</td>
-        <td>1967/7/26</td>
+        <td>1967-7-26</td>
         <td></td>
         <td>HR</td>
         <td>11m 40s</td>
         <td>134809b</td>
-        <td>4/9/2008</td>
         <td data-sort="5">Friday</td>
+        <td>4/9/2008</td>
       </tr>
       <tr>
         <td>Micheal</td>
         <td>Angelo</td>
-        <td>1958/8/21</td>
+        <td>1958-8-21</td>
         <td>54</td>
         <td>Marketing</td>
         <td>29s</td>
         <td>30980980b</td>
-        <td>2/3/1879</td>
         <td data-sort="4">Thursday</td>
+        <td>2/3/1879</td>
       </tr>
 
       <tr>
@@ -74,9 +74,88 @@ <h1>Manual testing of table sort js</h1>
         <td>Marketing</td>
         <td>41s</td>
         <td>902938402398b</td>
-        <td>8/6/1978</td>
         <td data-sort="1">Monday</td>
+        <td>8/6/1978</td>
       </tr>
     </table>
+    <H2>Testing table containing colspan and data-sort</H2>
+ <table class="available table-sort table-arrows">
+        <thead>
+            <tr>
+                <th class="disable-sort"></th>
+                <th class="">Category</th>
+                <th class="show_name">Show</th>
+                <th colspan="2" class="data-sort">Overall</th>
+                <th colspan="2" class="data-sort">On Our Dates</th>
+                <th >First Sold Out</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td class="tags"></td>
+                <td class="category">Comedy</td> <td class="show_name">Show 1</td>
+                <td class="ratio all" data-sort="72">18/25</td>
+                <td class="pct all">72%</td>
+                <td class="ratio ours" data-sort="75">3/4</td>
+                <td class="pct ours">75%</td>
+                <td>1999-07-30</td>
+            </tr><tr>
+                <td class="tags"></td>
+                <td class="category">Music</td>
+                <td class="show_name">Show 2</td>
+                <td class="ratio all" data-sort="60">6/10</td>
+                <td class="pct all">60%</td>
+                <td class="ratio ours" data-sort="75">3/4</td>
+                <td class="pct ours">75%</td>
+                <td>1999-08-04</td>
+            </tr><tr>
+                <td class="tags"></td>
+                <td class="category">Theatre</td>
+                <td class="show_name">Show 3</td>
+                <td class="ratio all" data-sort="47">7/15</td>
+                <td class="pct all">47%</td>
+                <td class="ratio ours" data-sort="75">3/4</td>
+                <td class="pct ours">75%</td>
+                <td>1999-07-19</td>
+            </tr><tr>
+                <td class="tags"></td>
+                <td class="category">Comedy</td>
+                <td class="show_name">Show 4</td>
+                <td class="ratio all" data-sort="67">10/15</td>
+                <td class="pct all">67%</td>
+                <td class="ratio ours" data-sort="67">2/3</td>
+                <td class="pct ours">67%</td>
+                <td>1999-07-19</td>
+            </tr><tr>
+                <td class="tags"></td>
+                <td class="category">Comedy</td>
+                <td class="show_name">Show 5</td>
+                <td class="ratio all" data-sort="75">9/12</td>
+                <td class="pct all">75%</td>
+                <td class="ratio ours" data-sort="50">1/2</td>
+                <td class="pct ours">50%</td>
+                <td>1999-07-29</td>
+            </tr><tr>
+                <td class="tags"></td>
+                <td class="category">Comedy</td>
+                <td class="show_name">Show 6</td>
+                <td class="ratio all" data-sort="67">16/24</td>
+                <td class="pct all">67%</td>
+                <td class="ratio ours" data-sort="50">2/4</td>
+                <td class="pct ours">50%</td>
+                <td>1999-07-26</td>
+            </tr><tr>
+                <td class="tags"></td>
+                <td class="category">Comedy</td>
+                <td class="show_name">Show 7</td>
+                <td class="ratio all" data-sort="62">16/26</td>
+                <td class="pct all">62%</td>
+                <td class="ratio ours" data-sort="50">2/4</td>
+                <td class="pct ours">50%</td>
+                <td>2022-07-31</td>
+            </tr>
+        </tbody>
+    </table>
   </body>
 </html>
+