Paginator next/prev footer links move around between repeated clicks

[dandavison]

The next/prev/fast-forward/fast-rewind elements need to stay in the same position so that the user can issue multiple clicks in quick succession.

The movement seems to be related to column resizing. See #5 and #6.

[dandavison]

I guess the answer to this is: don't put the paginator in .backgrid tfoot.

[dandavison]

In order to create the paginator outside the main grid it seemed to me that another css refactoring was required, creating a new class .backgrid-paginator to replace .backgrid.paginator: 95faf4e @wyuenho does that change make sense to you?

(My paginator is like this -- a separate table below the main table, with class .backgrid-paginator)

[wyuenho]

Well, besides #5 and #6, I think the paginator really needs to be made detachable and no longer inherits from Backgrid.Footer. It should be a separate widget that you need to explicitly attach to the bottom of the grid container or wherever so it won't scroll along with the oversized rows in the Header and the Body.

[kriswill]

I had the same problem, since I had a horizontally scrolling table. So, to fix the problem I extended the Paginator, override the render and had it target a fixed element outside of the table.

[dandavison]

detachable and no longer inherits from Backgrid.Footer.

+1 I'm getting reasonably good results with the bootstrap pagination classes and a modified template like this

class Paginator extends Backgrid.Extension.Paginator
    tagName: "div"
    className: "pagination pagination-centered"  # bootstrap

    template: _.template('''
    <ul>
      <% _.each(handles, function (handle) { %>
        <li <% if (handle.className) { %>class="<%= handle.className %>"<% } %>>
          <a href="#" <% if (handle.title) {%> title="<%= handle.title %>"<% } %>><%= handle.label %></a>
        </li>
      <% }); %>
    </ul>''')

[wyuenho]

You've found the secret!

Yes that'll work since I actually modeled the paginator's HTML structure and CSS after bootstrap's.

This solution deserves to be the default (minus the bootstrap CSS)

[luishdez]

I'm not pretty sure but I see some problems here… Every option defined in Grid overrides your options from Footer , Header … So, if you define a class for Grid you won't be able to define a class for Footer

So the class use in Grid will appear in Header, Body , Footer too.

I've made a pull for this #136