beneverard / jqpagination Goto Github PK

Hi there,

It works fine before I set the max page value, but after setting the max page, it wont' let me change the page input value from the text box. am I missing something? I am using the latest version.

$('.pagination').jqPagination('option', 'max_page', json.totalPages);

thanks in advance.

I'm working on a small blog for posting some articles from time to time. I want to show, say, 5 posts in the homepage, and a pagination in the footer to show more five, then more five etc.

How can I configurate jqPagination to do it?
thanks!

Hi,
Can you make a Zepto.js compatible version?

Some things not work:
$(".pagination").jqPagination('option','current_page',1);
$(".pagination").jqPagination('destroy');

Hi @beneverard, it would be cool if you add pagination plugin into bower packages.

Thanks.

I tried to use 2 paginators on top and at the bottom of Data Table.
There was a problem to synchronize them easily. If I do the following

$('.pagination').jqPagination('option', 'current_page', page);

The the circular callbacks happen.

It is easy to prevent it by adding the line

if(current_page == page){prevent_paged = true;}

inside the base.setPage method.

It may help to simplify multiple paginators synchronization.

My pagination was not working right until I switched to non-minified version. Ran both .js files through a js formatter and noticed .min version contains different code in 2 places.

Only in Firefox, it would appear I'm trying to assign to this var, but I don't think that's allowed.

$('.pagination').jqPagination({
paged: function(pageNum) {
console.log('inside Pagination paged');
if (numPageTriggers >= 2)
$scope.goToPage(pageNum);
numPageTriggers++;
}
});

is triggered on set max_page. We have worked around this, but generally 'paged' shouldn't be called on set MAX_PAGE. Thoughts?

I'm wondering if it is possible to update the 'paged' callback function after the initialization of the jqPagination control?

If I try doing

(“.pagination”).jqPagination({paged: newCallback})

it seems to add that callback to the original one.

Do I need to do domething like

(“.pagination”).jqPagination('destroy')

May submit different parameters in single Page, regenerate the paging, to do so, however, display: 2 of Page 1.
Though the window.location.reload(); can solve the problem, but it doesn't have a good experience.
So hope to provide a param or a destroy mothed to regenerate the paging.

Here is my code:
var recordSize=10;
......
$(function(){

var dataCount=doSearch(1,recordSize);
$('.pagination').jqPagination({
    link_string : '/?page={page_number}',
    current_page: 1,
    max_page    : Math.ceil(dataCount/recordSize),// 4,
    //page_string : '当前第{current_page}页,共{max_page}页',
    paged       : function(page) {
        doSearch(page,recordSize);
    }
});
.........
.........
$("input:radio[name=status]").change(function () {
    var dataCount=doSearch(1,recordSize);

    $('.pagination').jqPagination({
        link_string : '/?page={page_number}',
        current_page: 1,
        max_page    : Math.ceil(dataCount/recordSize),// 4,
        //page_string : '当前第{current_page}页,共{max_page}页',
        paged       : function(page) {
            doSearch(page,recordSize);
        }
    });
    //window.location.reload();
});

});

Thank you.

option - .jqPagination('option', key [, value])

The option method allows to get / set (when supplied with a value) the following values

current_page
max_page

I can set the a value like this

.jqPagination('option','max_page',12)

But how can I get the value of max_page ?
jqPagination('option','max_page') doesn't work. It always return 'false'.

I have some content that gets loaded through ajax, ajax response also has the current_page and max_page which is used to initiate jqPagination

(jqPagination "paged" will load the same ajax page with new current_page and max_page and attempts to initialize or set the new values)

if another ajax request is made outside jqPagination and so if I attempt to reinitialize pagination with the new current_page & max_page, pagination doesn't change with the new numbers.

instead,
if I tried set max_page and current_page like :
$("#vm_pagination").jqPagination("option", "current_page", response.page)
=> it works, but it executes "paged" function once more (2nd ajax loading)
=> expected: "paged" function should not execute unless I clicked on pagination buttons

$("#vm_pagination").jqPagination("option", "max_page", response.pages);
=> it triggers "paged" function continuously and it doesn't stop unless I refresh the page
=> expected: "paged" function should not execute unless I clicked on pagination buttons, plus it should not be executed multiple times.

I wonder if it'll be useful to provide a callback for when an invalid entry occurs, handy if a developer wants to extend their implementation to warn when users have done something wrong.

Implemte the paginated adding in the method paged an ajax call to the server to bring new data. The pager works fine when I go forward but when it goes back this one restarts and stays with the default values.

Image when I arm the pager

Image when the pager restarts

$('.pagination').jqPagination({
link_string: '/?page={page_number}',
max_page: _maxPage,
page_string: 'Página {current_page} de {max_page}',
paged: function(page) {
$("#currpage").val(parseInt(page));
/// ajax function
$.ajax({
type: "GET",
url: "/filtroajax",
data: $('#_form').serialize(),
success: function(json) {
var obj = jQuery.parseJSON(json);
var count = jQuery.parseJSON(obj.count);
var CantidadRegistros = parseInt(count[0].registros);
var ixp = parseInt($("#ixp").val());
$("#tbl_result > tbody ").empty();
$.each(jQuery.parseJSON(obj.source), function(i, item) {
var row = '' +
'' + item.id_equipment + ' ' +
'';
$("#tbl_result > tbody ").append(row);
});
},
error: function() {
window.alert('ERORR Peticion');
}
});
///****** Fin ajax Paginacion *****/
}
});

