淘汰賽+數據表過濾不起作用

我有一個數據表，要在它能夠過濾行，數據從業務接入和通過淘汰賽綁定：淘汰賽+數據表過濾不起作用

<table class="table bordered hovered"> 
    <thead> 
     <tr> 
      <th>Id</th> 
      <th>Name</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: usersList"> 
     <tr> 
      <td data-bind="text: Id"></td> 
      <td data-bind="text: UserName"></td> 
     </tr> 
    </tbody> 
</table> 

function getUsers() { 
    $.getJSON('/api/aspnetusers', null, function (users) { 
     ViewModel.usersList.pushAll(users); 
    }); 
} 

getUsers(); 

$(function() { 
    $('.table').DataTable(); 
});

進入到東西濾波器輸入後，我總是：

No data available in table

來源

2014-10-01 Jack Malkovich

好像「用戶」沒有你所期望的數據。我會使用Chrome的開發工具和「console.debug（用戶）」;或「調試器」;在「ViewModel.usersList.pushAll（users）」之前的行查找從服務器收到的內容。此外，如果你是Windows用戶，應該嘗試從Telerik（http://www.telerik.com/fiddler）的提琴手嗅探HTTP請求/響應 – jevgenig 2014-10-01 07:16:38

我有用戶，我看到他們，但是當我嘗試過濾它們，綁定中斷 – 2014-10-01 07:23:47

請提供過濾代碼 – jevgenig 2014-10-01 07:25:00

這可能是一個時機問題，請嘗試等待，直到數據初始化數據表之前加載：

$.getJSON('/api/aspnetusers', null, function (users) { 
    ViewModel.usersList.pushAll(users); 
}).done(function(){ $('.table').DataTable(); });

來源

2014-10-01 07:33:39

Thakns男士，它的工作原理！ – 2014-10-01 07:37:14

太棒了！樂意效勞：） – 2014-10-01 17:17:45

這是做它的方式......我已經顯示這一個的jsfiddle：

爲了得到這個工作，我有兩個回調方法添加到原來的淘汰賽的foreach綁定定義。我目前正試圖將這些事件納入最新版本的淘汰賽。我需要添加一個beforeRenderAll和afterRenderAll回調來銷燬數據表，並在敲除foreach綁定後添加html來重新初始化數據表。這工作就像一個魅力JSFiddle顯示這個有一個完全可編輯的jQuery數據綁定到ViewModel通過淘汰賽。

ko.bindingHandlers.DataTablesForEach = { 
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
}, 
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 

     var value = ko.unwrap(valueAccessor()), 
     key = "DataTablesForEach_Initialized"; 

     var newValue = function() { 
      return { 
       data: value.data || value, 
       beforeRenderAll: function(el, index, data){ 
        if (ko.utils.domData.get(element, key)) {         
         $(element).closest('table').DataTable().destroy(); 
        } 
       }, 
       afterRenderAll: function (el, index, data) { 
        $(element).closest('table').DataTable(value.options); 
       } 

      }; 
     }; 

     ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext); 

     //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized 
     if (!ko.utils.domData.get(element, key) && (value.data || value.length)) { 
      ko.utils.domData.set(element, key, true); 
     } 

     return { controlsDescendantBindings: true }; 
}

};

jsfiddle with bootstrap

jsfiddle with jqueryUI

來源

2015-09-22 17:48:27

淘汰賽+數據表過濾不起作用

回答

相關問題