Multiple-sort with multiple tables is not working

Fix #959

src/extensions/multiple-sort/bootstrap-table-multiple-sort.js

@@ -15,13 +15,16 @@
     };
 
     var showSortModal = function(that) {
-        if (!$("#sortModal").hasClass("modal")) {
-            var sModal = '  <div class="modal fade" id="sortModal" tabindex="-1" role="dialog" aria-labelledby="sortModalLabel" aria-hidden="true">';
+        var _selector = that.$sortModal.selector,
+            _id = _selector.substr(1);
+
+        if (!$(_id).hasClass("modal")) {
+            var sModal = '  <div class="modal fade" id="' + _id + '" tabindex="-1" role="dialog" aria-labelledby="' + _id + 'Label" aria-hidden="true">';
             sModal += '         <div class="modal-dialog">';
             sModal += '             <div class="modal-content">';
             sModal += '                 <div class="modal-header">';
             sModal += '                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
-            sModal += '                     <h4 class="modal-title" id="sortModalLabel">' + that.options.formatMultipleSort() + '</h4>';
+            sModal += '                     <h4 class="modal-title" id="' + _id + 'Label">' + that.options.formatMultipleSort() + '</h4>';
             sModal += '                 </div>';
             sModal += '                 <div class="modal-body">';
             sModal += '                     <div class="bootstrap-table">';
@@ -57,12 +60,12 @@
 
             $("body").append($(sModal));
 
-            var $sortModal = $('#sortModal'),
-                $rows = $sortModal.find("tbody > tr");
+            that.$sortModal = $(_selector);
+            var $rows = that.$sortModal.find("tbody > tr");
 
-            $sortModal.off('click', '#add').on('click', '#add', function() {
-                var total = $sortModal.find('.multi-sort-name:first option').length,
-                    current = $sortModal.find('tbody tr').length;
+            that.$sortModal.off('click', '#add').on('click', '#add', function() {
+                var total = that.$sortModal.find('.multi-sort-name:first option').length,
+                    current = that.$sortModal.find('tbody tr').length;
 
                 if (current < total) {
                     current++;
@@ -71,20 +74,20 @@
                 }
             });
 
-            $sortModal.off('click', '#delete').on('click', '#delete', function() {
-                var total = $sortModal.find('.multi-sort-name:first option').length,
-                    current = $sortModal.find('tbody tr').length;
+            that.$sortModal.off('click', '#delete').on('click', '#delete', function() {
+                var total = that.$sortModal.find('.multi-sort-name:first option').length,
+                    current = that.$sortModal.find('tbody tr').length;
 
                 if (current > 1 && current <= total) {
                     current--;
-                    $sortModal.find('tbody tr:last').remove();
+                    that.$sortModal.find('tbody tr:last').remove();
                     that.setButtonStates();
                 }
             });
 
-            $sortModal.off('click', '.btn-primary').on('click', '.btn-primary', function() {
-                var $rows = $sortModal.find("tbody > tr"),
-                    $alert = $sortModal.find('div.alert'),
+            that.$sortModal.off('click', '.btn-primary').on('click', '.btn-primary', function() {
+                var $rows = that.$sortModal.find("tbody > tr"),
+                    $alert = that.$sortModal.find('div.alert'),
                     fields = [],
                     results = [];
 
@@ -113,7 +116,7 @@
                 if (results.length > 0) {
                     if ($alert.length === 0) {
                         $alert = '<div class="alert alert-danger" role="alert"><strong>' + that.options.formatDuplicateAlertTitle() + '</strong> ' + that.options.formatDuplicateAlertDescription() + '</div>';
-                        $($alert).insertBefore($sortModal.find('.bars'));
+                        $($alert).insertBefore(that.$sortModal.find('.bars'));
                     }
                 } else {
                     if ($alert.length === 1) {
@@ -122,7 +125,7 @@
 
                     that.options.sortName = "";
                     that.onMultipleSort();
-                    $sortModal.modal('hide');
+                    that.$sortModal.modal('hide');
                 }
             });
 
@@ -210,7 +213,9 @@
 
     BootstrapTable.prototype.initToolbar = function() {
         this.showToolbar = true;
-        var that = this;
+        var that = this,
+            sortModalId = '#sortModal_' + this.$el.attr('id');
+        this.$sortModal = $(sortModalId);
 
         _initToolbar.apply(this, Array.prototype.slice.apply(arguments));
 
@@ -219,7 +224,7 @@
                 $multiSortBtn = $btnGroup.find('div.multi-sort');
 
             if (!$multiSortBtn.length) {
-                $multiSortBtn = '  <button class="multi-sort btn btn-default' + (this.options.iconSize === undefined ? '' : ' btn-' + this.options.iconSize) + '" type="button" data-toggle="modal" data-target="#sortModal" title="' + this.options.formatMultipleSort() + '">';
+                $multiSortBtn = '  <button class="multi-sort btn btn-default' + (this.options.iconSize === undefined ? '' : ' btn-' + this.options.iconSize) + '" type="button" data-toggle="modal" data-target="' + sortModalId + '" title="' + this.options.formatMultipleSort() + '">';
                 $multiSortBtn += '     <i class="' + this.options.iconsPrefix + ' ' + this.options.icons.sort + '"></i>';
                 $multiSortBtn += '</button>';
 
@@ -228,7 +233,7 @@
                 showSortModal(that);
             }
 
-            this.$el.one('sort.bs.table', function() {
+            this.$el.on('sort.bs.table', function() {
                 isSingleSort = true;
             });
 
@@ -250,12 +255,14 @@
                 }
 
                 that.assignSortableArrows();
-                $('#sortModal').remove();
+                that.$sortModal.remove();
                 showSortModal(that);
             });
 
             this.$el.on('reset-view.bs.table', function() {
-                that.assignSortableArrows();
+                if (!isSingleSort && that.options.sortPriority !== null && typeof that.options.sortPriority === 'object') {
+                    that.assignSortableArrows();
+                }
             });
         }
     };
@@ -309,18 +316,17 @@
     };
 
     BootstrapTable.prototype.addLevel = function(index, sortPriority) {
-        var $sortModal = $("#sortModal"),
-            text = index === 0 ? this.options.formatSortBy() : this.options.formatThenBy();
+        var text = index === 0 ? this.options.formatSortBy() : this.options.formatThenBy();
 
-        $sortModal.find('tbody')
+        this.$sortModal.find('tbody')
             .append($('<tr>')
                 .append($('<td>').text(text))
                 .append($('<td>').append($('<select class="form-control multi-sort-name">')))
                 .append($('<td>').append($('<select class="form-control multi-sort-order">')))
-            );
+        );
 
-        var $multiSortName = $sortModal.find('.multi-sort-name').last(),
-            $multiSortOrder = $sortModal.find('.multi-sort-order').last();
+        var $multiSortName = this.$sortModal.find('.multi-sort-name').last(),
+            $multiSortOrder = this.$sortModal.find('.multi-sort-order').last();
 
         this.options.columns.forEach(function(column) {
             if (column.sortable === false || column.visible === false) {
@@ -346,28 +352,27 @@
         for (var i = 0; i < headers.length; i++) {
             for (var c = 0; c < that.options.sortPriority.length; c++) {
                 if ($(headers[i]).data('field') === that.options.sortPriority[c].sortName) {
-                    $(headers[i]).find('.sortable').addClass(that.options.sortPriority[c].sortOrder);
+                    $(headers[i]).find('.sortable').removeClass('desc asc').addClass(that.options.sortPriority[c].sortOrder);
                 }
             }
         }
     };
 
     BootstrapTable.prototype.setButtonStates = function() {
-        var $sortModal = $('#sortModal'),
-            total = $sortModal.find('.multi-sort-name:first option').length,
-            current = $sortModal.find('tbody tr').length;
+        var total = this.$sortModal.find('.multi-sort-name:first option').length,
+            current = this.$sortModal.find('tbody tr').length;
 
         if (current == total) {
-            $sortModal.find('#add').attr('disabled', 'disabled');
+            this.$sortModal.find('#add').attr('disabled', 'disabled');
         }
         if (current > 1) {
-            $sortModal.find('#delete').removeAttr('disabled');
+            this.$sortModal.find('#delete').removeAttr('disabled');
         }
         if (current < total) {
-            $sortModal.find('#add').removeAttr('disabled');
+            this.$sortModal.find('#add').removeAttr('disabled');
         }
         if (current == 1) {
-            $sortModal.find('#delete').attr('disabled', 'disabled');
+            this.$sortModal.find('#delete').attr('disabled', 'disabled');
         }
     };
-})(jQuery);
+})(jQuery);