regards

We're currently using .live() for event binding, we really should look at using another method, not least for delegation performance. Need to be cautious of what version of jQuery this'll force users to use.

We should use namespacing to allow for easy destruction of plugin events too.

Hi

Its an awesome plugin, reduces a lot of work on the client side. But I noticed the dependency on jquery 1.7.2 . Please let me know if there will be a release for jquery 1.9.1 ?
When I use with Jquery 1.9.1 the input box shows up as blanks and has a attribute read only.

Thanks !

Seems like scoping is a problem, not sure if this is jquery or the plugin, didnt really look into it. Using Chrome Version 32.0.1700.76 m on Win 7.

Example:

//initialize pagination
$('.pagination').jqPagination();


var obj = {
  updatePagination : function(size){
    $('.pagination').jqPagination('option', 'max_page', size);
  }
};
obj.updatePagination(10);

//To make this work, I did this
var obj = {
  updatePagination : function(size){
    $('.pagination').jqPagination.call(window,'option', 'max_page', size);
  }
};
obj.updatePagination(10);

//HERE IS WHAT CHROME SAID
<error> jquery-1.8.1.min.js:2
p.extend.merge jquery-1.8.1.min.js:2
p.extend.clean jquery-1.8.1.min.js:2
p.buildFragment jquery-1.8.1.min.js:2
p.fn.extend.domManip jquery-1.8.1.min.js:2
p.fn.extend.append jquery-1.8.1.min.js:2
store._createRow signs-beta.html:208
(anonymous function) signs-beta.html:239
store.iterate signs-beta.html:192
store.redraw signs-beta.html:238
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.paged signs-beta.html:145
r.updateInput jquery.jqpagination.min.js:22
r.setMaxPage jquery.jqpagination.min.js:22
r.callMethod jquery.jqpagination.min.js:22
(anonymous function) jquery.jqpagination.min.js:22
p.extend.each jquery-1.8.1.min.js:2
e.fn.jqPagination jquery.jqpagination.min.js:22
store.redraw signs-beta.html:244
$.jqPagination.pag

It'd be handy for the repo to include the tools needed to compile the CSS / JavaScript.

When the input label has focus the default value (the current page) doesn't appear.

Hello Ben.
Thanks for your great plugin jqPagination.

I want to ask a question. How I can add to jpPagination function to sort the table? I have tried other plugins to sort the table but only ordered the visible part of the table. A greeting.

when i load the page,but do not call

$('.pagination').jqPagination({
        link_string : '/?page={page_number}',
        max_page    : 40,
        paged       : function(page) {
            $('.log').prepend('<li>Requested page ' + page + '</li>');
        }
    });

the div show

<div class="pagination">
    <a href="#" class="first" data-action="first">&laquo;</a>
    <a href="#" class="previous" data-action="previous">&lsaquo;</a>
    <input type="text" readonly="readonly" data-max-page="40" />
    <a href="#" class="next" data-action="next">&rsaquo;</a>
    <a href="#" class="last" data-action="last">&raquo;</a>
</div>

I am calling in a json file of 83 records when the page it appears as 1 of 40 , no ideal where 40 is coming from. I click last and it appears correctly ( 83 of 83 ). When I click previous it appears as 1 of 40. When I click first it appears correctly ( 1 or 83 ). then after click next after clicking first it appears as 2 of 40.
Could you help me understand what is going wrong please?

Version: 11.60
Build: 1185
Platform: Linux
System: x86_64, 3.0.0-14-generic
Browser: Opera/9.80 (X11; Linux x86_64; U; ru) Presto/2.10.229 Version/11.60

Description: Ubuntu 11.10
Codename: oneiric
Linux gloria 3.0.0-14-generic #23-Ubuntu SMP Mon Nov 21 20:28:43 UTC 2011 x86_64 x86_64 x86_64 GNU/Linux

At the moment where multiple pagination elements are used for the same purpose developers are having to work around solutions themselves.

This functionality really should exist by default.

This has been a simple yet tricky issue for me to resolve.

Once you click the input and the current page number becomes editable, the browser's default text selection color kicks in highlighting the number with that known faint blue. Normally, it shouldn't be a problem but when the input is stylized with a dark background the contrast is not a good and the number is barely visible.

