jqgrid change icons used by the pager

Question

I need to change the forward (>, >|) and back (<, |<) pager icons used by jqgrid. The icons I'd like to use are already contained within jquery ui file ui-icons_888888_256x240.png. How do I accomplish this?

Update:

Based on the response here [jqGrid Pager Area - Using Font Awesome Icons, I've added the following code to my page, but the icons aren't changing. I'm getting the pager, but I don't think I'm getting the icon span. What am I doing wrong?

<script type="text/javascript">
var $pager = $("#" + pagerName);

var icon = $pager.find(".ui-icon>span.ui-icon-seek-first");
    icon.removeClass("ui-icon-seek-first");
    icon.addClass("ui-icon-arrowthickstop-1-w");

$pager.find(".ui-icon>span.ui-icon-seek-prev")
    .removeClass("ui-icon-seek-prev")
    .addClass("ui-icon-arrowthick-1-w");

$pager.find(".ui-icon>span.ui-icon-seek-next")
    .removeClass("ui-icon-seek-next")
    .addClass("ui-icon-arrowthickstop-1-e");

$pager.find(".ui-icon>span.ui-icon-seek-end")
    .removeClass("ui-icon-seek-end")
    .addClass("ui-icon-arrowthick-1-e");

</script>

it is not possible to change default jqgrid icons. Refer [themeroller](http://www.jqueryui.com/themeroller/#icons) for changing to another given icons. — UdayKiran Pulipati, Feb 12 '14 at 09:39
@udaykiranpulipati I don't believe that's true. See here: http://stackoverflow.com/questions/13862963/jqgrid-pager-area-using-font-awesome-icons?rq=1 — Michael Sobczak, Feb 12 '14 at 11:49

score 1 · Accepted Answer · answered Feb 13 '14 at 14:13

What I didn't realize is that any JavaScript code that overrides the buttons used by the jqgrid needs to be included in the JavaScript function that loads the jqgrid. Below is the code I used:

  // Override default pager icons
  $grid = $("#" + listName);
  $pager = $grid.closest(".ui-jqgrid").find(".ui-pg-table");

  var icon = $pager.find(".ui-pg-button>span.ui-icon-seek-first");
      icon.removeClass("ui-icon ui-icon-seek-first");
      icon.addClass("ui-icon ui-icon-arrowthickstop-1-w");

  $pager.find(".ui-pg-button>span.ui-icon-seek-prev")
      .removeClass("ui-icon ui-icon-seek-prev")
      //.addClass("ui-icon ui-icon-arrowthick-1-w")
      .addClass("ui-icon ui-icon-triangle-1-w")
      ;

  $pager.find(".ui-pg-button>span.ui-icon-seek-next")
      .removeClass("ui-icon ui-icon-seek-next")
      //.addClass("ui-icon ui-icon-arrowthick-1-e")
        .addClass("ui-icon  ui-icon-triangle-1-e")
      ;

  $pager.find(".ui-pg-button>span.ui-icon-seek-end")
      .removeClass("ui-icon ui-icon-seek-end")
      .addClass("ui-icon ui-icon-arrowthickstop-1-e");

FastTrack · Answer 2 · 2014-02-11T17:47:38.120

0

EDIT ok, in that case:

// First page: |<
$("#first_your-pagerID span").removeClass("ui-icon-seek-first");
$("#first_your-pagerID span").addClass("ui-icon-newicon");

// Prev page: <
$("#prev_your-pagerID span").removeClass("ui-icon-seek-prev");
$("#prev_your-pagerID span").addClass("ui-icon-newicon");

// Last page: >|
$("#last_your-pagerID span").removeClass("ui-icon-seek-end");
$("#last_your-pagerID span").addClass("ui-icon-newicon");

// Next page: >
$("#next_your-pagerID span").removeClass("ui-icon-seek-next");
$("#next_your-pagerID span").addClass("ui-icon-newicon");

Change your-pagerID to the ID of your pager.

Change ui-icon-newicon to the class of your new icon from the UI icons file (ui-icons_888888_256x240.png)

edited Feb 11 '14 at 17:47

answered Feb 11 '14 at 16:48

FastTrack

8,810
14
57
78

I was referring to the forward and back icons in the pager. I'll revise my original post. – Michael Sobczak Feb 11 '14 at 16:56
I couldn't get your answer to work as is, so I tried to incorporate some of the solution in this post http://stackoverflow.com/questions/13862963/jqgrid-pager-area-using-font-awesome-icons?rq=1 I've updated my original question above. Any hints as to what I'm doing wrong? – Michael Sobczak Feb 11 '14 at 22:49

jqgrid change icons used by the pager

2 Answers2