CODEWITHSUNDEEP
datatablesmeteor
lfergon
lfergon

Reputation: 973

How update datatable without render all the table again?

I´m working with datatables for a meteor app. My problem is that when some fields change all the table is rendered again, if I´m on page two on the table or I order by field, the table is rendered again and I´m back on the beginning. My code:

Template.adminpage.rendered = function() {
   $('#userData').dataTable({
        "bDestroy":true,
        "aaSorting": [[ 0, "desc" ]],
        "bAutoWidth":false,
        "bFilter": false,
        "aoColumns": [
            { "bVisible": false },
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ],
        "aaData":  Template.adminpage.arrayUsersAdmin()
    });
}

Array that populates the table: 

Template.adminpage.arrayUsersAdmin=function() {
    var adminUsers = allUserData.find({roles: 'basic'});
    var arrayUserAdmin = [];
    var count=0;
    adminUsers.forEach(function(user) {
        var idColumn = user._id;
        var dateColumn=moment(user.createdAt).format("MMM Do HH:mm");
        var usernameColumn=username;
        var emailColumn=email;
        arrayUserAdmin[count]=[
            idColumn,
            dateColumn,
            usernameColumn,
            emailColumn
        ];
        count++;
    });
    return arrayUserAdmin;
}

Collection on the server:

if(Meteor.users.find({_id: this.userId}, {roles: 'admin'})){
    Meteor.publish("allUserData", function () {
        var self = this;
        var handle = Meteor.users.find({}).observeChanges({
            added: function(id, fields){
                self.added("allUsersCollection", id, fields);
            },
            changed: function(id, fields){
                self.changed("allUsersCollection", id, fields);
            },
            removed: function(id){
                self.removed("allUsersCollection", id); 
            }
        });
        self.ready();
        this.onStop(function() {
            handle.stop();
        }); 
    }); 
}

Thanks for your time.

Upvotes: 0

Views: 859

Answers (1)

Swadq
Swadq

Reputation: 1837

You can pass reactive: false as an option to find, which disables the underlying addition of a dependency, like so:

Template.adminpage.arrayUsersAdmin=function() {
    var adminUsers = allUserData.find({roles: 'basic'}, reactive: false);
    // Your code
    return arrayUserAdmin;
}

This behaviour is documented here

Alternatively, if you would like the individual fields to update, you will have to add them in yourself. To do this, you can use allUserDate.find({roles: 'basic'}).observe. This will require you, however, to edit the HTML directly, and is quite messy. A better alternative would be to change your table structure entirely - don't use a data table, use a vanilla HTML table, and sort the data with minimongo queries.

Regardless, you can use observe like so:

allUserData.find({roles: 'basic'}).observe({
    changed: function(newDocument, oldDocument) {
        // Update table
    }
});

Upvotes: 1

Related Questions