Knockout JS 和 DataTables Ajax 和 PHP答案

【问题标题】：Knockout JS and DataTables Ajax and PHPKnockout JS 和 DataTables Ajax 和 PHP
【发布时间】：2015-04-30 18:46:15
【问题描述】：

function Lead(data){
    this.id = data.id;
    this.name = ko.observable(data.name);
    this.number = ko.observable(data.mobile);
    this.email = ko.observable(data.email);
    this.return_date = ko.observable(data.return_date);
    this.advert = ko.observable(data.advert);
    this.date_enquired = ko.observable(data.date);

}

function leadView(){
   var self = this;
   
   self.leads = ko.observableArray([]);
   
    $.getJSON('ajax/leads.php', function(data){
            
            var mapped = $.map(data, function(info){
                return new Lead(info);
            });
            
            self.leads(mapped);
            
            var dt = $('#lead-table').DataTable({
                        dom: "tip",
                        ordering: false,
                        bProcessing: true,
                        data: self.leads(),
                        columns: [
                            {data: 'name()' },
                            {data: 'number()' },
                            {data: 'email()' },
                            {data: 'return_date()' },
                            {data: 'advert()' },
                            {data: 'date_enquired()' }
                        ]
                    });
        });

    self.update = function(){
        $.getJSON('leads.php', function(data){
            
            var mapped = $.map(data, function(info){
                return new Lead(info);
            });
            
            self.leads(mapped);
        });
     
    }
    
}

var DataLeadView = new leadView();

window.setInterval(DataLeadView.update, 5000);
ko.applyBindings(DataLeadView);

我有这段代码可以很好地使用 Knockout JS 和 DataTables 打印出我的表格，我有一个显示潜在客户总数的计数器。

然后我运行我的函数来更新leads() observableArray; 更新计数器但不更新表所以我的问题是如何让表格添加刚刚添加到数组中的行？

【问题讨论】：

你能给我们做一个 repo in fiddle 以便我们帮忙。欢呼
jsfiddle.net/n3m89ntj 我不太确定我是如何使用它的，但通常数据是由 getJSON 检索的，然后插入到 observableArray() 中，它会更新计数器而不是表
如果您想清除 dt.clear().draw() ，则必须重新绘制表格，例如追加/删除等，即 dt.draw() 。欢呼
我应该把 dt.clear().draw() 放在哪里？
在你的更新函数中，你可以看到 table is clear 。在此处查看示例小提琴jsfiddle.net/n3m89ntj/7。欢呼

标签： php jquery ajax knockout.js datatables

【解决方案1】：

您只需要使用draw 重新绘制表格以显示您更新的更改

代码：

self.update = function () {

            var mapped = $.map(data, function (info) {
                return new Lead(info);
            });

            self.leads(mapped);
            dt.clear(); // clear table
            dt.rows.add(self.leads()); // build the source again by adding
            dt.draw() ; // draw table with added rows
        }

工作小提琴here

【讨论】：