Skip to content

Commit

Permalink
better doc examples
Browse files Browse the repository at this point in the history
  • Loading branch information
ddnexus committed Mar 21, 2019
1 parent 5c92187 commit 3eacc8d
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 22 deletions.
18 changes: 9 additions & 9 deletions docs/extras.md
Expand Up @@ -128,34 +128,34 @@ $( window ).load(function() {

### Using AJAX with javascript-enabled helpers

If you AJAX-render any of the helpers using javascript mentioned above, you should also execute `Pagy.init(container_element);` in the javascript template. Here is an example for a `pagy_bootstrap_responsive_nav` AJAX-render:
If you AJAX-render any of the javascript helpers mentioned above, you should also execute `Pagy.init(container_element);` in the javascript template. Here is an example for a `pagy_bootstrap_responsive_nav` AJAX-render:

Controller (notice the `link_extra` to enable AJAX):
`pagy_remote_responsive` controller action (notice the `link_extra` to enable AJAX):

```ruby
def pagy_responsive_remote
def pagy_remote_responsive
@pagy, @records = pagy(Product.all, link_extra: 'data-remote="true"')
end
```

Template `pagy_responsive_remote.html.erb` (non-AJAX render: first page-load):
`pagy_remote_responsive.html.erb` template for non-AJAX render (first page-load):

```
```erb
<div id="container">
<%= render 'remote_partial' %>
<%= render partial: 'responsive_nav' %>
</div>
```

Partial `remote_partial.html.erb` (partial shared for AJAX and non-AJAX rendering):
`_responsive_nav.html.erb` partial shared for AJAX and non-AJAX rendering:

```erb
<%== pagy_bootstrap_responsive_nav(@pagy) %>
```

Template `pagy_responsive_remote.js.erb` (javascript template used for AJAX):
`pagy_remote_responsive.js.erb` javascript template used for AJAX:

```js-erb
$('#container').html("<%= j(render 'remote_partial')%>");
$('#container').html("<%= j(render 'responsive_nav')%>");
Pagy.init(document.getElementById('container'));
```

Expand Down
26 changes: 13 additions & 13 deletions docs/extras/support.md
Expand Up @@ -3,7 +3,7 @@ title: Support
---
# Support Extra

This extra adds support for features like countless or navless pagination, where you don't need the full link bar but only a simple `next` or `prev` link or no link at all (like for auto-scroll).
This extra adds support for features like countless or navless pagination, where you don't need the full link bar but only a simple `next` or `prev` link or no link at all (as for [auto-incremental](#auto-incremental)).

It also provides a couple of helpers to setup you own custom javascript components.

Expand Down Expand Up @@ -31,23 +31,23 @@ If you don't need the navbar you can just set the `:size` variable to an empty v

You can also use the `pagy_prev_link` and `pagy_next_link` helpers provided by this extra, mostly useful if you also use the `countless` extra.

Here is an example that use `pagy_countless` (saving one query per render):
Here is a basic example that use `pagy_countless` (saving one query per render):

`pagy.rb` add :
`pagy.rb` initializer:

```
```ruby
require 'pagy/extras/countless'
```

`incremental` action:
`incremental` controller action:

```ruby
def incremental
@pagy, @records = pagy_countless(Product.all, link_extra: 'data-remote="true"')
end
```

`incremental.html.erb`
`incremental.html.erb` template:

```erb
<div id="content">
Expand All @@ -64,7 +64,7 @@ end
</div>
```

`_page_items.html.erb`
`_page_items.html.erb` partial shared for AJAX and non-AJAX rendering:

```erb
<% @records.each do |record| %>
Expand All @@ -75,13 +75,13 @@ end
<% end %>
```

`_next_link.html.erb`
`_next_link.html.erb` partial shared for AJAX and non-AJAX rendering:

```erb
<%== pagy_next_link(@pagy, 'More...', 'id="next_link"') %>
```

`incremental.js.erb`
`incremental.js.erb` javascript template:

```erb
$('#records_table').append("<%= j(render 'page_items')%>");
Expand All @@ -90,17 +90,17 @@ $('#div_next_link').html("<%= j(render 'next_link') %>");

### Auto-incremental

Automatic incremental pagination (sometimes referred as infinite-scroll pagination) is a UI-less pagination that loads the next page at the end of the listing with an AJAX call.
Automatic incremental pagination (sometimes improperly called "infinite-scroll" pagination) is a UI-less pagination that loads the next page at the end of the listing with an AJAX call.

We can implement it by using the same [Incremental example](#navlessincremental) above with just a couple of changes:
We can implement it by using the same [Incremental](#navlessincremental) example above with just a couple of changes:

1. Hide the link in `_next_link.html.erb` by adding a style attribute:
**1**. Hide the link in `_next_link.html.erb` by adding a style attribute:

```erb
<%== pagy_next_link(@pagy, 'More...', 'id="next_link" style="display: none;"') %>
```

2. Add a javascript that will click the link when the listing-bottom appear in the viewport on load/resize/scroll. It will keep the page filled with results, one page at a time:
**2**. Add a javascript that will click the link when the listing-bottom appears in the viewport on load/resize/scroll. It will keep the page filled with results, one page at a time:

```js
var loadNextPage = function(){
Expand Down

0 comments on commit 3eacc8d

Please sign in to comment.