Agregue localizador numérico a jqGrid

Question

¿Alguien sabe de una manera de configurar jqGrid para usar un localizador numérico?

En lugar de la página 1 de 20, quiero que la paginación sea como 1,2,3,4> >> y cuando hago clic en 4 sería algo así como < < < 4,5,6,7> >>

He visto cómo otras grillas lo hacen, pero parece que no puedo encontrar un camino integrado para que jqGrid lo haga. Es posible que tenga una forma de implementarlo, pero no quiero reinventar la rueda si ya hay algo por ahí. Me implicaría agregar botones personalizados después de obtener los datos del usuario de los datos de la cuadrícula para determinar las páginas disponibles.

La cuadrícula de Telerik lo hace (http://demos.telerik.com/aspnet-mvc/grid).

Answer 1

Ohhh! Mientras escribía el código, firegnom publicó otra implementación. Sin embargo, mejor dos versiones de trabajo que nadie.

Realicé una demostración pequeña que demuestra cómo se puede implementar el comportamiento con enlaces en el buscapersonas. Hice el código de modo, que puede mostrar el buscapersonas ya sea en forma

(si se utilizan pginput: false parámetro de jqGrid) o en la forma

En ambos casos la página actual no se mostrará en la lista. Cómo se puede ver Inserté el estilo subrayado para los enlaces.Si no te gusta, debes eliminar

de la demostración. Las demostraciones en vivo de trabajo se pueden ver here y here.

El código JavaScript correspondiente es completa dentro del manejador de eventos loadComplete:

loadComplete: function() { 
    var i, myPageRefresh = function(e) { 
     var newPage = $(e.target).text(); 
     grid.trigger("reloadGrid",[{page:newPage}]); 
     e.preventDefault(); 
    }; 

    $(grid[0].p.pager + '_center td.myPager').remove(); 
    var pagerPrevTD = $('<td>', { class: "myPager"}), prevPagesIncluded = 0, 
     pagerNextTD = $('<td>', { class: "myPager"}), nextPagesIncluded = 0, 
     totalStyle = grid[0].p.pginput === false, 
     startIndex = totalStyle? this.p.page-MAX_PAGERS*2: this.p.page-MAX_PAGERS; 
    for (i=startIndex; i<=this.p.lastpage && (totalStyle? (prevPagesIncluded+nextPagesIncluded<MAX_PAGERS*2):(nextPagesIncluded<MAX_PAGERS)); i++) { 
     if (i<=0 || i === this.p.page) { continue; } 

     var link = $('<a>', { href:'#', click:myPageRefresh }); 
     link.text(String(i)); 
     if (i<this.p.page || totalStyle) { 
      if (prevPagesIncluded>0) { pagerPrevTD.append('<span>,&nbsp;</span>'); } 
      pagerPrevTD.append(link); 
      prevPagesIncluded++; 
     } else { 
      if (nextPagesIncluded>0 || (totalStyle && prevPagesIncluded>0)) { pagerNextTD.append('<span>,&nbsp;</span>'); } 
      pagerNextTD.append(link); 
      nextPagesIncluded++; 
     } 
    } 
    if (prevPagesIncluded > 0) { 
     $(grid[0].p.pager + '_center td[id^="prev"]').after(pagerPrevTD); 
    } 
    if (nextPagesIncluded > 0) { 
     $(grid[0].p.pager + '_center td[id^="next"]').before(pagerNextTD); 
    } 
} 

donde grid y MAX_PAGERS se definen como

var grid = $("#list"), MAX_PAGERS = 2; 

Answer 2

por lo que sé que no hay solución para eso en jquery y tienes que hacerlo tú mismo. A continuación he código de trabajo para el localizador:

function jqgridCreatePager(pagernav,navgrid,pages){ 
    $('#'+pagernav+' #'+pagernav+'_center td:has(input)').attr('id','pager'); 
    var td = $('#'+pagernav+' #'+pagernav+'_center #pager').html(''); 
    var page = parseInt(jQuery("#"+navgrid).jqGrid('getGridParam','page')) 
    var lastPage = parseInt(jQuery("#"+navgrid).jqGrid('getGridParam','lastpage')) 
    text=''; 
    if(page-pages > 1){ 
      text+=jqgridCreatePageLink(navgrid,1) 
      text+= ' ... ' 
    } 
    for(var i=0;i <pages;i++){ 
     if(page-pages+i >=1) 
      text+=jqgridCreatePageLink(navgrid,page-pages+i) 
    } 

    text +=jqgridCreatePageLink(navgrid,page,true); 

    for(var i=0;i <pages;i++){ 
     if(page+i+1 <= lastPage) 
      text +=jqgridCreatePageLink(navgrid,page+i+1) 
    } 

    if(page+pages <= lastPage){ 
     text+= ' ... ' 
     text+=jqgridCreatePageLink(navgrid,lastPage) 

    } 
    var td = $('#'+pagernav+' #'+pagernav+'_center #pager').html(text); 
} 

y la función que está haciendo enlaces

function jqgridCreatePageLink(navgrid,page,current){ 
    if (!current) 
     return ' <a href="#" onclick="jQuery(\'#'+navgrid+'\').jqGrid(\'setGridParam\',{page:'+page+'}).trigger(\'reloadGrid\')">'+page+'</a> '; 
    return ' >'+page+'< ' 
} 

ahora para integrar este código con la red sólo tiene que añadir que cuando se crea la rejilla caso gridComplete o algo por el estilo:

//create 
jqgridCreatePager('yourGridNavigator','yourGrid',3) 

y adjuntarlo al evento Onpage

//onPage 
jqgridCreatePager('yourGridNavigator','yourGrid',3) 

para evitar el parpadeo sólo tiene que añadir a su css

#yourGridNavigator_center{ 
display:none; 
} 

y de nuevo el gridComplete sólo tiene que añadir

$('#yourGridNavigator_center').show(); 

como a los patrameters de función:

• primera es su rejilla navegador ID
• segundo es su ID de cuadrícula
• este tercer parámetro de la función es cuántas páginas se deben mostrar antes y después de la página actual

Answer 3

Y aquí está uno más posible solución.

Reemplaza el cuadro de texto de paginación con una lista de enlaces.

loadComplete: function() { 
    var grid = this; 
    var container = jQuery("#prev_jqGridTablePager").next().next(); 
    jQuery(container).html(''); 

    var totalPages = grid.p.lastpage; 
    for (var i = 1; i <= totalPages; i++) { 
     if (i == grid.p.page) { 
      jQuery(container).append("<span class='pagination current'>" + i + "</span>"); 
     } else { 
      jQuery(container).append("<a class='pagination' href='javascript: void(0)'>" + i + "</a>"); 
     } 
    } 

    jQuery(container).find("a.pagination").click(function(e) { 
     e.preventDefault(); 

     var newPage = jQuery(this).text(); 
     jQuery(grid).trigger("reloadGrid", [{ page: newPage }]); 
    }); 
}