josecebe / twbs-pagination Goto Github PK
View Code? Open in Web Editor NEWjQuery pagination plugin (bootstrap powered)
Home Page: http://josecebe.github.io/twbs-pagination/
License: Other
jQuery pagination plugin (bootstrap powered)
Home Page: http://josecebe.github.io/twbs-pagination/
License: Other
Love your plugin, but is there a way to update the current page by clicking on another element?
I can’t seem to find a method for doing this.
how to set the new totalPages after the twbsPagination inited?
Hello,
Is it possible to add feature for refreshing / destroying instance of pagination in real-time?
Example - pagination is connected with ajax request which shows as many items on list as user select - pagination can be initialised only once (no refresh / destroy method).
Hi.
I am trying to use your pagination and have a question. I am not a JS-expert, so forgive me if I will write something stupid :)
Here is the code I am using:
$.ajax({
type: 'POST',
url: "/listing-ajax",
data: {
'data': data,
},
success: function (r) {
if (r.pagesTotal > 1) {
$("#pagination").twbsPagination({
totalPages: r.pagesTotal,
visiblePages: 5,
onPageClick: function (event, page) {
$.ajax({
type: 'POST',
url: '/listing-ajax?page=' + page,
data: {
'data': data,
},
success: function (data) {
// do some stuff
}
});
}
});
} else {
$("#pagination").html('');
}
}
});
As you can see I request some data with AJAX and then init the pagination if total pages more then one. In onPageClick
I am requesting some new data with the page
parameter.
But when the page is loading for the first time I have two AJAX requests:
Why? Second request should be made only when user clicks on the page link, but seems that it fires during pagination init.
Hope you did understand me :)
Thanks!
I ran into this jquery + Chrome issue when trying to use the plugin rendering 10 pages. I was able to fix it by changing the buildListItems to return an array since jquery 1.8+ supports appending an array. I can submit a pull request but wasn't sure if you wanted something that may break older than 1.8.
hi,
i am now using your js and it is good. what I have in mind is on how to simulate click on first page.
thank you so much
Hey,
What should I do when i want to refresh/ redraw pagination?
I'm doing ajax POST and when my data are returned, I want to:
How can I achive this?
Can I change current page by javascript?
to prevent nested manipulations with link ( like opening in open tab )
it will be great if you added in function setupEvents
$this.click(function (e) {
e.preventDefault();
preventDefault solves some problem for me.. and I think it is good to avoid href="javascript:void();"
or you can make it optionally something like
$this.click(function (e) {
base.options.preventEvent && e.preventDefault();
and make base.options.preventEvent = true
Hi Eugene,
I liked your script very much, it saved a lot of time, BIG thank you. :)
I noticed there is an issue with resetting the pagination for example It works excellent in first run, but when i apply pagination on filtered records then pagination doesn't works and doesn't renders pagination accordingly.
So to deal with this i've studied your script and managed to achieve the missing support.
My solution is to explicitly call jQuery("#pagination").removeData("twbs-pagination"); to reset View State data.
Can you please add a function like resetPagination() or something like so we dont need to call it explicitly.
OR if there is any solution for this then please let me know.
Can you make classes changeable with options
for classes:
.next
.active
.prev
.disable
etc...
How can we retrieve the number of the page that is currently selected?
Please note that it can ofcourse be different from the "startPage" param
From what I can tell by toggling jQuery versions in JSFiddle it works with all other versions > 1.7.2 but with jQuery 1.9.1 he buttons are rendered out of order. Otherwise it's great, thanks!
Noticed in comment unminified version have old version number.
To make UX better, for example:
first
1
2
3
last
// the "first" button is totally redundant
Should be
1
2
3
last
And then if you come to a point where 1
isn't visible anymore, render:
first
3
4
5
last
I personally like:
1
... 3
4
5
... 22
So the user knows how many pages are there.
Is there a option to display input that jump to specific page,when I click the button, it will jump to the page.
http://jsfiddle.net/eugenespb/m546Lzxw/
Hi, I want to paginate my list item is this will work ?, also I am having problem on how to implement this to paginate my items, for example my default items will display 10 items each page, If I click the page2 or btn2 this will query to my table to get the records 11-20,then If I click to page3 this will query to 21-30,
and display this to my ul.can you help me please, this is my first time to use this plugin.I hope you can help me.
Thank you in advance.
It is easier to keep up to date with github changes, and in general it is easier to install plugin.
will be great if option "loop" will be available and if user reached last page next page will be first.
use page href and startPage options:
$('#pagination-demo-v1_1').twbsPagination({
totalPages: ${pager.pageCount},
startPage:${pager.pageNumber},
href: "/page/{{number}}.html"
});
bug 1:
error: Previous value is always 1
right:prev=startPage>1?startPage-1:1
error:Next value is always 2 right:next=startPage==totalPages?totalPages:startPage+1
bug 2.
error:when startPage value is 1, .prev a and .first a value is "/page/1.html"
right: .prev a and .first a value is "javascript:void(0)"
error:when startPage value equals totalPages,if totalPages value is 20,.next a and .last a value is "/page/20.html"
right: .next a and .last a value is "javascript:void(0)"
My English is not good,I hope you understand what I mean.
Iterating the same set multiple times is deeply unwise when it can be done easily and once.
Current code:
children.filter(function () {
return $(this).data('page') === pages.currentPage && $(this).data('page-type') === 'page';
}).addClass(this.options.activeClass);
children.filter(function () {
return $(this).data('page-type') === 'first';
}).toggleClass(this.options.disabledClass, pages.currentPage === 1);
children.filter(function () {
return $(this).data('page-type') === 'last';
}).toggleClass(this.options.disabledClass, pages.currentPage === this.options.totalPages);
children.filter(function () {
return $(this).data('page-type') === 'prev';
}).toggleClass(this.options.disabledClass, !this.options.loop && pages.currentPage === 1);
children.filter(function () {
return $(this).data('page-type') === 'next';
}).toggleClass(this.options.disabledClass, !this.options.loop && pages.currentPage === this.options.totalPages);
var that = this,
children = this.$listContainer.children();
children.each(function () {
var $this = $(this),
data = $this.data();
if( data.page === pages.currentPage && data.pageType === 'page' )
$this.addClass(that.options.activeClass);
if( data.pageType === 'first' )
$this.toggleClass(that.options.disabledClass, pages.currentPage === 1);
if( data.pageType === 'last' )
$this.toggleClass(that.options.disabledClass, pages.currentPage === that.options.totalPages);
if( data.pageType === 'prev' )
$this.toggleClass(that.options.disabledClass, !that.options.loop && pages.currentPage === 1)
if( data.pageType === 'next' )
$this.toggleClass(that.options.disabledClass, !that.options.loop && pages.currentPage === that.options.totalPages);
});
how to change chinese
Is there anyway to stop user click the page button when requesting data?
When i click the pagination links my url gets updated i.e. ?page=1, ?page=2 .. etc.
On page refresh how do i set the active page number? Do I need to use the startPage option?
When choosing "1", the first button has these classes "first active disabled". It is not correct and not logical for applying Bootstrap styles.
Add more checking in this filter to make it right.
children.filter(function () {
return
}).addClass(this.options.activeClass);
why I get error if my count result is zero ?
"Error: Start page option is incorrect"
$.ajax({
type:'post,
url:'fetchEmployeeProject',
data:{id:4},
success:function(data){
$('#mypagination').twbsPagination({
totalPages: data, //error if data is zero.
visiblePages: 7,
onPageClick: function (event, page) {
$('#divcontainer').load('load_data.php',{id:4});
}
});
}
});
Hi team,
I am using your pagination plugin, It's simply superb and it is working good.
I want to use twbsPagination plung in for cascading listas or nested lists or sliding lists.
for example: along with http://alizahid.github.io/jquery-sliding-menu/
Could you please help me.
In my use case, I have pages of items and the url based only on the items.
something like ?itemNumber=485
then the page is calculated (on the server side) based on the number of items per page the user has elected. so in that case, it might resolve to page=5
so, I need to calculate the item number for the url based on the information. I was trying to write a script with a callback function to generate the href like so:
function createHref(base,param,page,perpage,anchortext) {
var value=page*perpage+1;
return base+'&'+param+'='+value+anchortext;
}
jQuery('#domid').twbsPagination({
totalPages: 30,
visiblePages: 10,
href: createHref('index.php?','itemNumber',{{number}},100,'#anchor'),
});
but the {{number}}
is not passed to the function.
any ideas or suggestions on how to do something like this?
button is selected on click, but the link don't open. only after the second click it works
Hello there, I think there is a bug when redefining the totalPages using destroy and then init: Every times I do this, the onPageClick is called twice whenever I click on a page.
Here's a jsFiddle:
http://jsfiddle.net/7tLbhkt1/1/
Try clicking the Reset button a couple of times and then selecting a page.
My workaround was to set settings.onPageClick to null before calling the 'init' method. It seems the previous onPageClick is not removed from the new pagination, and I don't think that was intended.
I'm still kinda new to github and jsFiddle so I'm sorry if the link doesn't work or I'm not describing the problem clear enough.
Also, thank you for making this library. I really like how it handles the visible pages and how easy it is to use.
TODO:
getCurrentPage
enable()
and disable()
methods from #35Hello,
can you add the possibility to redefine the totalPages?
here is my code:
$("ul.pagination", self.$elem).twbsPagination({
totalPages: 5
onPageClick: function( event, page ) {
// call the ajax (i am using another method to do that)
self.fetch( url, {
params: $.extend({}, {
page: page,
}, options.params)
}).done(function( result ) {
// I need to redefine the totalPages after the ajax is done
// maybe something like:
$("ul.pagination", self.$elem).twbsPagination({
totalPages: result.meta.last_page
});
});
}
});
Hi, I am getting crazy with this issue. I did google and tried to solve it for 2 days. But no luck.
I followed the example shown in the doc. But why doesn't my first page load at page load time?
The content is just empty. After load, if I click page 2 and then click page 1 back, the first page will be shown. I have no idea why. I even tried to define startPage: 1 which is useless since that is default value. but no luck. Thank you very much for your help.
Hi, I really like this plugin, but when I use synced pagination onPageClick function is called multiple times. Do you know how could I fix this? Thanks
If I update the totalPages property the additional page buttons aren't added. I've tried using 'destroy' and unbind() but those don't seem to work. Is there a way to update the totalPages property and have the element render the new page buttons?
Referers to: #59
Would be nice if we have a methods to get data about current state.
Examples:
var pagination = jQuery('#pagination').data('twbsPagination');
console.log( {
'currentPage': pagination.getCurrentPage(),
'nextPageNumber': pagination.getNextPage(),
'prevPageNumber': pagination.getPrevPage(),
'lastPageNumber': pagination.getLastPage(),
'firstPageNumber': pagination.getFirstPage(),
///... more else
'isNextAllowed': pagination.isNextAllowed(),
'isPrevAllowed': pagination.isPrevAllowed(),
'isLastAllowed': pagination.isLastAllowed(),
'isFirstAllowed': pagination.isFirstAllowed(),
'showNext': ...
'showPrev': ...
'showFirst': ...
'showLast': ...
''
some of them can be combined to one, for example isAllowed('next'), isAllowed('prev').. or show('next')/ show('+1'), show('first') / show(0)?
Next and Last buttons should be disabled on last page.
Seems the problem is that incompatible data types are compared here, both should be casted to same type:
this.$listContainer.find(".last").toggleClass("disabled", g.currentPage === this.options.totalPages);
this.$listContainer.find(".next").toggleClass("disabled", g.currentPage === this.options.totalPages)
I noticed that you could set visible pages to a value greater than total pages. Minor "bug", but something I thought you may want to fix.
Hi, great work on creating in this pagination using jquery. I would like somehow to add some extension(options), something like:
$('#pagination').twbsPagination({
totalPages: 100,
itemPerPage: 10, // the number of items in the page
});
so the output will be:
[1-10] [11-20] [21-30]....
Thanks.
Can we change total page numbers using jquery? as if default page numbers are 30 now if i change per page entries from 10 to 20 then how can i change total number of pages according to 20 without refresh...
currently in js I see:
this.$element.first().on('page', this.options.onPageClick);
which possibly can simply changed to:
this.$element.on('page', this.options.onPageClick);
@esimakin , maybe you know what is a purpose for first() and maybe it is not needed?
as we know $element always should be a single, so first() doesnt make sense?
When I try to use this plugin with jquery 1.5.2, I get an error:
Uncaught TypeError: undefined is not a function
This is from line 207 of the plugin because it uses the .off() jquery method which isn't available until jQuery 1.7. So I believe either the documentation needs to be updated to reflect which jQuery versions are supported, or that line needs to be refactored.
Hello,
i've this in my url ?what=phone&where=&p=2 but the pagination item (.active) is on 1 not 2
Can you tell me the solution to fix this ?
Thx
Antony
hi
my question is how can we reach the function outside of the plugin.for example, var pager = $('#pagination-demo').twbsPagination({
totalPages: 35,
visiblePages: 7
});
//how can I reach the render function here .thankx
console.log(pager.prototype.render());
javascript:
$("#Button1").click(function () {
$('#pagination-demo').twbsPagination({
totalPages: 1,
visiblePages: 9,
onPageClick: function (event, page) {
}
});
});
$("#Button2").click(function () {
$('#pagination-demo').twbsPagination({
totalPages: 2,
visiblePages: 9,
onPageClick: function (event, page) {
}
});
});
These two different totalPages,But when I click button1, and then click button2 when this totalPages still 1. how should I do?
Is it possible to display total number of pages?
Something like this:
[1][2][3][4][5]...[28]
(User can see that there are 28 pages in this example)
Is this with possible with the current plugin? I am calling twbsPagination() on a class, but only one shows up for it. I noticed there is a there is something regarding this in v1.1.2 for this but nothing about it in the documentation?
Will be nice if page size selection also implemented
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.