的jQuery的tablesorter與淘汰賽 - 添加行

Question

我試圖與savesort微件用的tablesorter。該表由knokout填充。

首次填充表，我得到正確的行量，而且記得排序。然後我用數據重新填充表，使用ajax並綁定到敲除數組。數據然後翻倍，但淘汰賽（正確），只追蹤一半的數據。

到目前爲止，我已經跟蹤它時，我應用保存在此方法排序：

self.tablesorter = function() { 
         $('table.tablesorterTranslation').trigger("update"); 
         setTimeout(function() { 
          var sl = $.tablesorter.storage($('table.tablesorterTranslation'), 'tablesorter-savesort'); 
          var sortList = (sl && sl.hasOwnProperty('sortList') && $.isArray(sl.sortList)) ? sl.sortList : ''; 
          if (sortList && sortList.length > 0) { 
           // update sort change 
           $('table.tablesorterTranslation').trigger("sorton", [sortList]); 
          } 
         }, 1000); 
         return false; 
        }; 

這個方法被擊倒稱爲postaction結合。

在該方法被調用之前，我有一個表格用於挖空陣列中的每個項目，在postaction之後，我有兩個，一個被挖空跟蹤，一個似乎被tablesorter添加。

這是由於緩存的tablesorter值，並且是有辦法清洗嗎？

的HTML：

<table class="tablesorterTranslation" data-bind="visible: contents().length > 0"> 
       <colgroup> 
        <col class="referencenumber"/> 
        <col class="title"/> 
       </colgroup> 
       <thead> 
        <tr> 
         <th class="referencenumber">Ref number</th> 
         <th class="title">Title</th> 
        </tr> 
       </thead> 
       <tbody data-bind="foreach: contents, postAction: tablesorter(), visible: contents().length > 0"> 
        <tr> 
         <td class="referencenumber"> 
          <span data-bind="text: contentReferenceNumber"></span> 
         </td> 
         <td class="title"> 
          <a data-bind="attr: {href: previewUrl, title: previewTitle}, click: previewpopup" class="preview_translation"><%: AdminResources.Menu_Preview %></a> 
         </td> 
       </tr> 
      </tbody> 
     </table> 

是重新填充表阿賈克斯：

self.setContentList = function() { 
         if ($('#LanguageIdNameValuePairs option').length > 0) { 
          self.contents.removeAll(); 
          self.loading(true); 
          $.ajax('<%= Url.Action("GetContentList", "TranslateContentMenu") %>', 
           { 
            dataType: 'json', 
            data: { 
             languageId: $('#LanguageIdNameValuePairs').val(), 
             page: self.page 
            }, 
            success: function (allData) { 
             var mappedContent = $.map(allData, function (item) { return new ContentViewModel(item); }); 
             self.loading(false); 
             self.contents(mappedContent); 
            } 
           }); 
         } else { 
          self.contents(new Array()); 
         } 
        }; 

的contentviewmodel：

(function (ko) { 
    PODIUM.translation.ContentViewModel = function(data) { 
     this.contentReferenceId = ko.observable(data.contentReferenceId); 
     this.contentName = data.contentName; 
     this.previewUrl = ko.observable(data.previewUrl); 
     this.previewTitle = ko.observable(data.previewTitle); 
     this.publishTitle = ko.observable(data.publishTitle); 
     this.contentReferenceNumber = ko.observable(data.contentReferenceNumber); 
    }; 
}(ko)); 

和最後填充表和定義tablesort，與savesort （savingort是我認爲的問題）。

 $('#OptionsMenu').change(function() { 
      viewModel.setContentList(); 
     }); 
     $('table.tablesorterTranslation').tablesorter({ 
      widgets: ["saveSort"], 
      widgetOptions: {} 
     }); 

我有一個選擇列表，具有一定的價值，當這種變化，我從服務器獲取新的價值觀和重新填充表。這是它記住舊值的地方，但我想「清理」表並重新開始。

Answer 1

我找到了答案我自己，而不是一個我想要的。

基本上，因爲我使用的淘汰賽，我不應該做的更改視圖本身，而是改變視圖模型。所以，我看了一下排序數組，並讓淘汰賽完成剩下的魔術。

我開始通過刪除的tablesorter的所有痕跡（除了上表中的CSS類，因爲我是用這個樣式表的話）。

然後我說此方法：

  self.sortContents = function (element, sortProperty) { 
       var elem = $(element); 
       var direction = (elem.hasClass('headerSortDown')) ? 'headerSortUp' : 'headerSortDown'; 
       var selector = $.trim($(element).attr('class').replace('header', '').replace('headerSortUp', '').replace('headerSortDown', '')); 
       if (direction == 'headerSortUp') { 
        self.filterStorage.updateSortFilter(selector, sortProperty); 
        self.contents.sort(function(left, right) { 
         return left[sortProperty] == right[sortProperty] ? 0 : (left[sortProperty] > right[sortProperty] ? -1 : 1); 
        }); 
        elem.removeClass('headerSortDown'); 
        elem.addClass('headerSortUp'); 
       } else { 
        self.filterStorage.updateSortFilter(selector, sortProperty); 
        self.contents.sort(function (left, right) { 
         return left[sortProperty] == right[sortProperty] ? 0 : (left[sortProperty] < right[sortProperty] ? -1 : 1); 
        }); 
        elem.removeClass('headerSortUp'); 
        elem.addClass('headerSortDown'); 
       } 
      }; 

通知IM使用相同的CSS類作爲tablesort插件，這是因爲的tablesorter在應用中的其它地方已被使用，並且CSS中已經存在的那些類。

我改變了表頭這樣的：

<th class="title header" data-bind="click: function(data, event){ return sortContents($(event.target), 'contentName')}"><%: AdminResources.ContentOverview_Title %></th> 

然後，因爲我在這個爛攤子起身，試圖挽救那種狀態，我必須把什麼事情弄清楚這一點。所以我創建了一個新的方法，更新和獲取類。這節省了哪些標題與排序，和方向。

function getSortFilter() { 
    var cookie = $.cookie(tableSortedByCookie); 
    return JSON.parse(cookie); 
} 
function updateSortFilter(selector, property) { 
    $.cookie(tableSortedByCookie, null); 
    $.cookie(tableSortedByCookie, JSON.stringify({ selector: selector, property: property }), { path: '/' }); 
} 

你可以在sortcontents方法中看到更新的用法。 （此方法在包含該表的頁面的視圖模型上）。

我加入這阿賈克斯成功方法的底部：

var tableSortCookie = self.filterStorage.getSortFilter(); 
if (tableSortCookie != null && tableSortCookie.selector != null) { 
    var header = $('.tablesorterTranslation th.' + tableSortCookie.selector); 
    self.sortContents(header, tableSortCookie.property); 
} 

然後，我能夠利用基因敲除替代，以及存儲狀態和裝載狀態回來時對數據進行排序更改數據和刷新頁面。