Datatables with Meteor using Collections Join - mongodb

Question

I want to display the data in a tabular fashion, Data will be fetched using the joins of collection from Mongo DB , I have some experience in Datatables that I have used in my previous projects
I have been trying with lots of Meteor stuff to accomplish this.
What I tried and What is the result:
I am using loftsteinn:datatables-bootstrap3 (https://github.com/oskarszoon/meteor-datatables-bootstrap3/) I am trying to display the data using joining of two collections, for Joining of collections I am using : https://atmospherejs.com/reywood/publish-composite.
The Issue : as the data gets fetched and the page gets rendered with the table it shows 0 records, but after a few seconds rows get populated and datatable gets filled but still shows 0 records.
To Counter this issue I have to set timeout for few seconds and then it shows correctly.
Is there any better way, as I feel that in case the data gets increased, I may face issues again.
Possible Solutions with Other Packages?
Is anybody has expirience in Joining of Collections and displaying correctly in the tabular format with Pagination, Sorting and Search?
I would Appriciate any help in this.
CODE:
TEMPLATE
<template name="testdatatable">
{{#if Template.subscriptionsReady}}
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="myTable">
<thead>
<tr>
<th>Todos Name</th>
<th>List Name</th>
</tr>
</thead>
<tbody>
{{#each todos}}
<tr>
<td>{{name}}</td>
<td>{{lists.name}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{else}}
<div class="loading">{{>spinner}}</div>
{{/if}}
</template>
TEMPLATE HELPER
Template.testdatatable.helpers({
todos: function() {
console.log(Todos.find());
return Todos.find();
},
lists: function() {
return Lists.findOne(this.listId);
}
});
PUBLISH COMPOSITE using ( reywood:publish-composite )
Meteor.publishComposite('tabular_Todos', {
find: function () {
return Todos.find();
},
children: [
{
find: function(todos) {
return Lists.find({_id: todos.listId });
}
}
]
});
ROUTING USING (iron Router)
Router.route('/testdatatable', {
name: 'testdatatable',
template: 'testdatatable',
onAfterAction: function(){
calltestdatatable();
},
subscriptions: function(){
return Meteor.subscribe('tabular_Todos');
}
});
OTHER FUNCTIONS
ON RENDERED
Template.testdatatable.onRendered(function(){
setTimeout(calldatatable, 2000);
});
SETTING A TIMEOUT TO DELAY THE DATATABLE
function calltestdatatable(){
setTimeout(calldatatable, 2000);
}
DATATABLE INITIALISATION
function calldatatable(){
$('#myTable').DataTable();
}
DATABASE
todos Collection
lists Collection
Thanks and Best Regards,
Manu

Answer 1

here is my route that fixes the problem :
Router.route('testdatatable', {
path: '/testdatatable',
name: 'testdatatable',
template: 'testdatatable',
waitOn: function() {
return [
Meteor.subscribe('tabular_Todos')
];
},
subscriptions: function(){
return Meteor.subscribe('tabular_Todos');
}
});
and template
Template.testdatatable.onRendered(function(){
$('#myTable').dataTable();
});
(as I used the --example todos, I had to change {{name}} as {{text}} to display the todo text)
Search, pagination, sorting works fine with meteor add lc3t35:datatables-bootstrap3 !

Answer 2

Answer to your first question.
your data needs to come into minimongo first, then client side will be able to render those data. As a workaround you can use loading animation. a quick solution would be using sacha:spin package. and your Blaze code will be something similar to this.
{{#if Template.subscriptionsReady}}
// load your view
{{else}}
<div class="loading">{{>spinner}}</div>
{{/if}}
your second problem is that ,db gets filled but table shows nothing except row skeleton. It's most probably because you have either problems with helper function or in the Blaze view. As you've not posted any code, it's hard to identify problem.
And to other questions: there are quite good numbers of packages for pagination and search. checkout atmosphere. you'll find some popular packages like pages and easy-search. you need to decide which suits for your project.