CODEWITHSUNDEEP
mongodbjoinmeteordatatables
Manu
Manu

Reputation: 301

Datatables with Meteor using Collections Join

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

todos Collection

lists Collection

lists Collection

Thanks and Best Regards, Manu

Upvotes: 1

Views: 745

Answers (2)

Laurent Roger
Laurent Roger

Reputation: 208

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) enter image description here

Search, pagination, sorting works fine with meteor add lc3t35:datatables-bootstrap3 !

Upvotes: 1

Faysal Ahmed
Faysal Ahmed

Reputation: 1542

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.

Upvotes: 0

Related Questions