Rewrite table sorter to correctly handle colspan

weblate/media/js/loader.js

@@ -147,49 +147,52 @@ function cell_cmp(a, b) {
 
 function load_table_sorting() {
     $('table.sort').each(function() {
-        var table = $(this);
+        var table = $(this),
+            tbody = table.find('tbody'),
+            thead = table.find('thead'),
+            thIndex = 0;
         $(this).find('thead th')
             .each(function(){
 
             var th = $(this),
-                thIndex = th.index(),
-                inverse = 1,
-                tbody = th.parents('table').find('tbody'),
-                thead = th.parents('table').find('thead');
-            if (th.text() == '') {
-                return;
+                inverse = 1;
+            // handle colspan
+            if (th.attr('colspan')) {
+                thIndex += parseInt(th.attr('colspan')) - 1;
             }
-            if (th.find('span.ui-icon').length > 0) {
-                return;
-            }
-            // Second column contains percent with colspan
-            if (thIndex >= 2 && !table.hasClass('simple')) {
-                thIndex += 1;
-            }
-            th.attr('title', gettext("Sort this column")).addClass('sort').append('<span class="sort ui-icon ui-icon-carat-2-n-s" />');
+            // skip empty cells and cells with icon (probably already processed)
+            if (th.text() != '' && th.find('span.ui-icon').length == 0) {
+                // Store index copy
+                var myIndex = thIndex;
+                // Add icon, title and class
+                th.attr('title', gettext("Sort this column")).addClass('sort').append('<span class="sort ui-icon ui-icon-carat-2-n-s" />');
 
-            th.click(function(){
+                // Click handler
+                th.click(function(){
 
-                tbody.find('td,th').filter(function(){
-                    return $(this).index() === thIndex;
-                }).sortElements(function(a, b){
-                    return inverse * cell_cmp($.text([a]), $.text([b]));
-                }, function(){
+                    tbody.find('td,th').filter(function(){
+                        return $(this).index() === myIndex;
+                    }).sortElements(function(a, b){
+                        return inverse * cell_cmp($.text([a]), $.text([b]));
+                    }, function(){
 
-                    // parentNode is the element we want to move
-                    return this.parentNode;
+                        // parentNode is the element we want to move
+                        return this.parentNode;
 
-                });
-                thead.find('span.sort').removeClass('ui-icon-carat-1-n ui-icon-carat-1-s').addClass('ui-icon-carat-2-n-s');
-                if (inverse == 1) {
-                    $(this).find('span.sort').addClass('ui-icon-carat-1-n').removeClass('ui-icon-carat-2-n-s');
-                } else {
-                    $(this).find('span.sort').addClass('ui-icon-carat-1-s').removeClass('ui-icon-carat-2-n-s');
-                }
+                    });
+                    thead.find('span.sort').removeClass('ui-icon-carat-1-n ui-icon-carat-1-s').addClass('ui-icon-carat-2-n-s');
+                    if (inverse == 1) {
+                        $(this).find('span.sort').addClass('ui-icon-carat-1-n').removeClass('ui-icon-carat-2-n-s');
+                    } else {
+                        $(this).find('span.sort').addClass('ui-icon-carat-1-s').removeClass('ui-icon-carat-2-n-s');
+                    }
 
-                inverse = inverse * -1;
+                    inverse = inverse * -1;
 
-            });
+                });
+            }
+            // Increase index
+            thIndex += 1;
         });
 
     });