10

Here is my code

 $(document).ready(function () {
     $('#jqgProducts').jqGrid({
         url: '/Home/GridSampleData/', // url from which data should be requested
         datatype: 'json',             // type of data
         mtype: 'GET',                 // url access method type
         colNames: ['userid', 'username', 'email', 'contact', 'password'],
         colModel: [                   // columns model
             { name: 'userId', index: 'userId', align: 'left',
               editable: false },
             { name: 'username', index: 'username', align: 'left',
               editable: true, edittype: 'text',
               editoptions: { maxlength: 20 },
               editrules: { required: true} },
             { name: 'email', index: 'email', align: 'left', editable: true,
               edittype: 'text', editoptions: { maxlength: 50 },
               editrules: { required: true} },
             { name: 'contact', index: 'contact', align: 'left',
               editable: true, edittype: 'text',
               editoptions: { maxlength: 20 }, editrules: { required: true} },
             { name: 'password', index: 'password', align: 'left',
               editable: true, edittype: 'password',
               editoptions: { maxlength: 20 },
               editrules: { required: true} }
         ],
         pager: $('#jqgpProducts'), // pager for grid
         rowNum: 5,                 // number of rows per page
         sortname: 'userId',        // initial sorting column
         sortorder: 'asc',          // initial sorting direction
         viewrecords: true,         // we want to display total records count
         width: '600',              // grid width
         height: 'auto'             // grid height
     });
 });
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
munir
  • 101
  • 1
  • 3

2 Answers2

21

Include "toppager: true" to the list of jqGrid options. This do exactly what you want: "When enabled this option place a pager element at top of the grid below the caption (if available). If another pager is defined both can coexists and are refreshed in sync."

The full list of options you can find on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks Oleg, helped me out a ton – Allen Rice Aug 26 '10 at 14:15
  • 1
    @Allen: You welcome! If you want more customization of the pager my another answer http://stackoverflow.com/questions/3552855/add-toolbar-in-the-bottom-of-the-header-using-jqgrid/3557663#3557663 could be also interesting for you. – Oleg Aug 26 '10 at 14:21
  • @Oleg - does that put it at the top center or the top left ?? – leora Sep 01 '11 at 20:03
  • 1
    @ooo: "toppager: true" creates the same pager as one see typically at the bottom. – Oleg Sep 01 '11 at 20:32
  • @Oleg. I used toppager: true and cloneToTop: true, however my search, refresh and column-reordering/hiding buttons are not transferred to the toppager. Only the pagination buttons appear at the top. Do I have to explicitly add those buttons to the top pager? – keithxm23 Aug 28 '12 at 16:28
  • @keithxm23: If you use `cloneToTop: true` all buttons added by `navGrid` will be added to two pager. I recommend you to read two old answers: [this](http://stackoverflow.com/a/3557663/315935), [this](http://stackoverflow.com/a/4402903/315935), [this](http://stackoverflow.com/a/8511348/315935) and [this](http://stackoverflow.com/a/8854864/315935). If all the answers will don't help you to solve your problem you should describe your problem more exactly and you should post the corresponding code example which you use. – Oleg Aug 28 '12 at 20:49
0

This is 4 years late but I saw something like this, template option 

 template: '<div>' +
             '<div class="jqgrid-pagination"></div>' +
             '<table></table>' +
             '<div class="jqgrid-pagination"></div>' +               
           '</div>',
Tremmillicious
  • 454
  • 4
  • 14