0

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 ?

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

1

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • If remote paged data with optimized retrieval is used, p.reccount and p.records have same values and pager is never displayed. How to enable/disable pager in this case ? I updated question. – Andrus Mar 16 '15 at 18:33
  • @Andrus: If you load the second page for example, then `p.reccount` should be the number of displayed rows on the page and `p.records` should be *the total number of records*. If the values are the same than you have one page of data only and no pager needed be displayed. It was what you asked. Isn't so? If you want to hide *only the part of pager elements* you can do the same, but select only the elements which you want to hide/show. If you return **non standard information in the server response** use have to change the test criteria corresponds to *the data which your return*. – Oleg Mar 16 '15 at 19:44
  • Data is returned as described in your answer to question referenced in updated part of this question. This is standard way.First request for first page returns 50 records and record count is also 50 records. alert() box shows that both value is 50. Since `50<50` condition is false, pager does not appear. Actually there is huge number of records in table so pager should appear. – Andrus Mar 16 '15 at 20:32
  • @Andrus: It's clear that if you want to hide the pager *on the client side* if the returned data are *full* that you should return the information from the server. If you don't fill `records` part and to fill `total` instead that you should test whether `total` is not equal `page` (probably it means `p.page < p.lastpage`) instead of `p.reccount < p.records`. – Oleg Mar 16 '15 at 20:47
  • `p.page < p.lastpage` causes pager to disappear if last page is reached. Maybe `p.page>1 || p.page < p.lastpage` should used – Andrus Mar 16 '15 at 20:57
  • @Andrus: If you have a working could it should be easy to find criteria which you need. If you don't find it then you need extend your server response with additional property: `toHidePager` which you should set. On the client side you can see it in `loadComplete (data)` as `data.toHidePager`. – Oleg Mar 16 '15 at 21:01
  • Probably `$topPagerButtons[(p.page>1 || p.page < p.lastpage) ? "show" : "hide"]();` solves the issue. Thank you. – Andrus Mar 16 '15 at 21:03