Query String on Paging

[Bppatil]

How to generate query string on page? i used this but not worked.
var obj = $('#pagination').twbsPagination({
totalPages: pagecount,
visiblePages: 4,
href:"search/product?page={{page}}"
});

Required result:

<a href="search/product?page=1" class="page-link">1</a> <a href="search/product?page=2" class="page-link">2</a> <a href="search/product?page=3" class="page-link">3</a>

Please help.

[eugenesimakin]

Hi!

First of all, you should go to the path search/product, then you need to set href option to true and pageVariable option to 'page'.
Unfortunately, the last version is not working as you meant (need to think how to handle this case).

[eugenesimakin]

By the way, which version do you using?

[mete89]

@esimakin I'm on the version 1.4.1. I implemented what you said and in every page anchors are generated.
If I enter the url xyx.com/abc?page=1 then all numbers get anchors like xyx.com/abc?page=2 etc.

But if there is no page number such as xyz.com/abc then all anchors become xyz.com/abc

Could we add query strings to anchors if there is no query string for the page but we set href: true and pageVariable to something?

[preflightech]

@mete89 I had exact same issue a few moments ago. If I go to localhost/?page=1 then everything works as intended, however if I go to the root, it won't generate correct because the RegEx doesn't find a query string to replace the variables of. The solution for me was the following.

In the buildItem: function (type, page) function, add the following:

if (this.options.defaultHref) {
	$itemContainer.append($itemContent.attr('href', this.options.defaultHref + page).addClass(this.options.anchorClass).html(itemText));
} else {
	$itemContainer.append($itemContent.attr('href', this.makeHref(page)).addClass(this.options.anchorClass).html(itemText));
}

And when you initilize the plugin, you can just add your default href path as following:

startPage: 1,
pageVariable: 'page',
visiblePages: 5,
href: true,
defaultHref: '/?page=',

Works fine now.

Edit: I have submitted a pull request with my fix.

Edit 2: I have a better fix, with no new options needed, and it also support multiple GET queries and replaces pageVariable correctly:

makeHref: function (page) {
    if (this.options.href) {
        var queryString = this.generateQueryString(page);
        if (!queryString) {
            return '?' + this.options.pageVariable + '=' + page;
        } else {
            if (queryString.indexOf(this.options.pageVariable) === -1) {
                return queryString + '&' + this.options.pageVariable + '=' + page;
            } else {
                return queryString;
            }
        }
    } else {
        return '#';
    }
},

[Ejilarasan]

How can we add the same pagination in top and bottom of the page?.
For single position its working fine but for top and bottom, only one pagination is displayed.

If trying to add pagination with 2 different id's, it's not affecting the page number of each other.

Let me know if any solution for it.

[eugenesimakin]

Hi! Use class css selector instead of id and use the same class name for two different <ul> (top n bottom) Eugene

…

Среда, 7 февраля 2018, 14:36 +03:00 от Ejilarasan ***@***.***>: How can we add the same pagination in top and bottom of the page?. For single position its working fine but for top and bottom, only one pagination is displayed. If trying to add pagination with 2 different id's, it's not affecting the page number of each other. Let me know if any solution for it. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub , or mute the thread .

[Ejilarasan]

Thanks a lot .... working great !!!!