reactive-table
reactive-table copied to clipboard
rowsPerPage
How can I have rowsPerPage in dropdown instead of a textbox. Also right side pagination I want to show numbers with previous and next buttons.
You can use ReactiveVars to control rowsPerPage and currentPage, see https://github.com/aslagle/reactive-table#accessing-and-controlling-table-state.
Then set showNavigation: 'never' in the table and have your dropdown and page buttons set the ReactiveVars.
I used dropdown to select rows per pages and set a ReactiveVars but when i put rowsPerPage: Template.instance().teamsrowsperpage.get() my reactive table doesnt update.
You need to use Template.instance().teamsrowsperpage, without .get(). get will give the table a single value instead of the reactive var.
I tried still its not refreshing the table. when I change in dropdown I get Page 1 of 0
Make sure you're setting it to an integer, if you're getting a string from the dropdown you may need to use parseInt.
It is integer. Do i have to subscribe Reactive.publish()?
No, it does the subscription for you. If the table showed up with pages before you changed the dropdown and after you changed it you got page 1 of 0, it sounds like you set rowsPerPage, but it's something invalid.
Could you please tell me what I'm doing wrong... Publications.js Meteor.publish('team', function () { return team.find(); });
ReactiveTable.publish("team-items", function () { return team; }, {});
teams.html {{> reactiveTable collection="team-items" class="table listing-list responsive-table team-listing-table" settings=teamsSettings id="teamsSettingsId"}}
<section class="listing-pagination">
<div class="row">
<div class="col-md-6">
<select id="rows_per_page" name="" class="form-control">
<option value=2>2 rows per page</option>
<option value=4>4 rows per page</option>
<option value=6>6 rows per page</option>
</select>
</div>
</div>
</section>
teams.js Template.teams.onCreated(function () { this.teamsrowsperpage = new ReactiveVar(3); }); });
reactive tables rowsPerPage: Template.instance().teamsrowsperpage,
'change #rows_per_page': function(e, template){ var rows_num = parseInt($('#rows_per_page').val()); template.teamsrowsperpage.set(rows_num); }
Sorry - your code looks fine but I think there must be a bug in the package where it doesn't update the subscription when the vars change. I hadn't done it with server-side publishing before. I'll try to fix this soon.
I released a new version (0.8.27) that should fix this. Try it again and let me know :)
When I updated the package the latest version what I got is 0.8.26 and tried with my code still doesn't work.
I'm not sure why meteor wouldn't pick up the update, but you can edit .meteor/versions directly to make sure it uses the right one.
It worked. Thank you very much. Is there any settings to pass current page in table? My next part of pagination is << 1 2 3 4 5 >>
Its working. I passed currentPage in table and onclick I set ReactiveVar value from nav. Thank you once again :)
I got a issue with my search now. I have a helper with search results and want to pass it in reactiveTable. Before I was passing that result in collection of reactive table but after using reactiveTable.Publish I dont know how to pass that result.
If you have the search results already, there's not really any reason to use ReactiveTable.publish. I'd continue passing them in the way you were before. If you really want to do it, you'd have to create a filter and set it using the search results.
Yes i removed ReactiveTable.Pubish.