CODEWITHSUNDEEP
jquerymeteordatatables
MChan
MChan

Reputation: 7212

JQuery DataTable not working on Meteor

I am trying to implement jQuery DataTables in my Meteor project, but I am always getting the following error. Can someone please tell me what I am missing / doing wrong here? Below is my Meteor app code. Thanks.

Uncaught TypeError: Cannot set property 'pagesData' of undefined underscore.js:848
Error: Exception from Tracker recompute function:
Error: Can't call non-function: undefined
    at Spacebars.call (http://localhost:3000/packages/spacebars.js?cb20740019f26bdca2faa89ba9c973f618118521:172:13)
    at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?cb20740019f26bdca2faa89ba9c973f618118521:106:25)
    at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?cb20740019f26bdca2faa89ba9c973f618118521:110:39)
    at null._render (http://localhost:3000/packages/jquery-datatables.js?bf10e73db3f8b2f4afdc77c33ba3c62092556ae7:1010:22)
    at doRender (http://localhost:3000/packages/blaze.js?7b7ff7ee2ccdccd85a1ad0d8dc9d96193e29e8b0:1853:25)
    at http://localhost:3000/packages/blaze.js?7b7ff7ee2ccdccd85a1ad0d8dc9d96193e29e8b0:1795:16
    at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?7b7ff7ee2ccdccd85a1ad0d8dc9d96193e29e8b0:2029:12)
    at viewAutorun (http://localhost:3000/packages/blaze.js?7b7ff7ee2ccdccd85a1ad0d8dc9d96193e29e8b0:1794:18)
    at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:288:36)
    at new Tracker.Computation (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:206:10)

Project.html - Client folder

<template name="projectslist">
  <div class="projectslist">

    <div>
        {{> DataTable dtProjects }}
    </div>

  </div>
</template>

Projectlist.js - Client folder

Template.projectslist.dtProjects =  function() {    
  return {
    id: "my-unique-table-id",
    columns: [
      {
        title: "Name",
        data: "name"
      }, {
        title: "Description",
        data: "description"
      }, {
        title: "Delivery Date",
        data: "deliverydate"
      }
    ],
    subscription: "dtProjects",
    query: {
      grade: "A"
    }
  };
};

Server.js - Server Folder

var ProjectsTable;
  ProjectsTable = new DataTableComponent({
    subscription: "dtProjects",
    collection: Projects
  });
  ProjectsTable.publish();

Projects.js - Available for both Server and Client:

Projects = new Mongo.Collection('projects');

Upvotes: 2

Views: 2246

Answers (2)

Mahmoud Metwally
Mahmoud Metwally

Reputation: 990

As per meteor-talk, JQuery dataTables duplicates a lot of the sorting and DOM manipulation functions that MiniMongo, Spark, and Spacebars provide. So even if you can get the styling sorted out (or decided to ignore styling), sorting and other functions wind up not behaving like one is expecting when the table reactively updates underneath DataTables.

Having said so, on July 30, 2014 Austin Rivas, the creator of the meteor-jquery-datatables (which menway - creator of the menway:jquery-datatables package forked to create the Meteor Datatable package) mentioned in Meteor Google support groups:

There are lots of difficulties with using jquery-datatables and meteor together do to duplicate functionality and having to reconcile jquery-datatables dom state with meteor reactivity.

So it might be a good idea to check another package or possibly check alternative approaches for pagination: https://github.com/awatson1978/clinical-ui-crud-table

Personally I would recommend Reactive Table https://github.com/ecohealthalliance/reactive-table. It is quite stable, easy to implement / configure.

See also:

Upvotes: 5

Seth Malaki
Seth Malaki

Reputation: 4486

  1. Remove the mrt version:

    mrt remove jquery-datatables

  2. Add the Meteor 0.9+ version:

    meteor add menway:jquery-datatables

However, it seems like it is still not 0.9 compatible as package.js still uses spacebars. Give it a shot, though.

Maybe it's worth looking at this extension instead: https://atmospherejs.com/ephemer/reactive-datatables

Upvotes: 1

Related Questions