Meteor - Make Datatables Reactive

Question

I'm having a problem with my Meteor app. Apparently, the datatable does not update properly. When I save a new data, it automatically adds a new row, but the table is not updating correctly (e.g. it says 'Showing 1 to 6 of 6 entries' when in fact it has 7 entries already.)

I also tried destroying the table then re-initializing it again, but no luck. I've read the autorun function, but I'm not sure how to implement it.

Is there a way to manually refresh/re-render the template via JS? So that I can just refresh it once I successfully add the data into the collection.

Here's my code:

html:

<!-- Teams -->
    <div class="col-lg-6">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <p><h3>Teams Collection</h3></p>
                <div class="hr-line-dashed"></div>
                <div class="master-teams-table">
                    <div class="table-responsive" style="overflow-x:initial !important;">
                        <table class="table table-striped table-bordered table-hover teamsTable" >
                            <thead>
                                <tr>
                                    <th class="text-center">Team Name</th>
                                    <th class="text-center">Abbreviation</th>
                                    <th class="text-center">Tower</th>
                                </tr>
                            </thead>
                            <tbody>
                                {{#each masterAllTeams}}
                                    <tr>
                                        <td>{{team_name}}</td>
                                        <td>{{team_abbreviation}}</td>
                                        <td>{{tower}}</td>
                                    </tr>
                                {{/each}}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>    
    </div>
    <!-- End of Teams -->

Helpers:

UI.registerHelper("masterAllTeams", function() {
    return TeamsCollection.find();
});

Thanks for all your help!!

Answer 1

You can monitor reactive updates using Tracker.autorun(). It provides you with a hook function which triggers each time a given reactive source updates.

Let's say you launched your datatable from some template's rendered invocation. You can then use the template's autorun:

Template.teamsTemplate.onRendered(function () {
  var teamsTable = $('.teamsTable').DataTable();
  this.autorun(function () {
    TeamsCollection.find(); // triggers the autorun every time the collection is altered
    teamsTable.ajax.reload();
  });
});

You can also mitigate the number of reloads by filtering for some condition. For example, if you don't want to trigger a reload every time a single document's property is changed (which will already be rewritten in the template by Blaze), you can just check whether the count() value has changed.

Template.teamsTemplate.onRendered(function () {
  var teamsTable = $('.teamsTable').DataTable();
  var teamsCount = TeamsCollection.find().count();
  this.autorun(function () {
    if (teamsCount !== TeamsCollection.find().count())
      teamsTable.ajax.reload();
  });
});

But be careful with filtering reloads, or you may get issues with DataTable's pagination : in case order of documents changes, for example, blaze may update the order of your items but the datatable won't be reloaded. I don't know this plugin very well, but it may cause trouble.