Javascript 在Datatables Ajax源代码中使用Knockout

我有一个这样的数据表，并且希望使我的数据表行具有可忽略的可观察属性。能够绑定数据的最佳方法是什么：“单击”数据表中的一行。我见过datatables淘汰绑定，但它似乎不支持ajax源代码。我尝试过使用foreach和模板绑定来创建表，并让datatables从DOM中初始化它，但它删除了我以前的绑定，所以当我单击now时，它什么也不做。也似乎很慢。我想使用AJAX或JS数组

         {            
            "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();
            }
        }

{
“bDeferRender”：没错，
“bProcessing”：正确，
“sDom”：“t”，
“语言”：{
“sLoadingRecords”：“，
“sProcessing”：processDialog
},
“sAjaxSource”：“/get_statistics”，
“sAjaxDataProp”：“登录页面统计”，
“fnServerParams”：函数（aoData）{
推送（{“name”：“start_date”，“value”：startDateEl.val（）}）；
推送（{“name”：“end_date”，“value”：enddatel.val（）}）；
},
“aoColumns”：[
{“mData”：“status”，“sWidth”：“6%”，
{“mData”：“name”}，
{“mData”：“url”}，
{“mData”：“页面浏览量”，“sWidth”：“15%”，
{“mData”：“leads”，“sWidth”：“5%”，
{“mData”：“convRate”，“sWidth”：“12%”
],
“fnRowCallback”：函数（nRow、aData、iDisplayIndex）{
renderDataTableRow（nRow、aData、iDisplayIndex）；
},
“fnFooterCallback”：函数（nFoot、aData、iStart、iEnd、aiDisplay）{
renderDataTableTotalsRow（nFoot、aData、iStart、iEnd、aiDisplay）；
},
“fnDrawCallback”：函数（oSettings）{
//状态工具提示
$（'.lp status'）。工具提示（）；
}
}

我不确定我是否理解了你问题的要点，如果我理解了，我的回答感觉像是作弊，只是指向相关的来源。不管怎么说，都是这样

第一个选项是手动在视图模型之间使用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) }
    });
};

第二个相关的选项是使用以基于约定的方式保存/加载ViewModels。不过，您仍然需要一些连线来与服务器通信

对于视图部分，在这两种情况下，我认为您已经有了正确的方法：在

tbody

上使用a，并为每个ViewModel构造一行

---

同样，这是一个相当模糊/宽泛的答案，部分原因是你的问题相当宽泛。希望能有所帮助。

这是一种方法。。。我做了一个展示：

为了实现这一点，我必须在原始的knockout-foreach绑定定义中添加两个回调方法。我目前正在尝试将这些活动纳入最新版本的淘汰赛。我需要添加BeforeRenderal和AfterRenderal回调来销毁datatable，并在敲除foreach绑定添加html后重新初始化datatable。这就像一个符咒，JSFIDLE显示它有一个完全可编辑的jquery数据表，通过敲除绑定到ViewModel

使用Knockout，您将不会使用datatables的ajax实现。您将使用已经定义了html的标准实现。让Knockout通过ajax加载数据并将其分配给可观察数组来处理html。下面的自定义foreach绑定将销毁datatable，让knockout以默认的knockout-foreach方式处理html，然后绑定将重新初始化datatable

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

---

对不起，我有一个大问题，但是我有很多问题要解决。我现在的问题是如何将这些方法与datatables.net jquery插件结合起来，特别是datatables.netAh的AJAX源代码实现，我非常抱歉。不知怎的，我错过了你问题中的那些标签。我可能会删除我的答案（或者可能会把它留给别人看，即使它对你没有用处）。我在datatables.net上没有经验，所以我不能对此发表评论。这并不能回答问题。在DataTables中使用Ajax模式的全部意义在于，它可以在需要时自动发出Ajax请求（搜索值更改、排序列更改、页面更改等）。