In file backgrid-paginator.js, line 18. There should be "else if".

File backgrid-paginator.js, line: 168:

      if (this.isRewind && currentPage == state.firstPage ||
         this.isBack && !collection.hasPrevious() ||
         this.isForward && !collection.hasNext() ||
         this.isFastForward && (currentPage == state.lastPage || state.totalPages < 1)) {
        this.$el.addClass("disabled");
      }

But in your repo, you have correct version (line: 174):

 if (this.isRewind && currentPage == state.firstPage ||
    this.isBack && !collection.hasPreviousPage() ||
    this.isForward && !collection.hasNextPage() ||
    this.isFastForward && (currentPage == state.lastPage || state.totalPages < 1)) {
    this.$el.addClass("disabled");
}

Hey there! great works!
I'm using
backbone.paginator, backgrid, backgrid-filter, backgrid-paginator
it works great but i have one small issue when sorting by column at server mode it seems to :

first it fetches the sorted list ok but then it does another fetch of the first page. This result two fetches against server and the 2nd is unsorted.

it seems that the second fetch comes from backgrid-paginator

self.listenTo(col, "backgrid:sorted", function () {
    if (self.goBackFirstOnSort) col.getFirstPage({reset: true});
  });
},

maybe on server mode its better to try fetch the first page on sorting?

any ideas how to over come it ?

Thanks!

Oak

As I can see only dependency is backbone.paginator, not Backgrid library. So why this paginator require Backgrid?

Currently, the pagination window is not centered on the current page. If you are on the page 10, you have handles for the pages 1 to 10. It would be easier to use if the handles would go from page 6 to 15 in this case

A paginator without pages to navigate is often best omitted. If the paginator could be set up to not render the UL on single page collections, that would be great.

and replace deprecated of hasPrevious and hasNext to hasPreviousPage and hasNextPage

I kept noticing that in the current repo, which is the official one, it tagged as version 0.3.5. package.json reports the same version.

However, when I install this plugin with npm, it installs version 0.3.7. It turns out @Charca has publishing permissions at npm, so the version we're installing is Charca/backgrid-paginator@master.

This is really confusing. The differential commits should have been merged in here, or the repo URL should have been updated at NPM, and either way, version 0.3.7 should be tagged.

What should we do? I'm willing to help, so if you're willing to give me contributor access in here or npm, I can sort things out to restore consistency across repos and package managers.

in version 0.3.5 this method !collection.hasPrevious() line 190
change for collection.hasPreviousPage()

How can we send additional query params to server when we change page?

Hi, how can i add the option xhrFields: { withCredentials: true} to the ajax call when i click on the paginator's link?

Thanks.

When changing pages using the paginator, the collection reset event fires if you select a page number, but if you hit rewind/ff/back/forward then the reset event is never triggered. This seems to be because the changePage function in backgrid-paginator.js only passes a {reset: true} on col.getPage - for all others (col.getNextPage etc), no options are passed through. If I edit the code so that a {reset: true} is passed to each function then everything works as expected.

You can reproduce the issue with the example found at : http://backgridjs.com/ref/extensions/paginator.html

It only happens when we change page by clicking on the pagination arrows, it works fine when changing page by clicking directly on a page number.

It might have some link with how the getPage() function is used when clicking a page number and that it is not called when clicking on the arrows. Take a look at this issue about this behavior : #17

There have been several updates to this since the 0.3.5 release on January 21, 2014 13:45. Most notably one that removes the use of hasNext and hasPrevious in favor of hasNextPage and hasPreviousPage. Any chance we could get a release with these new updates?

First i downloaded the minified version "backgrid-paginatr.min.js", and it throwed an error "b.hasPrevious() is not a function."

