將淘汰表與Datatables Ajax源一起使用

Question

我有一個這樣的數據表，並希望使我的數據表行具有可觀察到的剔除屬性。 能夠進行數據綁定的最佳方法是：“單擊”數據表中的一行。 我見過一個數據表敲除綁定，但它似乎不支持Ajax源。 我嘗試過使用foreach和模板綁定創建表並讓數據表從DOM初始化它的任何想法，但是它刪除了我擁有的綁定，因此當我單擊現在它不會執行任何操作。 似乎也很慢。 我想使用AJAX或JS Array。

         {            
            "bDeferRender" : true,
            "bProcessing" : true,
            "sDom": '<"top"r>t<"bottom"lp><"clear">',
            "oLanguage" : {
            "sLoadingRecords" : "&nbsp;",
                "sProcessing" : processDialog
            },
            "sAjaxSource":'/get_statistics',
            "sAjaxDataProp": 'landing_page_statistics',
            "fnServerParams": function (aoData) {
                aoData.push({"name": "start_date", "value": startDateEl.val()});
                aoData.push({"name": "end_date", "value": endDateEl.val()});
            },
            "aoColumns" : [
                {"mData" : "status", "sWidth": "6%"},
                {"mData" : "name"},
                {"mData" : "url"},
                {"mData" : "pageViews", "sWidth": "15%"},
                {"mData" : "leads", "sWidth": "5%"},
                {"mData" : "convRate", "sWidth": "12%"}
            ],
            "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                renderDataTableRow(nRow, aData, iDisplayIndex);
            },
            "fnFooterCallback" : function (nFoot, aData, iStart, iEnd, aiDisplay) {
               renderDataTableTotalsRow(nFoot, aData, iStart, iEnd, aiDisplay);
            },
            "fnDrawCallback": function( oSettings ) {
                // status tooltips
                $('.lp-status').tooltip();
            }
        }

Answer 1

我不確定我是否能理解你的問題，如果我這樣做，我的回答就像是在作弊，只是指向相關資料。 無論如何，這是可行的。

您的第一個選擇是使用加載模型並將 AJAX數據手動保存到視圖模型中或從視圖模型中保存 。 相關教程在解釋事物方面做得相當不錯。 加載歸結為：

// Load initial state from server, convert it to Task instances, then populate self.tasks
$.getJSON("/tasks", function(allData) {
    var mappedTasks = $.map(allData, function(item) { return new Task(item) });
    self.tasks(mappedTasks);
}); 

將其保存到您的服務看起來像這樣：

self.save = function() {
    $.ajax("/tasks", {
        data: ko.toJSON({ tasks: self.tasks }),
        type: "post", contentType: "application/json",
        success: function(result) { alert(result) }
    });
};

第二個相關選項是使用映射插件以基於約定的方式保存/加載ViewModel。 但是，您仍然需要一些布線才能與服務器通信。

對於View部分，在兩種情況下，我都認為您已經采用了正確的方法：在tbody上使用foreach綁定 ，並為每個ViewModel構造一行。

同樣，這是一個相當模糊/廣泛的答案，部分原因是您的問題很廣泛。 希望能幫助到你。

Answer 2

這是做到這一點的方法...我制作了一個jsfiddle顯示如下：

為了使它起作用，我必須在原始的敲除foreach綁定定義中添加兩個回調方法。 我目前正在嘗試將這些事件納入最新版本的淘汰賽中。 我需要添加一個beforeRenderAll和afterRenderAll回調來銷毀數據表，並在敲除foreach綁定添加html之后重新初始化數據表。 這就像一個魅力。JSFiddle顯示了它具有一個完全可編輯的jquery數據表，該數據表通過剔除綁定到ViewModel。

使用Knockout，您將不會使用數據表的Ajax實現。 您將使用已定義html的標准實現。 讓Knockout通過ajax加載數據並將其分配給可觀察數組來處理html。 然后，下面的自定義foreach綁定將破壞數據表，讓敲除以默認的敲除foreach方式處理html，然后綁定將重新初始化數據表。

var viewmodel = new function(){
   var self = this;
   this.Objects = ko.mapping.fromJS([]);
   this.GetObjects = function(){
       $.get('your api url here', function(data){
           ko.mapping.fromJS(
               data,
               {
                   key: function(o){ return ko.utils.unwrapObservable(o.Id); },
                   create: function(options){ return new YourObjectViewModel(options.data); }
               },
               that.Objects
           ); 
       });
   };
};

//Or if you do not need to map to a viewmodel simply just...
$.get('your api url here', function(data){
    viewmodel.Options(data);
});

下面是自定義數據表綁定...

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 };
    }
};