pager_right and toppager_right

Questionspager_right and toppager_right
Mike Sheppard asked 5 years ago

Without re-inventing the wheel, has anyone come-up with a straight-forward solution to adding buttons to the pager_right or toppager_right? I have to add 3 new buttons with extra text and there is not enough room on the left toolbar with the new larger icons.

Thanks for any assistance.


6 Answers
Abu Ghufran answered 5 years ago


An option could be to move the pager and total records from top toolbar.
It will give full width space for icons.

Along with that you can remove the operations buttons from bottom toolbar.

$grid["loadComplete"] = "function(){pagers_fx();}";

var pagers_fx = function(){
jQuery(".ui-jqgrid-toppager td[id$=pager_right]").remove();
jQuery(".ui-jqgrid-toppager td[id$=pager_center]").remove();
jQuery(".ui-jqgrid-pager td[id$=pager_left]").html('');

You can inspect elements using firebug and change as required.

Abu Ghufran answered 5 years ago

Glad to know it helped.

Mike Sheppard answered 5 years ago

That works very well, Abu. I have been following your advice about using Firebug (and the Chrome Debugger) to look for alternatives. I came across something else that works – using a custom table for the _pager_right and then including the buttons in that. It works – but not as nice as your method of removing the top-items from the Top Pager – but leaving them in the bottom.

A combination approach looks like it will work the best.

This is the extra table code I added to get a _pager_right toolbar along with the paging-info (which I wanted to keep in the top for now).

Thanks again for prompt answers to questions and a great source of information in the Forum.

$("#list1_pager_right").html('<table cellspacing="0" cellpadding="0" border="0" style="float: right; table-layout: auto;" class="ui-pg-table navtable"><tbody><tr><td style="width: 4px;"><span class="ui-separator"></span></td><td><span class="ui-paging-info"></span></td></tr></tbody></table>');

Mike Sheppard answered 5 years ago

Is there a way to have independent control over the top-pager and bottom-pager with the navbuttons?

Something like:

jQuery('#list1').jqGrid('navButtonAdd', '#list1_bottompager'

Abu Ghufran answered 5 years ago

No, That's not supported.

You can add custom html elements in toolbar like in demo: (dropdown in toolbar)

jQuery('.navtable tr').append('…');

In same way, you can try adding in other cells.

Mike Sheppard answered 5 years ago

Ah – I remember reading that a few weeks ago (dropdown in toolbar). Thank you – that gives me some ideas.

Have a great day.


Your Answer

13 + 11 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.

How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?