Knockout JS and DataTables Ajax and 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);

i have this code which is printing out my table just fine using Knockout JS and DataTables, i have a counter which shows the total number of leads.

then i run my function to update the leads() observableArray; that updates the counter but not the table so my question is how do i get the table to add the row thats just been added to the array?

can you make us a repo in fiddle so we can help on it . cheers — super cool
– super cool, Commented Feb 28, 2015 at 7:40
jsfiddle.net/n3m89ntj Im not quite sure how i use this but normally the data is retrieved by getJSON and then inserted into the observableArray() it updates the counter but not the table — Simon Morris
– Simon Morris, Commented Feb 28, 2015 at 11:09
you have to redraw the table if any changes like appending/deleting etc i.e dt.draw() if you want to clear dt.clear().draw() . cheers — super cool
– super cool, Commented Feb 28, 2015 at 13:11
inside your update function and you can see table is cleared . check the sample fiddle here jsfiddle.net/n3m89ntj/7 . cheers — super cool
– super cool, Commented Feb 28, 2015 at 13:16

super cool · Accepted Answer · 2015-02-28 14:26:59Z

1

You just need to redraw the table using draw to show your updated changes

Code :

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
        }

Working fiddle here

edited Feb 28, 2015 at 14:26

answered Feb 28, 2015 at 14:19

super cool

6,0653 gold badges34 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Knockout JS and DataTables Ajax and PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related