I digged into the cod and i figured out that the full js version calls collection.hasPreviousPage() (https://github.com/wyuenho/backgrid-paginator/blob/master/backgrid-paginator.js#L169), but the minified version calls hasPrevious().

So, finally, the minified file doesn't work, the full one does!

Would be nice to fix the minified file.

Hi, in client mode, I unable to set initial page number, sort column and order type.

I simply created my grid following your example in actually backgrid-paginator-master package then set initial page, order column and order type in following way:

var Profiles = Backbone.PageableCollection.extend({
  model: ProfileModel,
  mode: "client",
  url: JSONUrl,
  state: {
    firstPage:1,
    pageSize:10,
    currentPage:3,
    sortKey:"idProfile",
     order:1 
  }
});

The data in the grid are shown correctly, that is, the page shown is the number 3 and also the sort column is right but the paginator is not updated according to page passed to currentPage property of PageableCollection: is always shown as the current page to be the first.

Note that everything works fine when click on the different page number in paginator but if I want to go directly on the page 3 at first page loading, the paginator is not shown correctly.

I have reproduced the glitch here:
http://stage.dandelio.com/backgridtest/index.php

and you can call the various pages by passing the value directly in the URL like this:
http://stage.dandelio.com/backgridtest/index.php?page=3
or
http://stage.dandelio.com/backgridtest/index.php?sortKey=name

As you can see the data in the grid change, but the paginator does not refresh the active page according set with

currentPage: [page number]

There is another way to force the paginator on the specific page, sort and sort type at first page loading?

I'm using latest versions of the various components:
underscore.js -> 1.5.2
backbone.js -> 1.0.0
backbone-pageable.js -> 1.4.1
lunr.js -> 0.4.3
backgrid.js -> master version
backgrid-paginator -> master version

any chances to receive new release with support for paginator 2.0?

Error line is here
var paginator = new Backgrid.Extension.Paginator({

   <script>

$(function() {

    var Territory = Backbone.Model.extend({
        initialize: function () {
            Backbone.Model.prototype.initialize.apply(this, arguments);
            this.on("change", function (model, options) {
                console.log("Saving change " + JSON.stringify(options) );
              if (options && options.save === false) return;
              model.save();
            });
          }
        });

    var Territories = Backbone.PageableCollection.extend({
      model: Territory,
      url: "/backgridjs/examples/pageable-territories.json",
      mode: "infinite"    
    });

    var territories = new Territories();

    var columns = [{
        name: "id", // The key of the model attribute
        label: "ID", // The name to display in the header
        editable: false, // By default every cell in a column is editable, but *ID* shouldn&apos;t be
        // Defines a cell type, and ID is displayed as an integer without the &apos;,&apos; separating 1000s.
        cell: Backgrid.IntegerCell.extend({
          orderSeparator: ''
        })
      }, {
        name: "name",
        label: "Name",
        editable: false,
        // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
        cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
      }, {
        name: "pop",
        label: "Population",
        editable: false,
        cell: "integer" // An integer cell is a number cell that displays humanized integers
      }, {
        name: "percentage",
        label: "% of World Population",
        cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
      }, {
        name: "date",
        label: "Date",
        editable: false,
        cell: "date",
      }, {
        name: "url",
        label: "URL",
        editable: false,
        cell: "uri" // Renders the value in an HTML &lt;a&gt; element
      }];

      // Initialize a new Grid instance
      var grid = new Backgrid.Grid({
        columns: columns,
        collection: territories
      });

      // Render the grid and attach the root to your HTML document
      var $datagrid = $("#datagrid");  
      $datagrid.append(grid.render().$el);

      var paginator = new Backgrid.Extension.Paginator({
          collection: territories
        });

      // Render the paginator
      $datagrid.append(paginator.render().$el);

      // Initialize a server side filter  
       var serverSideFilter = new Backgrid.Extension.ServerSideFilter({
         collection: territories,
         name: "searchParam", // the name of the URL query parameter
         placeholder: "Search Name" // HTML5 placeholder for the search box
      });

      // Render the filter
       $datagrid.append(serverSideFilter.render().el);

      // Add some space to the filter and move it to the right
      //serverSideFilter.$el.css({float: "right", margin: "20px"});

      // Fetch some data
      territories.fetch({reset: true});


    });
</script>

I'm having an issue with the paginator showing 16 pages, but staying on page 1. The grid changes to the new page of results, but the paginator always shows page 1 selected. It would be easiest to give screenshots of the code.

Added information:
This is the result. It shows the data, and I can switch between pages. In this screenshot, I clicked Page 7, and we are viewing page 7 but showing page 1 in the paginator element. (Blurred for client privacy)

This is the pageableCollection that I am using.

Any chance you could cut a new release and publish to NPM? I'm looking to grab the latest commits in master and I'd prefer not to depend on a commit SHA version in my package.json. Thanks!

or so it says on the repo site.

Specifying a class for the ul element makes it dead simple to integrate with bootstrap. Just make the class "pagination".

I might have missed it but is there a function to find out what page a row is located?

Just as a petition. Could you create a new tag for it?

It would nicer than use "backgrid-paginator": "master" on bower.

It's always better to use tagged versions than dev ones for stability reasons.

Thanks

Also refernced: cloudflarearchive/backgrid#430

This issue only happens when goBackFirstOnSort is set to true

This is also in refernece to the question located here: http://stackoverflow.com/questions/tagged/backgrid I did bower install backgrid / backgrid-pagnitor late yesterday afternoon.

Steps to reproduce:

1. Configure PageableCollection:

  state: {
        pageSize: 10,
        order: 1,
        totalRecords:315586
      },
  queryParams: {
        currentPage:'page',
        pageSize: 'size',
        sortKey: "sort"
      },

1. Click on the header for sort (name in this case).

Observer outbound request.

?page=1&size=10&total_pages=31559&sort=name&order=asc

Sorted results come back. Briefly carret displays and then disapears.

1. Click on the header again (name)

Observer outbound request:

?page=1&size=10&total_pages=31559&sort=name&order=asc

Like I said in the question above, I'm new to backgrid but would be happy to provide anything you need if you believe this to be a defect and not a dev issue.

Here's the objects coming in to parsestate funciton:

queryParams
Object {currentPage: "page", pageSize: "size", totalPages: "total_pages", totalRecords: "total_entries", sortKey: "sort"…}
currentPage: "page"
directions: Object
order: "order"
pageSize: "size"
sortKey: "sort"
totalPages: "total_pages"
totalRecords: "total_entries"
__proto__: Object

state
Object {firstPage: 1, lastPage: 31559, currentPage: 1, pageSize: 10, totalPages: 31559…}
currentPage: 1
firstPage: 1
lastPage: 31559
order: -1
pageSize: 10
sortKey: "name"
totalPages: 31559
totalRecords: undefined
__proto__: Object

What's interesting here is "order" is now -1 and totalRecords is now undefined.

options
Object {from: 1, to: 1, url: "/search/cars/", data: Object, parse: true…}
add: true
data: Object
emulateHTTP: false
emulateJSON: false
error: function (resp) {
failure: function (){}
from: 1
merge: true
parse: true
remove: true
success: function (resp) {
to: 1
url: "/search/cars/"
xhr: Object
__proto__: Object

Incoming response looks something like this:

[{"sort": "name", "total_entries": 315586, "order": "asc"}, [{},...]]

Also, when I put a debugger; in parseState debugger triggers twice per sort. However the init (page load) only triggers the debugger once.

Pagination works fine.

I use CommonJs and browserify.
could apply the same fix fix made in backgrid in this plugin.
cloudflarearchive/backgrid@f8dff56#diff-80977816b141839550e5d7caadfdc00e

and if you could return object at the end of factory

return {Paginator:Paginator , PageHandle:PageHandle};

so that Paginator would be accessible.

var Paginator = require('backgrid-paginator').Paginator; //Backgrid.Extension.Paginator

Thanks !

Hello,

I wish to add some parameters in the fetching URL. I have this PageableCollection:

    var Cars = Backbone.PageableCollection.extend({
                url: '/cars'
                model: CarModel,
                mode: "server",
                state: {
                    pageSize: 15,
                    firstPage: 1,
                    currentPage: 1,
                    sortKey: "color",
                    order: -1
                },

                queryParams: {
                    totalPages: null,
                    totalRecords: null,
                    sortKey: "sort"
                },

                parseState: function (resp, queryParams, state, options) {
                    return {totalRecords: resp.total_count};
                },

                parseRecords: function (resp, options) {
                    return resp.items;
                }
            });

With this fetching function:

        cars.fetch({
                    data: $.param({
                        'test': '1234'
                    }),
                    success: function(){
                        // We takes useless elements out of the DOM
                        $("#divErrorHandler").remove();

                        // We destroy the loader and show the divs
                        divTable.show();
                        divPaginator.show();
                        divFilter.show();
                    },
                    // We manage the potential errors
                    error: function(){
                        var divErrorHandler = $("#divErrorHandler");
                        divErrorHandler.append("<p>Error happened</p>");
                    }
                });

The purpose is to have an url like "/cars?sortColumn=color&order=asc&test=1234 ... But instead, I have this error in javascript console:

Uncaught TypeError: Cannot assign to read only property 'page' of test=1234

Do you see how can I correct this ?

<li> elements (PageHandle) not remove with paginator.
You should redefine "remove" method of Paginator like this:

remove: function () {
    if (this.handles) {
        for (var i = 0, l = this.handles.length; i < l; i++) {
            this.handles[i].remove();
        }
    }
    this.undelegateEvents();
    this.$el.removeData().unbind();
    this.stopListening();
    Backbone.View.prototype.remove.call(this);
}

Bower is getting the old version, without AMD support. Yet, the main branch offers support for it. Releasing a new version for bower would fix this issue, allowing use of Backgrid paginator with joy.

File : https://github.com/wyuenho/backgrid-paginator/blob/master/backgrid-paginator.js
Method: makeHandles
Line No : 385,386

the variable window causes issues when the file is passed for coverage by blanket or istanbul
Ref issue : alex-seville/blanket#311

If it is renamed to something else, it will fix this bug