Добавить числовой пейджер в jqGrid

Question

Кто-нибудь знает способ настроить jqGrid на использование числового пейджера?

Вместо страницы 1 из 20 я хочу, чтобы подкачка была похожа на 1,2,3,4> >>и когда я нажимаю на 4, это будет что-то вроде << <4,5,6,7> >>

Я видел, как это делают другие сетки, но я не могу найти встроеннуюспособ для jqGrid сделать это.Возможно, у меня есть способ реализовать это, но я не хочу изобретать велосипед, если там что-то уже есть.Это потребовало бы от меня добавления пользовательских кнопок после получения пользовательских данных из данных сетки, чтобы определить доступные страницы.

Сетка Telerik делает это (http://demos.telerik.com/aspnet-mvc/grid).

Answer 1

Оооо! Во время написания кода Firegnom выложил еще одну реализацию. Тем не менее лучше две рабочие версии, как ни у кого.

Я сделал небольшую демонстрацию, которая демонстрирует, как можно реализовать поведение со ссылками в пейджере. Я сделал код так, чтобы он мог отображать пейджер либо в виде

(если используется pginput: false параметр jqGrid) или в виде

В обоих случаях текущая страница не будет отображаться в списке. Как видите, я вставил подчеркнутый стиль для ссылок. Если вам не нравится это, вы должны удалить

td.myPager a { text-decoration:underline !important }

из демоверсии. Работающие живые демки вы можете увидеть здесь и здесь .

Соответствующий код JavaScript заполнен внутри 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);
    }
}

, где grid и MAX_PAGERS определены как

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

Answer 2

И вот еще одно возможное решение.

Он заменяет текстовое поле подкачки списком ссылок.

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 }]);
    });
}

Answer 3

Насколько я знаю, в jquery для этого нет решения, и вы должны сделать это самостоятельно. ниже у меня есть рабочий код для пейджера:

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);
}

и функция создания ссылок

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

Теперь, чтобы интегрировать этот код с сеткой, просто добавьте его при создании сетки. Событие gridComplete или что-то в этом роде:

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

, а также прикрепить его к событию onPage

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

для предотвращения мерцания просто добавьте к своему CSS

#yourGridNavigator_center{
 display:none;
}

и снова на gridComplete просто добавьте

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

относительно функции patrameters:

• сначала ваш идентификатор навигатора сетки
• секунда - это идентификатор вашей сетки
• этот третий параметр функции показывает, сколько страниц должно отображаться до и после текущей страницы