2010-04-22 10 views
10

Voici mon codeComment avoir 2 pager dans jqgrid un en haut et un en bas?

$(document).ready(function() { 
    $('#jqgProducts').jqGrid({ 
     url: '/Home/GridSampleData/', // url from wich 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 
    }); 
}); 

Répondre

20

Inclure "toppager: true" à la liste des options jqGrid. Cela fait exactement ce que vous voulez: "Lorsqu'elle est activée, cette option place un élément pager en haut de la grille sous la légende (si disponible) .Si un autre pager est défini, les deux peuvent coexister et sont rafraîchis en synchronisation."

La liste complète des options que vous pouvez trouver sur http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

+0

Merci Oleg, m'a aidé une tonne –

+1

@Allen: Vous êtes le bienvenu! Si vous voulez plus de personnalisation du pager mon autre réponse http://stackoverflow.com/questions/3552855/add-toolbar-in-the-bottom-of-the-header-using-jqgrid/3557663#3557663 pourrait être aussi intéressant pour toi. – Oleg

+0

@Oleg - est-ce que cela le met en haut au centre ou en haut à gauche? – leora

0

C'est de 4 ans de retard, mais je l'ai vu quelque chose comme ça, option modèle

template: '<div>' + 
      '<div class="jqgrid-pagination"></div>' + 
      '<table></table>' + 
      '<div class="jqgrid-pagination"></div>' +    
      '</div>',