Backgrid Paginator does not work after reload

[ashokadhikari92]

I am a beginner for backbone and backgrid.paginator . I have tried to make a table and used backgrid paginator for pagination. It works fine at the first time load but after filter, paginator does not work.
Even it shows the required number of pages for the resulted filtered collection but does not switched to the other pages , only shows the first page, on clicking on the other page number only shows the content of the first page.
code samples are :

var Organisation = Backbone.Model.extend({});
var OrganisationCollection = Backbone.PageableCollection.extend({

    model: Organisation,
    state: {pageSize: 20},
    mode: "client",
    queryParams: {
        currentPage: "current_page",
        pageSize: "page_size"
    },

    filterBy: function(filterBy,organisationName) {
        var filteredOrg = this.fullCollection.filter(function(model) {
            if(model.get(filterBy).indexOf(organisationName) !== -1) {
                return true;
            }
            return false;
        });
        return new OrganisationCollection(filteredOrg);
    }
}

I created a paginator view for pagination using bacgrid.paginator inside that view as follows :

var PaginationView = Backbone.View.extend({
    tagName:"div",
    el:"#paginator",
    initialize: function(){
        _.bindAll(this,'render','filterRender');
        this.collection.setSorting('name');
        this.collection.on("reset",this.render);
        this.collection.on("filter-by-organisation", this.filterRender);
    },

    filterRender: function (filterBy,organisationName) {
        var filteredOrg = this.collection.filterBy(filterBy,organisationName);
        var paginator = new Backgrid.Extension.Paginator({
            collection: filteredOrg
        });
        this.$el.html("");
        this.$el.append(paginator.render().el);
        return this;
    },
    render: function(){
        var paginator = new Backgrid.Extension.Paginator({
            collection: this.collection
        });
        this.$el.html("");
        this.$el.append(paginator.render().$el);
        return this;
    }
});

I created my own table

<table class="table table-responsive" >
            <thead>
                    <th>Organization</th>
                    <th>Type</th>
                    <th>Country</th>
                    <th>pledge</th>
                    <th>commitment</th>
                    <th>expenditure</th>
            </thead>
            <tbody id="organization-list">

            </tbody>
 </table>

 <div id="paginator"></div>

and my template is

 <script type="text/template" id="organisation-row-template">
            <td><a href="/frontend/organization/details/<%= id %>"><%= name %></a></td>
            <td><%= type %></td>
            <td><%= country %></td>
            <td><%= transactions.Pledge %></td>
            <td><%= transactions.Commitment %></td>
            <td><%= transactions.Expenditure %></td>

   </script>

I excluded other codes for rendering the collection on the table here . I think the problem is in the filterRender function in the Paginator view.

Please give some way to solve this out and what is the mistake here.

[ashishghimire]

I am also facing similar issue. @wyuenho can you help with this?