淘汰 JS 和 DataTables Ajax 和 PHP

Question

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 打印出我的 table，我有一个计数器显示潜在客户总数。

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

Answer 1

您只需使用 draw 重绘 table 即可显示更新后的更改

代码：

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
        }

工作fiddlehere

淘汰 JS 和 DataTables Ajax 和 PHP

Knockout JS and DataTables Ajax and PHP

php

ajax

jquery

datatables

knockout.js