Pager in views with ajax

We've stumbled across the same problem. Bootstrap strips out the 'pager' class from the pagination UL at line 132 of pager.inc, which is what Views AJAX targets.

You'll see if you override it in your sub-theme's template.php, or quickly un-comment it, that this restores the AJAX behavior, however wrecks the styling. There's a good reason this has been done, but it's not great if you want to use AJAX views by default.

The styling is a problem for us, as we're using bare pagers, however I think this is an issue none the less.

This is a serious issue in my opinion. However i don't have a nice solution, just a workaround:

Edit [Views module]/js/ajax_view.js file at line 88
change
this.$view.find('ul.pager > li > a, th.views-field a, .attachment .views-summary a')
to
this.$view.find('ul.pager > li > a, th.views-field a, .attachment .views-summary a, .pagination ul li a')

This way we extend the selectors used to select the ajax pager links (a tags)

We still have a js error on the console after this, to fix: in Bootstraps includes/pager.inc file, at line 83 and 110 the
'data' => '<a>…</a>',
should be replaced with
'data' => '<span>…</span>',

the empty tag breaks the views javascript code.

Just throwing out an idea/question here: What would the implications be if we just added the .pager class back to the <ul/> list? Only thing I could think of is maybe some core styling might show up, but that should be taken care of by the higher weight .pagination class.

I was trying to remember why it wasn't as simple as that, and after looking at this again, the problem is due to a clash with Bootstrap's default .pager as seen here.

As lupus78 said, his solution isn't nice.

I think the best thing to do would be to override the removal of .pager from pager.inc in your theme, then override lines 5112-5168 from bootstrap.css in your theme to fix the styling (just cancel everything out), ideally targeting

.pagination .pager {...}

in case you're using .pager elsewhere.

Should this be patched? I don't see any reason for this not to be a permanent fix, unless there's more to this...

Ah yes, I forgot about those. That is indeed a problem. I'd rather not have to worry about trying to fix the "styling" aspect of things if possible because that will be more of a headache than it's worth (as most sites are different and this issue would constantly pop up). Instead I think the right approach is to follow @lupus78's lead and replacing the offending function to include the additional selector to make it work.

It's actually very similar to what I did in #1950694: Use Bootstrap's progress bar. I was looking at where the code that @lupus78 mentions in #2 resides in ajax_view.js and found it here:

http://drupalcode.org/project/views.git/blob/refs/heads/7.x-3.x:/js/ajax_view.js#l84

It is a relatively small prototype function and we could simply overwrite it with the code above. Thoughts?

That sounds like the best idea on reflection. I was referring to the editing of the views module when I meant it wasn't nice!

Overriding that function in Bootstrap should be fine. Happy to test it.

Try this

Patch submitted by the Drush iq-submit command.

Have you been able to test this?

@Mark Carver
your patch seams fine, but i'm just reinstalling my machine, so i can't test it right now, but will give it a try in the coming days.

I also disagree with overriding Bootstrap css.

@Mark Carver
Sorry for the delay in looking at this.

I've applied to patch to a clean installation and it's not working for me. I'm getting the following console error:

Uncaught TypeError: Cannot read property 'ajaxView' of undefined in ajax_view.js:7

Ok. I'll submit a new patch here in a bit. TBH it was really just a concept, I didn't test it too fully myself as I haven't had the time either.

Try this patch. I was able to get it to work locally, just had to change the JS group

Just caught the an extra ellipsis that needed to be converted into a <span/> tag.

Also, I did notice there was some jumping around with the styling when the AJAX fired. This is probably related to the pager items not having relative positioning or floating issues. Given that this is more to do with styling instead Drupal/views related overrides, it's probably something that I can tackle in #1984354: Improve LESS/CSS consistency..

Thanks Mark.

Can confirm that AJAX functionality works with #15.

I'm also getting the jumping around, but only when going backwards. Like you say, it's probably a float on the 'previous'. I'll have a dig into it and see what the culprit is.

The jumping of the li.prev can be solved just with:

.pagination ul > li.prev {
   float:left;
}

The only remaining problem is with the .ajax-progress throbber. We could move it either side of the <a> depending on whether it's firing on the prev or next? Or just put it underneath?

Ok, try this. I think I finally got a nice working solution :) Granted it has to override some of core's ajax throbber implementation because it likes to attach the throbber outside of the link instead of inside it.

That works great, thanks, and it shouldn't be too difficult for people to override if they want a different style/location of throbber.

I might go and ajaxify the views on some old Bootstrap sites now!

Awesome! I took that as a RTBC and committed to dev: 05daacc.

Same thing on 7.x-3.0-rc2. Is reopening this ok or should it be a separate issue?

there was in typo in ajax_views.js
should be ul.pagination not .pagination ul

15: bootstrap-pager-in-views-with-1907472-15.patch queued for re-testing.

don't test the old patch. because rc2 got an new dir structure.

Confirm patch in #1907472-25: Pager in views with ajax working for RC2.

Note a related issue of generating pagers with https://api.drupal.org/api/drupal/includes!pager.inc/function/theme_pager/7 Produces the wrong type of pagers since it uses the old .pager markup. I am having one of our back-end devs take a look into it and hopefully we'll have enough info for a new bug report here soon.

What do you mean? We have implemented theme_pager with bootstrap_pager and this creates valid .pagination markup.

Thanks @valkum!

Committed 0f67e3b to 7.x-3.x:

Issue #1907472 by valkum: Pager in views with ajax.

@Valkum -- Not sure. I talked to our dev and he was using the Drupal theme_pager function. He did manage to tweak it looking at how views implemented it to get the correct output.

It looks like the patch that applied to the 3.x branch did not have all the features as the one applied to the 2.x branch. on 3.x-dev the pager works, but it does 'jump around' when the throbber is active, much like the issues reported on 2.x above. The 3.x patch seems to only have addressed the views function prototype override.

https://drupal.org/node/add/project-issue/bootstrap#creating_new_issues