Search code examples
jquerymeteormeteor-blaze

Accessing reactive table data after filtering


I have setup a reactive table https://github.com/aslagle/reactive-table and i am wondering how i can access the filtered data.

This is my login.js file

/*****************************************************************************/
/* Login: Event Handlers */
/*****************************************************************************/

Template.Login.created = function () {
  this.filter = new ReactiveTable.Filter('greater-than-filter', ['number']);
  //this.Pages = new Meteor.Pagination("crud");
};

Template.Login.events({
   "change .select-filter": function (event, template) {
       template.filter.set($(event.target).val());
     } 
});

/*****************************************************************************/
/* Login: Helpers */
/*****************************************************************************/
Template.Login.helpers({
    'list': function(){
    return Crud.findOne();
    }
});

/*****************************************************************************/
/* Login: Lifecycle Hooks */
/*****************************************************************************/
Template.Login.onCreated(function () {
});

Template.Login.onRendered(function () {
});

Template.Login.onDestroyed(function () {
});


Template.Login.tables = function () {
    return Crud.find();
}

Template.Login.tableSettings = function () {
    return {
        rowsPerPage: 5,
        showFilter: true,
        filters: ['greater-than-filter'],
        showNavigation: 'auto',
        fields: [
            { key: '_id', label: 'Id' },
            { key: 'name', label: 'Name' },
            { key: 'type', label: 'Type' },
            { key: 'number', label: 'Number' }
        ],
        useFontAwesome: true,
        group: 'client'
    };
}

and this is the html

<template name="Login">

  <div class="login">
  <div class="page-header">
    <h2>Login</h2>
    <select id="greater-than-filter" class="form-control select-filter">
      <option value="">Any</option>
      <option value=100>100</option>
      <option value=200>200</option>
    </select>


      </div>
      {{> reactiveTable collection=tables settings=tableSettings}}
    <form>

        <div class="form-group">
        <br/>
        <div class="form-group" style="border:1px solid #708090">
        <h2>Data Widget</h2>
        <hr/>
        <div class="row">
  <article class="col-md-6 post">
  {{list.name}}
  </article>
   </div>
        </div>
        <button class="prev">Previous</button><button class="delete">Delete</button><button class="next pull-right">Next</button><button class="save pull-right">Save</button>

        </div>


    </form>
  </div>
</template>

I am using this code

Template.Login.helpers({
    'list': function(){
    return Crud.findOne();
    }
});

to display the first record,but this code does not factor in the filtering taking place so it will always display the first record of collection crud whether i filter or i dont. How can i get hold of the filtered data such that list.name displays the first record after filtering has taken place?.


Solution

  • That data cannot be accessed according to the plugin author https://github.com/aslagle/reactive-table/issues/329