Search code examples
jqueryhtmlcssjqgridfree-jqgrid

How to show pager only if there is more than one page in free jqgrid


free jqgrid with top-level toolbar is used:

    $.extend(true, $.jgrid.defaults, {
        mtype: 'POST',
        iconSet: "fontAwesome" ,
        navOptions: {
            position: "center"},
        autoResizing: { compact: true,widthOfVisiblePartOfSortIcon: 13 },
        toppager: true,
        viewrecords: false,
        rowList: [50, 500, 1000],
        rowNum: 50,
...

Buttons and pager are in left side of toolbar rendered as inline-block elements. in center part. Left and right part of top level toolbar is removed using code from answer in how to place pager to end of top of toolbar in free jqgrid

    $("#grid_toppager")
         .find(".ui-pg-button")
         .each(function (i) {
             $(this).attr({
                 tabindex: String(i),
                 role: "button"
             });
         });
    $("#grid_toppager_left").hide();
    $("#grid_toppager_right").hide();
    $("#grid_toppager_center").attr("colspan", "2");
    $("#grid_toppager_center").css({ width: "", "text-align": "left", "white-space": "" });
    $("#grid_toppager_center").find(">.navtable").append(
        $("#grid_toppager_center").find(">table.ui-pg-table")
    );
    $("#grid_toppager_center").find(">.navtable>table.ui-pg-table").css({display: "inline-block"});

    $grid.bind("jqGridAfterGridComplete", function () {
        var p = $(this).jqGrid("getGridParam"), $toppager = $(p.toppager);
        $toppager.find(".navtable").css("width", "");
    });

Same code is used to edit tables whose have different number of rows. How to show jqgrid pager in top level toolbar only if there is more that one page (more than 50 rows)?

Many tables contain few rows and showing pager is not nessecary.

If new rows are added pager should appear automatically or alternately, user can refresh page to force pager to appear.

Update

Remote paged data with speed retrieval is used according to how to retrieve colmodel and data on single request and speed up jqgrid load

Only pagesize+1 rows are returned. JSON result is created in ASP.NET MVC4 without records value:

            return new
            {
                total = rowList.Count() < rows ? page : page + 1,    
                page,
                rows = rowList
            };

p.reccount and p.records have always same values and thus pager is never displayed. How to show pager conditionally in this case ? Maybe comparing record in page with page size should used ?


Solution

  • If I correctly understand the problem you can use

    loadComplete: function () {
        var p = $(this).jqGrid("getGridParam"),
            $topPagerButtons = $(p.toppager + "_center").find(">.navtable>table.ui-pg-table");
        $topPagerButtons[p.reccount < p.records ? "show" : "hide"]();
    }
    

    See the demo. You can choose to display 20 or more rows on the page in the demo and the buttons with the pager will be hidden.