No se puede colocar el localizador (barra de navegación) sobre jqGrid

Question

De acuerdo con la documentación jqGrid, debería ser capaz de colocar el localizador encima o debajo del jqGrid moviendo el div del localizador. Lamentablemente, el buscapersonas siempre aparece debajo de la cuadrícula.

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

La configuración jqGrid (relacionado con el localizador) se parece a:

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

¿Alguna sugerencia?

Answer 1

En su lugar, debe utilizar toppager:true opción jqGrid. No necesita definir <div id="pager"></div> y usar el parámetro pager: '#pager'. La identificación del buscapersonas desde la parte superior de jqGrid será "list_toppager" (id del elemento de la tabla adjuntado con "_toppager").

Si desea agregar navegador puede utilizar

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

Si utiliza definir <div id="pager"></div> y utilizar pager: '#pager' parámetro que tendrá dos localizador: uno con id="list_toppager" en la parte superior de la rejilla y anothe con id="pager" en El fondo. Si desea utilizar tanto localizador superior e inferior se puede utilizar

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

y luego mover o eliminar (ver another answer para obtener más detalles y el ejemplo de demostración). También puede mover fácilmente los botones de una barra de herramientas a la otra usando la función jQuery.insertAfter (consulte here).

Answer 2

use a $ append. el html por encima de la mesa es como esto

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

añadir el id y el uso de una promesa() Fin():. "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(); 
});