Replies

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 2014 edited April 2014

  Very cool! Thanks for sharing this with us :-).
  
  I've added a link on the DataTables news feed.
  
  Allan
  
  (p.s. you might want to add a license to indicate if it is OSS, and if so what license, or if it is commercial etc)
• austinrivas Posts: 8Questions: 2Answers: 0

  April 2014

  Thanks @allan!
  
  I've added an MIT License to the repo, I usually neglect that kind of thing so thanks for the reminder.
  
  Also, here is the example code in JS for the uninitiated : )
  
  On the Client :
  [code]
  if (Meteor.isClient)
  Template.home.browsers = {
  columns: [
  {
  sTitle: "Engine",
  mData: "engine"
  },
  {
  sTitle: "Browser",
  mData: "browser"
  },
  {
  sTitle: "Platform",
  mData: "platform"
  },
  {
  sTitle: "Version",
  mData: "version",
  sClass: "center"
  },
  {
  sTitle: "Grade",
  mData: "grade",
  sClass: "center",
  mRender: function (dataSource, call, rawData) {
  if (rawData == null) rawData = "";
  switch rawData.grade
  when "A" then return "A"
  else return rawData.grade
  if (rawData.grade === "A") return "A";
  return rawData.grade;
  }
  },
  {
  sTitle: "Created",
  mData: "createdAt",
  mRender: function (dataSource, call, rawData) {
  if (rawData.createdAt == null) rawData.createdAt = "";
  if (rawData.createdAt)
  return moment(rawData.createdAt).fromNow()
  else
  return rawData.createdAt || "";
  },
  {
  sTitle: "Counter",
  mData: "counter"
  }
  ],
  selector: "dataTable-browsers",
  collection: Browsers,
  subscription: "all_browsers",
  options: {
  oLanguage: {
  sProcessing: "You must construct additional pylons!"
  }
  },
  query: {
  grade: "A"
  }
  }
  [/code]
  
  On the server :
  [code]
  if (Meteor.isServer) {
  DataTable.debug = "true";
  DataTable.publish("all_browsers", Browsers);
  }
  [/code]
• rwillmer Posts: 10Questions: 1Answers: 0

  April 2014

  Excellent! Thanks for sharing this
  Rachel
• austinrivas Posts: 8Questions: 2Answers: 0

  May 2014

  Updated to v1.10.0 and all I had to do was change the css selector for the filter from

  [code] .dataTables_filter input[type=text] [/code]

  to

  [code] .dataTables_filter input[type=search] [/code]

  gotta love well tested code :)

  really looking forward to playing around with the new api.
• austinrivas Posts: 8Questions: 2Answers: 0

  May 2014 edited May 2014

  Meteor jQuery DataTable v1.0.0

  I have finally been able to merge in the following features, along with testing for the core functionality, and upgrade the meteor jquery-datatables package to v1.0.0

  Your feedback is always welcomed and encouraged.

  Reactive Query

  Live Example

  The query parameter for reactive tables is now reactive ( duh ). My goal was to have the table impose no structure on the query and just use raw mongoDB selector.

  The basic idea is that you set a session variable ( or some other reactive datasource ) to your initial query and then use that var as the query parameter for the table component. Whenever the query parm changes the table will automagically rerender using the new query to fetch its dataset.

  You can see a basic implementation of this there. In this example the table controls just extend the query object with whatever value they are set to. I tried to include examples of all the common control types, but if you think of any that I missed feel free to let me know.

  Currently applying the filter can cause a somewhat janky table reload depending on what its contents looks like, this is something I plan on addressing ASAP.

  Server Base Query

  I changed the way that the DataTable class publishes data. Instead of publish() being a static method it is now an instance method that requires a DataTable instance. I think this is a more sustainable structure that will allow for a lot more flexibility in the future.

  Here is how you instantiate a server DataTable component.

  RowsTable = new DataTableComponent
    subscription: "rows"
    collection: Rows
    query:
      someProperty: "someValue"
      otherProperty: $regex: "value"
      nested:
        property: $gte: 0
  

  The query you define on the server will limit your dataset to the client while preserving all of the pagination, sorting, and filtering.

  TODOS

  Filter / Control Plugins

  I would like to begin leveraging datatables plugins api so that it is possible to apply table controls and filters via the dom property. This would duplication the functionality seen in the example, but automate the binding process for the table controls filters.

  Janky Table Load on Filter

  Currently applying new filters to a table causes a somewhat janky table reload. This is something I would like to address ASAP.

  @allan if you have any free time ( lol ) I would love to pick your brain on the best way to solve this.

  Breaking Changes

  The DataTableComponent is now classy cased along with the actual template name.

  {{> DataTable options }}
  

  instead of

  {{> dataTable options }}
  

  Please try to break this as much as possible, @landland has reported some problems with nested properties, but I haven't had time to confirm or test that.

  • Austin
• procrazium Posts: 1Questions: 0Answers: 0

  August 2014

  Can you please give a simple example in javacript/jquery? I have to finish and deliver the data-table implementation for my meteor project by Friday but the coffee script code is least helpful since I dont know how to write or understand it so fast.

  What I need working browser, as well as publisher from server side that I can just put in my template and it works.

  Thanks.