mks
mks

Reputation: 45

Move between page in jqgrid

I using jqgrid last version.I use bindKeys method to have keyboard support and it is possible to select a row with Up and Down keys .Now i want use "page up/page down" for navigate between pages(next/prev) how to do it?

  jQuery("#List1").jqGrid('bindKeys', {
});

Upvotes: 0

Views: 2230

Answers (2)

poff
poff

Reputation: 1

For anyone that is trying to do this in Cell Editing mode, this applies at least to jqGrid 4.6.0:

In Cell Editing mode key bindings must be defined directly in the jqGrid source code. Trying to use bindKeys or binding the keydown event won't work. In this case, add the following to the key code switch statement found inside the GridNav function of the jqGrid source:

case 34: // Page Down – Previous page
  var pager = $($t).jqGrid('getGridParam', "pager");
  var page  = $($t).jqGrid('getGridParam', "page");

  if (pager && page > 1) {
    $($t).jqGrid('setGridParam', { "page": page – 1 }).trigger("reloadGrid");
  }
break;
case 33: // Page Up – Next page
  var pager    = $($t).jqGrid('getGridParam', "pager");
  var page     = $($t).jqGrid('getGridParam', "page");
  var lastpage = $($t).jqGrid('getGridParam', "lastpage");

  if (pager && page < lastpage) {
    $($t).jqGrid('setGridParam', { "page": page + 1 }).trigger("reloadGrid");
  }
break;

If you also want to make the Home key to jump to the first page, and End key to the last page, add these:

case 36: // Home – First page
  var pager = $($t).jqGrid('getGridParam', "pager");
  var page  = $($t).jqGrid('getGridParam', "page");

  if (pager && page !== 1) {
    $($t).jqGrid('setGridParam', { "page": 1 }).trigger("reloadGrid");
  }
break;
case 35: // End – Last page
  var pager    = $($t).jqGrid('getGridParam', "pager");
  var page     = $($t).jqGrid('getGridParam', "page");
  var lastpage = $($t).jqGrid('getGridParam', "lastpage");

  if (pager && page !== lastpage) {
    $($t).jqGrid('setGridParam', { "page": lastpage }).trigger("reloadGrid");
  }
break;

Upvotes: 0

ZSH
ZSH

Reputation: 661

Please check this code:

    $(grid).bind('keydown', function (e) {
    var totalPages = $("#sp_1_List1_toppager").text();
    var currentPage = grid.getGridParam('page');
    //pagedown
    if (e.keyCode == 34 && currentPage > 1) {
        grid.jqGrid('setGridParam', { "page": currentPage - 1 }).trigger("reloadGrid");
    }
    //pageup
    else if (e.keyCode == 33 && totalPages != currentPage) {
        grid.jqGrid('setGridParam', { "page": page + 1 }).trigger("reloadGrid");
    }
});

Upvotes: 1

Related Questions