DataTable plugin with Meteor

help
1

I want to use DataTable in my project. So I downloaded the plugin and I integrated it in my app. I tested it with static data it’s work perfectly, but when I want to display data from my DB, I get this message No data available in table despite the data already displayed.

Client.html :

829×586 46.6 KB

Client.js:

Clients = new Mongo.Collection('clients');
Template.Clients.onCreated(function() {
  var self = this;
  self.autorun(function() {
    self.subscribe('clients');
  });
});
Template.Clients.rendered = function(){
    // Initialize dataTables
    $('.dataTables-example').DataTable();
});
Template.Clients.helpers({
    clientsLive(){
    console.log("Client: ",Clients.find({}).count());
    return Clients.find({});
  },
});

server/publishes.js :

if (Meteor.isServer) {
  Meteor.publish('clients', function(){
    //Meteor._sleepForMs(2000);
    return Clients.find();
  }); 
}

The result :

1172×318 18.5 KB

Sort, search and pagination doesn’t work ! it seems the DataTable loaded before the data received or something like that !
Any one had the same problem ? Did I miss something ! :frowning:

2

Hey kiko91, have you taken a look at the Tabular package? It’s a really easy way to use data tables in your app and it manages the publication/subscription automatically.

1 Like
3

Hey !
I took a look but I thought it is not possible to display buttons in the table, no?

4

Sure it is. In your tabular table’s definition, for the action column, instead of providing a data key, use tmpl: Meteor.isClient && Template.myTablesActionButtons.

1 Like
5

Thank you dancastellon ^^ ! Sorry I still want an explanation to my pb :smile:

6

The onRendered event is fired when all the non-reactive elements of the template are ready.

At that time it’s very likely that your subscription will not have received any of the published documents. So your datatable will be referencing an empty (or part-empty) table when it’s instantiated.

1 Like
7

Why is fired the onRendered event ? “non-reactive elements” what do u mean ?
Any suggestion ? :wink:

8

This is your onRendered (except you are using rendered, which has been deprecated for a couple of years!).

Template.Clients.rendered = function(){
    // Initialize dataTables
    $('.dataTables-example').DataTable();
});

The “fixed” HTML parts of the DOM.

I can’t see all your template in that png, but most of it is reactive : anything relying on a helper (like {{#if Template.subscriptionsReady)}}, {{#each clientsLive}}. <td>{{name}}</td> etc.

The easiest action is to make use of that {{#if Template.subscriptionsReady)}} section to instantiate a new template, the onRendered of which executes the $('.dataTables-example').DataTable(); line. It’s not a very clean solution, mainly because that bit of jQuery is operating at the global page level, rather than the template or parent template level, but I think it will work!

1 Like
9

Yes I know ! it’s an old project I work in.

How ? :unamused:

10

{{> someOtherTemplate}}

1 Like
11

How did you do that ?
How did you defined Datatable() ?

Did you look at this package : https://github.com/lc3t35/meteor-datatables-bootstrap3 ?

1 Like
12

I did exactly that (link u share it) :wink: But this is not my pb !

13

I think you’ve created your collection on your “Client” folder, put it on both folder or outside “Client” where the server will sees it.