I have tried changing the background color for the text selection using the ::selection selector (according to http://css-tricks.com/overriding-the-default-text-selection-color-with-css/) and it does work in Firefox. However, Chrome refuses to change it. I realize this is a browser issue and that not much can be done about it.

Here's a jsfiddle to better explain myself: http://jsfiddle.net/sanabria/Q749M/4/

I was wondering if the automatic text selection when the input is clicked can be prevented so I can avoid the issue altogether. Thanks in advance.

How can I change the value using jquery of the data-max-page= element of the input tag?

A few people have noted that there isn't a method to set current / max page, there really should be, however leep in mind the current plugin methodology, how would we integrate the init and methods into this new setup?

Ben, great plugin. Thanks for writing it!

Very minor issue. I've noticed that manually entering page numbers after re-applying pagination (for example after the user does a search/filter to change the result set) does not always work properly. I don't think this is a problem with the way I am doing things (in general) because using the left or right arrows seems to work fine. The problem only occurs with manually entering a number, and only after re-applying pagination. But once I've manually entered a number and the widget has become confused, then using arrows no longer works correctly. Hope that makes sense. I don't have a live example of this at the moment but I may have a live example you can see, or I can make a live example you can see, by the time you get to this (if you get to this). Thanks!

Greetings,

Has anyone ever integrated with jQuery Form Validation plugin? So the Next button is only enabled if the visible fields are valid?

Best regards,

As per this Stack Overflow question jqPagination should probably have an option to enable / disable the paged() callback.

jqPagination is very nice plugin of jquery. But I would it will became normal as other pagination plugin.

I would each page which have other content. Ex, page 1, the content is a paragraph, page 2 is other paragraph. And I don't want click show/hide to show the content.

How to do that? Pls help me, thank you. And sr my english.

It would appear a variable is incorrect, meaning the desired method is not called.

The paged callback is being fired on initialisation... it probably shouldn't be.

One example of this issue is a developer wanting to use window.location.href ='', but this was causing an infinite loop.

We cannot rely on the console object existing... provide a fallback for it.

This following angular data bindings ({{data}} to the inputs data attributes do not work.

With

<div class="credacious-pagination">
    <a href="#" class="first" data-action="first">&laquo;</a>
    <a href="#" class="previous" data-action="previous">&lsaquo;</a>
    <input type="text" readonly="readonly" data-current-page="{{currentViewScope.o_conversationService.currentPage}}" 
                                         data-max-page="{{currentViewScope.o_conversationService.maxPages}}" 
                                         data-page-string="Page" {{{currentViewScope.o_conversationService.currentPage}}} "of"  {{{currentViewScope.o_conversationService.maxPages}}}/>
    <a href="#" class="next" data-action="next">&rsaquo;</a>
    <a href="#" class="last" data-action="last">&raquo;</a>
</div>

The control's input field looks like this:

"Page 1 of {{currentViewScope.o_conversationService.maxPages}}"

which is incorrect. Also, clearly the two data attributes are working differently

(The above bindings work correctly elsewhere in the html)

Initialization of jqPagination has also been included in the 'link' method of our associated directive (it is correctly invoked):

pagerDirectiveModule.directive('cfPager', function () {

    console.log('PagerDirective');

    return {
        restrict: 'AEC',
        // scope: {currentView: '=view'},
        link: function ($scope) {
            console.log('inside PagerDirective link method');
            $('.credacious-pagination').jqPagination({
                paged: function(page) {
                    console.log('inside Pagination paged');
                }
            });                             
        },
        templateUrl: 'partials/directives/pager.html'
    };

Ideally we want to use the above data bindings directly in the HTML so when the scope reference that contains current and max pages (between {{}}'s) is updated it will update automatically correctly in the HTML like everything else we have used. (NOTE: if you know Angular, we prefer not use a $watch inside our directive to invoke the jsPagination setter/getter functions.)

Thoughts appreciated.

Clicking in the input box has no effect in Safari (5.1.7) and iPad, all other browser I have tested works.

The 'max-page' data attribute is used to store the current max page value, because this is accessible to the the developer we should allow this value to be used if one hasn't been set in the plugin options.

Really need to add a contributing.md file to the repo, there are a couple of reasons:

• Github issues should be for bugs, not questions
• Provide an ideal format for reporting bugs
• etc

actions1:

• step1:after inited jqPagination,i got 7pages data.now jqPagination max_page's value is 7,current_page is 1
• step2:change the current_page to last pagenumber, now. max_page's values is 7 current_page's value is 7
• step3: init qjPageination again,i just got 1 page data, well, in this time ,the jqPagination's current_page is still 7 not 1.

im not good at english ,if u want to get detailed information for this issue, please send an email to alexchen1875#gmail.com and tell me from github &&jqPagination

.by AlexChen from china

When I want to change the max_page value, not to change the current page, should the paged event be tiggered? I think this should be an issue.

Steps to reproduce problem:

• Instantiate jqPagination
• Get a value (with a option, max_page or current_page)

Expected result:

• Returns the value

Actual result:

• Returns false

Example:

• http://jsbin.com/eviroh/13/edit

The initial call works just fine:

    this.pager.jqPagination({
        max_page: 86,
    });

But if the page count changes and I need to refresh the control, subsequent calls:

    this.pager.jqPagination({
        max_page: 87,
    });

the controller updates the display to reflect'n to 87', but subsequent page navigation changes the '87' back to '86' again.