Impossible de positionner pager (barre de navigation) ci-dessus jqGrid

Question

Selon la documentation de jqGrid, je devrais être en mesure de placer le pageur au-dessus ou en dessous de la jqGrid en déplaçant la div pager. Malheureusement, le pager rend toujours en dessous de la grille.

<div id="pager"></div> 
<table id="list"> 
    <tr> 
     <td /> 
    </tr> 
</table> 

La configuration jqGrid (par rapport au téléavertisseur) ressemble à:

pager: '#pager', 
pginput: false, 
pgbuttons: false, 

Toutes les suggestions?

Answer 1

Vous devez utiliser l'option toppager:true jqGrid à la place. Vous n'avez pas besoin de définir <div id="pager"></div> et utilisez le paramètre pager: '#pager'. L'identifiant du pager du haut de jqGrid sera "list_toppager" (id de l'élément de table ajouté avec "_toppager").

Si vous souhaitez ajouter le navigateur, vous pouvez utiliser

$("#list").jqGrid('navGrid','#list_toppager'); 

Si vous utilisez définir <div id="pager"></div> et utiliser pager: '#pager' paramètre vous aurez deux téléavertisseur: l'un avec id="list_toppager" au-dessus de la grille et anothe avec id="pager" sur le fond. Si vous voulez utiliser à la fois pager haut et en bas, vous pouvez utiliser

$("#list").jqGrid('navGrid','#pager',{cloneToTop:true}); 

puis déplacer ou supprimer (voir another answer pour plus de détails et l'exemple de démonstration). Vous pouvez également déplacer très facilement les boutons d'une barre d'outils à l'autre en utilisant la fonction jQuery.insertAfter (voir here).

Answer 2

utilisez un $ append. le html tableau ci-dessus est comme ce

<div id="export"></div>       

ajouter l'identifiant et utiliser une promesse() fait():. "exportButton"

$(grid).jqGrid('navButtonAdd', self.options.pagerSelector, { id: "exportButton", caption: "Export to CSV", buttonicon: "ui-icon-newwin", onClickButton: function() { self._exportToCSV(self, grid); }, position: "last", title: "Export to CSV", cursor: "pointer" }) 
.promise().done(function() { 
    //reposition export button 
    $("#export").append($("#exportButton")); 
    $("#exportButton").addClass("pull-right").show(); 
});